How can I accomplish this:
|xxDIVxx| |xxDIVxx| |xxDIVxx|
Trying to get multiple DIVs to remain on one row, but they always seem to "wrap" to the next line like this:
|xxDIVxx|
|xxDIVxx|
|xxDIVxx|
Thanx.Basics:
<div style="width:80%;border:1px solid #000;">
<div style="float:left; width:33.3%; background:#aaa;">one</div>
<div style="float:left; width:33.3%; background:#bbb;">two</div>
<div style="float:left; width:33.4%; background:#ccc;">three</div>
<div style="clear:both;"></div>
</div>This is one advantage tables have over divs. Trying to create a "row" out of divs is one hell of a pain in the ass. Another method is to use display: inline and float that way as well. Or just use absolute positioning at the same top and shift left the divs width (total if more than one div).
Is it possible to have inline divs using relative positioning? So that the next div will align itself horizontally to its neighbor despite it's width? This would also allow the divs to remain in flow.Once you make a div inline it essentially becomes a span so the property width has no effect.
Have a look at these boxes (<!-- m --><a class="postlink" href="http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html">http://www.thenoodleincident.com/tutori ... boxes.html</a><!-- m -->)it really depends on exactly what u want to accomplish because some ways of getting boxes beside each other change the flow of the page. Most often, folks want the boxes to affect the flow, and when u float them you take them out of the flow. That's the issue, basically. Floats make it easy to line stuff up but then they're out of the flow, which stinks more often than not.
If you want interdependent boxes side by side, just stop yanking your hair out and use a table. CSS is awesome but counterproductive for certain situations like this. There are countless hairless people who've taken a stab at the perfect solution to this...
I'm not saying don't try to figure it out, of course, just FYI that it's so far not been solved to have to content areas side by side act like 2 table TDs, at least that I know of. I posted almost this same question here last week.You may be interested in the Piefecta 3-column layout (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/piefecta-rigid.html">http://www.positioniseverything.net/piefecta-rigid.html</a><!-- m -->) at positioniseverything.net.
|xxDIVxx| |xxDIVxx| |xxDIVxx|
Trying to get multiple DIVs to remain on one row, but they always seem to "wrap" to the next line like this:
|xxDIVxx|
|xxDIVxx|
|xxDIVxx|
Thanx.Basics:
<div style="width:80%;border:1px solid #000;">
<div style="float:left; width:33.3%; background:#aaa;">one</div>
<div style="float:left; width:33.3%; background:#bbb;">two</div>
<div style="float:left; width:33.4%; background:#ccc;">three</div>
<div style="clear:both;"></div>
</div>This is one advantage tables have over divs. Trying to create a "row" out of divs is one hell of a pain in the ass. Another method is to use display: inline and float that way as well. Or just use absolute positioning at the same top and shift left the divs width (total if more than one div).
Is it possible to have inline divs using relative positioning? So that the next div will align itself horizontally to its neighbor despite it's width? This would also allow the divs to remain in flow.Once you make a div inline it essentially becomes a span so the property width has no effect.
Have a look at these boxes (<!-- m --><a class="postlink" href="http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html">http://www.thenoodleincident.com/tutori ... boxes.html</a><!-- m -->)it really depends on exactly what u want to accomplish because some ways of getting boxes beside each other change the flow of the page. Most often, folks want the boxes to affect the flow, and when u float them you take them out of the flow. That's the issue, basically. Floats make it easy to line stuff up but then they're out of the flow, which stinks more often than not.
If you want interdependent boxes side by side, just stop yanking your hair out and use a table. CSS is awesome but counterproductive for certain situations like this. There are countless hairless people who've taken a stab at the perfect solution to this...
I'm not saying don't try to figure it out, of course, just FYI that it's so far not been solved to have to content areas side by side act like 2 table TDs, at least that I know of. I posted almost this same question here last week.You may be interested in the Piefecta 3-column layout (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/piefecta-rigid.html">http://www.positioniseverything.net/piefecta-rigid.html</a><!-- m -->) at positioniseverything.net.