CODEWITHSUNDEEP
csscss-float
sandraqu
sandraqu

Reputation: 1528

Why does float interfere with display block line return

It is my understanding that a display:block will automatically start in a new line. Why do the boxes collapse when a float:left is introduced inside a div with display:block? Here is a fiddle and below the code

#wrapper {
width:300px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px solid #a39b8b;
background-color:#fff;
-moz-box-shadow: 0px 0px 10px #888;
-webkit-box-shadow: 0px 0px 10px #888;
box-shadow: 0px 0px 10px #888;}
#header { width: 100%; display: block; }
#logo { width: 100px; height: 145px; background: #fde; }
#slogan {
display: block; background: #f9ebcd; height: 35px; -moz-box-shadow: 0px 3px 10px #888;
-webkit-box-shadow: 0px 3px 10px #888; box-shadow: 0px 3px 10px #888; border: 1px solid red;
}
.left { float:left;}



<div id="wrapper">
<div id="header">
     <div id="logo"class="left">left</div>
</div>
<div id="slogan">slogan</div>

Upvotes: 2

Views: 483

Answers (5)

Pamela
Pamela

Reputation: 93

What are you trying to do? If you want the slogan box to appear beneath the logo box, you need to add clear:both; to the #slogan code.

Upvotes: 0

simshaun
simshaun

Reputation: 21476

I recommend you familiarize yourself with clearfix. It makes life easier.

Your example (revised): http://jsfiddle.net/HkHTk/4/

Upvotes: 2

Jared
Jared

Reputation: 12524

You need to clear your float using the CSS clear property.

Upvotes: 0

brabster
brabster

Reputation: 43600

Floats move an element out of the normal flow of the page. If there's nothing left in the flow inside a containing element, it will 'collapse'.

Check the specs for more info.

Upvotes: 2

Matt Ball
Matt Ball

Reputation: 360016

That's just what happens with float.

A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.

The fix:

#wrapper {
    overflow: auto;
}

Demo: http://jsfiddle.net/mattball/CjXNW/

Upvotes: 1

Related Questions