Hello all,
This question is half css and half html based, so I chose this group. I
have a theortical question. When positioning floating <div>'s, how much
does it matter what order you put itin in the html? Consider this
situation.
In the website I run, I use two column liquid layout modeled after the
one here: http://www.alistapart.com/articles/negativemargins/
The sidebar div is floated right and content div is to the left (not
floated). In my html, I have the sidebar div first, followed by the
content div. This works as intended. BUT....when the site loads, I'd
like the content div to display first, *before* the sidebar. When I
switch their positions (content first, then sidebar) the layout does
not work.
My question is: shouldn't it work? If the side bar is floated to the
right and has a specific width, should it matter whether it comes
before the content div or after the content div? It seems like this
layout should be "reversible ". When I place the side bar first, it
floats right and the content div comes up and takes the remaining space
on the left. The content div is margined to allow space for the
sidebar. I assumed that placing the content first would still allow the
sidebar to come up into the space I provided for it.
The interesting thing is: if I reverse the float (float content left
and leave sidebar unfloated) it still doesn't work.
Here's what my css looks like:
#container {
width: 99.5%;
float: left;
margin-right: -170px;
border: solid 2px white;
padding: 0;
}
#sidebar {
width: 170px;
float: right;
background: black;
text-align: center;
padding: 5px;
text-align: center;
}
#content {
background: #ff9900;
margin-right: 180px;
text-align: center;
border-right: solid 1px white;
padding: 0 0 1px 0;
}
....and here's the basic layout of my html:
<div id="container" >
<div id="sidebar"></div>
<div id="content"></div>
</div>
and here's the site for reference: www.sayatnova.com
Thanks in advance for any replies. You all are really helping me learn
this stuff.
Viken K.
