473,221 Members | 1,751 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,221 software developers and data experts.

Floating DIV positioning. How much does the order matter?

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
2 2653
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
> 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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Frances Del Rio | last post by:
don't know if I'll succeed, have spent a lot of time already trying to figure this out: I would like to position a footer (co. name, address, etc..) at the bottom of browser page, in such a way...
17
by: George Hester | last post by:
http://tinyurl.com/5uj6w The lower middle icon the "block" should not drop down when the mouse is over it. How can I stop that? Also the navigation divs both top and bottom should follow the...
3
by: Oliver Bryant | last post by:
I just finished developing a javascipt component allowing floating captions to appear over HTML elements. If anyone wants to check it out you can see specs and download it from...
687
by: cody | last post by:
no this is no trollposting and please don't get it wrong but iam very curious why people still use C instead of other languages especially C++. i heard people say C++ is slower than C but i can't...
7
by: Vinoth | last post by:
I'm working in an ARM (ARM9) system which does not have Floating point co-processor or Floating point libraries. But it does support long long int (64 bits). Can you provide some link that would...
13
by: Bern McCarty | last post by:
I have run an experiment to try to learn some things about floating point performance in managed C++. I am using Visual Studio 2003. I was hoping to get a feel for whether or not it would make...
10
by: Bryan Parkoff | last post by:
The guideline says to use %f in printf() function using the keyword float and double. For example float a = 1.2345; double b = 5.166666667; printf("%.2f\n %f\n", a, b);
7
by: Allie | last post by:
Here's an example of what I'm trying to do: <table> <tr style="text-align:left; font-size:10pt; font-weight:bold"> <!-- I want this word to align to the left --> ' ||CRPT|| ' <!-- I want this...
5
by: Adam Smith | last post by:
Hello, Several of the newer, more professional web sites are using a newspaper columnar layout, with text and links discretely contained in rectangular boxes (square or rounded), frequently with...
0
by: veera ravala | last post by:
ServiceNow is a powerful cloud-based platform that offers a wide range of services to help organizations manage their workflows, operations, and IT services more efficiently. At its core, ServiceNow...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
by: jimatqsi | last post by:
The boss wants the word "CONFIDENTIAL" overlaying certain reports. He wants it large, slanted across the page, on every page, very light gray, outlined letters, not block letters. I thought Word Art...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.