By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
445,678 Members | 1,144 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 445,678 IT Pros & Developers. It's quick & easy.

Floating DIV positioning. How much does the order matter?

P: n/a
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.

Dec 29 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
Viken Karaguesian wrote:

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?
"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.
The interesting thing is: if I reverse the float (float content left
and leave sidebar unfloated) it still doesn't work.

What does "not work" mean?

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Dec 29 '05 #2

P: n/a
> What does "not work" mean?

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
me!

<SIGH>

Thanks,

Viken K.
Dec 30 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.