html - strange behavior floats -

html - strange behavior floats -

this code

#sidebar { width:140px; border: solid 3px green; height:300px; float:left; } #content { border: solid 3px blue; height:400px; float:left; } <div id="sidebar">sidebar</div> <div id="content">content</div>

since width of content div not specified, expected it take plenty space display text within div

now instead of using float utilize margin this:

#content { border: solid 3px blue; height:400px; margin-left:160px; }

the content div take rest of width of browser viewport though width not specified.

i assume reason content div inheriting width attribute of body tag assigned user agent stylesheet. if true, question why isn't inheritance happening when using floats?

an unspecified width on div defaults width:100%;.

you need specify width:auto; effect want, beingness wide plenty contain content.

#content { width : auto; border : solid 3px blue; height : 400px; float : left; }

html css css-float