I have a structure like this
<div id="first">
<div id="second">
<div id="third">
<div id="fourth">
text
</div>
<div id="fourth">
text2
<开发者_StackOverflow中文版;/div>
</div>
Some other stuff...
</div>
</div
Here's the css for it at the moment:
#first {
width:960;
}
#second {
position:relative;
}
#third {
position:relative;
top:0;
right:0;
}
#forth {
position:relative;
top:0;
left:0;
}
Now I would like from the fourth items to stay in a row and from the third item to stay on the right side of the second div. The second div also has a width 960 like the first one. What's the problem with this? why it isn't working?
Edited and should work(untested):
<div id="first">
<div id="second">
<div id="third">
<div class="fourth"> <!-- changed to class -->
text
</div>
<div class="fourth"> <!-- changed to class -->
text2
</div>
</div>
Some other stuff...
</div>
</div> <!-- was missing closing bracket -->
And the style:
#first {
width:960px; /* was missing px */
}
#second {
position:relative;
}
#third {
float:right /* Makes the element float on the right side. Might want to clear in a later id/class to avoid quirks */
position:relative;
/* Removed redundant top:0; and right:0; */
}
.fourth { /* Changed to class and fixed spelling */
position:relative;
/* Removed redundant top:0; and right:0; */
}
ID's should be used for elements that will only be used once. Classes should be used for elements that can/will be used multiple times.
For the forth div, why not use inline-div? [not sure it works on IE7 and below]..and im think the third can be floated to the right. Also shouldn't you be using classes as opposed to multiple elements with the same id?
#third { float: right; position:relative; top:0; right:0; }
#forth { display:inline-block position:relative; top:0; left:0; }
First, 960 isn't a width. Without a units specifier, it's just a number. 960px
is a width.
Second, those other divs are positioned correctly, but their widths are 100% (the default), so they just look like they're stacked. The positioning is not noticeable because of that.
Edit: You also misspelled "#fourth" in your CSS selector.
精彩评论