CSS background is less than div hight

Question

Help me please, I can't understand result of my simply code:

<div id="wrapper-top">
    <div class="wrapper">
        <div id="logo">logo</div>
        <div id="menu">menu</div>
        <div id="content">
            <div class="block-1-1">text</div>
            <div class="block-3-1">text</div>
            <div class="block-3-2">text</div>
            <div class="block-3-3">text</div>
        </div>
    </div>
</div>

and css file:

#wrapper-top
{
    width: 100%;
    background-color: gray;
}
.wrapper
{
    margin: 0 150px 0 150px;
}
#logo
{
    width: 100%;
    height: 50px;
}
#menu
{
    width: 100%;
    height: 50px;
    background-color: navajowhite;
}
#content
{
    width: 100%;
    background-color: white;
}
.block-1-1
{
    width: 100%;
    text-align:center;
    background-color: pink;
}
.block-3-1
{
    float:left;
    width:33%;
    text-align:center;
    background-color: violet;
}
.block-3-2
{
    float:left;
    width:34%;
    text-align:center;
    background-color: blueviolet;
}
.block-3-3
{
    float:left;
    width:33%;
    text-align:center;
    background-color: yellowgreen;
}

Why divs .block-3-1, .block-3-2 and .block-3-3 seem to be outside of div .wrapper. enter image description here

I don't expected that because I want this blocks inside .wrapper.

http://jsfiddle.net/4yvLv853/1/

score 0 · Accepted Answer · edited May 23 '17 at 11:58

0

You need to contain the floated items in the #content div

One method (there are others as detailed here) is to use overflow:hidden

#content
{
    width: 100%;
    background-color: white;
    overflow: hidden;
}

JSfiddle Demo

edited May 23 '17 at 11:58

Community

1
1

answered Jun 04 '15 at 16:26

Paulie_D

107,962
13
142
161

score 0 · Answer 2 · answered Jun 04 '15 at 17:49

use clearfix

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}



#wrapper-top
{
    width: 100%;
    background-color: gray;
    border: solid blue 1px;
}
.wrapper
{
    margin: 0 150px 0 150px;
    border: solid brown 1px;
}


#logo
{
    width: 100%;
    background-color: white;
}
#menu
{
    width: 100%;
    background-color: navajowhite;
}
#content
{
    width: 100%;
    background-color: white;
}
.block-1-1
{
    width: 100%;
    text-align:center;
    background-color: pink;
}
.block-3-1
{
    float:left;
    width:33%;
    text-align:center;
    background-color: violet;
}
.block-3-2
{
    float:left;
    width:34%;
    text-align:center;
    background-color: blueviolet;
}
.block-3-3
{
    float:left;
    width:33%;
    text-align:center;
    background-color: yellowgreen;
}

<div id="wrapper-top">
    <div class="wrapper clearfix">
        <div id="logo">logo</div>
        <div id="menu">menu</div>
        <div id="content">
            <div class="block-1-1">block-1-1</div>
            <div class="block-3-1">block-3-1</div>
            <div class="block-3-2">block-3-2</div>
            <div class="block-3-3">block-3-3</div>
        </div>
    </div>
</div>

score -1 · Answer 3 · answered Jun 04 '15 at 16:28

Try

<div id="wrapper-top">
    <div class="wrapper" style="height: 400px"> //You can add this in CSS if you want.
        <div id="logo">logo</div>
        <div id="menu">menu</div>
        <div id="content">
            <div class="block-1-1">text</div>
            <div class="block-3-1">text</div>
            <div class="block-3-2">text</div>
            <div class="block-3-3">text</div>
        </div>
    </div>
</div>

I think the wrapper height is too small.

Alternatively, if you want the .wrapper div to stay the height it is, try changing the #content to

#content {
overflow-y: scroll;
overflow-x: hidden;  //this gets rid of the pesky bottom scrollbar
}

CSS background is less than div hight

3 Answers3