CODEWITHSUNDEEP
htmlcss
user3804594
user3804594

Reputation: 3

CSS: Don't accept the whole div

I've created a div containing child divs. The child divs are supposed to have the same background-color as the main div (<div id="how-it-works">), but it doesn't seem to work and I'm not sure why.

Any suggestions? 

#how-it-works{
    background-color: #eeeeee;
    padding-top: 50px;
}
#how-it-works h3{
    font-family: gill sans;
    letter-spacing: 10px;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    padding-top: 0px;
    padding-bottom: 10px;		
}
#details-wrapper{
    padding-top: 50px;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #eeeeee;
}
#feature-one{
    width: 30%;
    float: left;
    margin-right: 30px;
}
#feature-one p {
    font-family: times;
    font-size: 14px;
    font-weight: normal;
    text-align: justify;
}        
#feature-one img {
    width: 100px;
    height: 100px;
}
#feature-two{
    width: 30%;
    float: left;
    margin-left: 20px;
}
#feature-two p{
    font-family: times;
    font-size: 14px;
    font-weight: normal;
    text-align: justify;
}
#feature-two img{
    width: 100px;
    height: 100px;
}
#feature-three{
    width: 30%;
    float: right;
    margin-left: 10px;
}
#feature-three p {
    font-family: times;
    font-size: 14px;
    font-weight: normal;
    text-align: justify;
}
#feature-three img{
    width: 100px;
    height: 100px;
}
<div id="how-it-works">

    <h3>TITLE</h3>
    <p>Text.</p>
    
    <div id="details-wrapper">
    	<div id="feature-one">
            <img src="images/bild.jpg">
    	    <h4>TITLE</h4>
    	    <p>Text.</p>
        </div>
    	<div id="feature-two">
    	    <img src="images/bild.jpg">
    	    <h4>TITLE</h4>
    	    <p>Text.</p>
    	</div>
    	<div id="feature-three">
    	    <img src="images/bild.jpg">
    	    <h4>TITLE</h4>
    	    <p>Text.</p>
    	</div>
    </div>
</div>

Upvotes: 0

Views: 95

Answers (5)

ckuijjer
ckuijjer

Reputation: 13814

Try adding a clearfix to the #how-it-works container

#how-it-works:after {
  content: '';
  display: block;
  clear: both;
}

The three feature <div>s are floating. This takes them outside of the normal document flow which makes them not influence the height of the #how-it-works container. A clearfix, or in this case as Jonas Grumann mentioned adding overflow: hidden solves this. The clearfix however is the better option if you need e.g. a box-shadow on the element.

If you inspect the #how-it-works container in for example Chrome's DevTools you can easily see this, the feature <div>s aren't in the blue overlay that shows the dimensions of the #how-it-works container.

Upvotes: 1

ironmouse
ironmouse

Reputation: 1386

Remove the float property from the last div element (#feature-three):

#feature-three {
    margin-left: 10px;
}

This will make the parent div recognise at least the height of this element and paint the background.

With overflow: hidden on your parent div you won't see overlapping elements. Eventually you need then scrollbars with overflow: auto; :

#how-it-works {
    background-color: #eeeeee;
    overflow: auto;
    padding-top: 50px;
}

Upvotes: 0

Punita
Punita

Reputation: 1387

replace below code:

#how-it-works{
    background-color: #eeeeee;
    padding-top: 50px;
}

with new code:

#how-it-works{
    display: block;
    float: left;
    width: 100%;
    background-color: #eeeeee;
    padding-top: 50px;
}

Note: main parent DIV should set 'display' block and 'width' 100% and it fixed issue.

Upvotes: 0

Refilon
Refilon

Reputation: 3499

You can also make an class .clear{ clear:both; } and use that one under the #feature-* elements.

See fiddle: fiddle

Upvotes: 0

Jason Li
Jason Li

Reputation: 1585

the three 'feature-*' are float.

You can set how-it-works overflow:hidden.

Upvotes: 0

Related Questions