float with set width forces outer container to width of inner container

**Jonathan N. Little** · Sep 20 '08, 02:25 PM

Re: float with set width forces outer container to width of innercontainer

Jim Carlock wrote:

I ran into a problem a think. Either that or I overlooked something.
I seem to run into this problem quite often. I fail to pinpoint the
problem and it appears as a bug with mozilla browsers.

No, Mozilla is getting it right, but I assume you think IE is correct
here. Floats are *not* contained by their static parents. Now what we
don't have here is a URL! (Seems like a broken record, but there maybe
factors which are not included in your snippet like Do you have a
Doctype? Does the page trigger quirks mode in IE?)

Anyone willing
to offer a hint or suggestion as to why the outer container retains
the width of the inner container, instead of auto-clearing both sides
and instead of growing to the size of the container holding everything?

It isn't, the outer_container will be as wide as #container if you add a
border to it your will see that it will look like a "line" the width of
#container- and margins or padding. What you will also note is it
will *not* look like a box containing the floating child DIV.

>
<div id="container"> 
>
...
>
<div>

<div style="width:50 0px;float:left; margin:1.25em auto;border:1px #AA0000 solid;padding:1 .25em;clear:bot h;">
<form action="http://google2.fda.gov/search" method="get">
<p>Please enter what you want to find at the F.D.A. Type <i>canola</ior <i>rapeseed</iinto the text box below.</p>
<p class="pc"><b>E nter Words</b>: <input type="text" name="q" style="width:30 0px;" /><br />
<input type="submit" value="Submit" /></p></form>

Add a clearing element here to keep float from breaking out of the
bottom of "outer_containe r"

</div></div>
>
...
>
</div>
>
I tried the following styles for the outer_container :
>
<div style="width:10 0%;">
<div style="width:au to;">

Or add <div style="overflow : hidden;">
to get outer_container to "contain" the float. See

CSS - Clearing floats

http://www.quirksmode.org/css/clearing.html

CSS - Clearing floats

for more on the subject.

>
I must be missing out on something...
>
microcosmotalk dot com/live/health/canola/#canola_more_in formation

Oh, is this the page? TIP: learn what an external stylesheet is...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO

Little Works Studio Site Maintainance

http://www.LittleWorksStudio.com

**dorayme** · Sep 21 '08, 12:05 AM

Re: float with set width forces outer container to width of inner container

In article <48d500e0$0$848 7$9a6e19ea@unli mited.newshosti ng.com>,
"Jim Carlock" <jcarlock@127.0 .0.1wrote:

I ran into a problem a think. Either that or I overlooked something.
I seem to run into this problem quite often. I fail to pinpoint the
problem and it appears as a bug with mozilla browsers. Anyone willing
to offer a hint or suggestion as to why the outer container retains
the width of the inner container, instead of auto-clearing both sides
and instead of growing to the size of the container holding everything?

<http://netweaver.com.a u/floatHouse/>

--
dorayme

float with set width forces outer container to width of inner container

float with set width forces outer container to width of inner container

Comment

Comment