Floating DIV positioning. How much does the order matter?

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

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

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>

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.

Re: Floating DIV positioning. How much does the order matter?

Viken Karaguesian wrote:
Quoted text here. Click to load it
  "Float" is a generalization of the "align" attribute for <img>. A
floated block positions in a similar way as an image. Place the floated
block after a fixed block, it floats there, after the block.
  Place the floated block before a fixed block, the contents of the fixed
block flow around the floated one.

Quoted text here. Click to load it
  What does "not work" mean?

jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Re: Floating DIV positioning. How much does the order matter?

Quoted text here. Click to load it

In this case, I mean that the div's don't end up side by side. I'll have to
try again. Now that I read your reply, it makes total sense. Duuuuuuuh on



Viken K.

Site Timeline