473,320 Members | 1,838 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,320 software developers and data experts.

Nested floated divs

Hi

If I have a container div and inside the container div I float two divs
(one left and one right), the containting div will collapse as the
floated divs will no longer prop it up, meaning that any background
colour or image on the containing div will not be visible.

Now, suppose I put left and right padding on the containing div. How
come, if the containing div has collapsed, does the padding of the
container still apply to the two nested floated divs? It seems as though
the floated divs are 'inside' the container in some ways, but not inside
the container in other ways (they don't prop it up). Is there some
simple way to think of this so it all makes sense?
Oct 7 '07 #1
2 2151
On 2007-10-07, Ben C. <be*@example.netwrote:
Hi

If I have a container div and inside the container div I float two divs
(one left and one right), the containting div will collapse as the
floated divs will no longer prop it up, meaning that any background
colour or image on the containing div will not be visible.

Now, suppose I put left and right padding on the containing div. How
come, if the containing div has collapsed, does the padding of the
container still apply to the two nested floated divs?
The container still has all its padding. Its top, left and right padding
will be above, to the left and to the right of the floats inside.

It's just that its auto height calculation (if it has auto height)
doesn't take account of the floats.
It seems as though the floated divs are 'inside' the container in some
ways, but not inside the container in other ways (they don't prop it
up). Is there some simple way to think of this so it all makes sense?
The explanation you've given is OK-- they start inside but end outside.
Oct 7 '07 #2
In article <5m************@mid.individual.net>,
"Ben C." <be*@example.netwrote:
Hi

If I have a container div and inside the container div I float two divs
(one left and one right), the containting div will collapse as the
floated divs will no longer prop it up, meaning that any background
colour or image on the containing div will not be visible.

Now, suppose I put left and right padding on the containing div. How
come, if the containing div has collapsed, does the padding of the
container still apply to the two nested floated divs? It seems as though
the floated divs are 'inside' the container in some ways, but not inside
the container in other ways (they don't prop it up). Is there some
simple way to think of this so it all makes sense?
Well you could think of it this way:

<http://tinyurl.com/2wktfv>

--
dorayme
Oct 8 '07 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
by: Zaka Ferenc | last post by:
Hi all, the page http://info.etr.elte.hu/divtest5.html looks as I expected in IE6 and Opera 7.11, but the floated divs float out of the containing blocks (divs) in NN7.1 and Opera 7.0 (what I...
9
by: Dustin | last post by:
Here's what I am trying to do: (Names represent CSS classes.) I want to create a photo gallery. I want the entire gallery to be surrounded by a box named PhotoGallery. I want a fluid placement...
3
by: Philip | last post by:
I am trying to make a bunched of left-floated divs that will be contained in a larger div. the floated divs all contain a left-floated img and text of varying sizes. If I don't set a height (or...
7
by: Gnolen | last post by:
Hi, I have a problem with float in firefox/mozilla, the 'ads'-div doesn't resize on the height with the 'ads_left' and 'ads_right'. In IE there is no problem but in FF there is. The 'ads'-div do...
2
by: tasman.hayes | last post by:
I'm experimenting with converting a site from a table layout to CSS. I'm floating three DIVs in a row for the top of a website (a logo, navigation buttons and a email list signup box). The DIVs...
1
by: alex | last post by:
Hey all, May have missed this in the FAQ, advice or article links welcome. Have a content div with a navigation div floated left and an advertisement div floated right. I would like to have a...
4
by: D | last post by:
Hi, I've been toying around with master pages and am trying to set up your standard banner across the top and 3 areas below that, left content, center content and right content. I have the...
10
by: crazeway | last post by:
The top margin of a nested div (#main) is pulling down its containing div (#middle) along with the 2 floated divs flanking it. This problem corrects itself and gives me the desired effect if I add a...
7
by: Ed Jay | last post by:
I have two divs. The left div is floated left and the right div is floated right. If the left div contains a single line, the left and right divs are on the same line (obviously). But...the left...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

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.