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

[Jim Carlock]

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?

<div id="container"><!-- container -->

....

<div><!-- outer_container -->
<!-- http://google2.fda.gov/search?q=canola -->
<div style="width:500px;float:left;margin:1.25em auto;border:1px #AA0000 solid;padding:1.25em;clear:both;">
<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>Enter Words</b>: <input type="text" name="q" style="width:300px;" /><br />
<input type="submit" value="Submit" /></p></form>
</div><!-- outer_container --></div>

....

<!-- container --></div>

I tried the following styles for the outer_container:

<div style="width:100%;"><!-- outer_container -->
<div style="width:auto;"><!-- outer_container -->

I must be missing out on something...

microcosmotalk dot com/live/health/canola/#canola_more_information

Thanks for any help that comes my way.

--
Jim Carlock
You Have More Than Five Senses
http://www.associatedcontent.com/art...ve_senses.html

[Jonathan N. Little]

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"><!-- container -->

...

<div><!-- outer_container -->
<!-- http://google2.fda.gov/search?q=canola -->
<div style="width:500px;float:left;margin:1.25em auto;border:1px #AA0000 solid;padding:1.25em;clear:both;">
<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>Enter Words</b>: <input type="text" name="q" style="width:300px;" /><br />
<input type="submit" value="Submit" /></p></form>

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

</div><!-- outer_container --></div>

...

<!-- container --></div>

I tried the following styles for the outer_container:

<div style="width:100%;"><!-- outer_container -->
<div style="width:auto;"><!-- outer_container -->

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

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_information

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

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[dorayme]

In article <48**********************@unlimited.newshosting.co m>,
"Jim Carlock" <jc******@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.au/floatHouse/>

--
dorayme