CODEWITHSUNDEEP
htmlcss
Shardj
Shardj

Reputation: 1969

Div heights matching sub divs

I've been trying to space out my divs so they slot in under each other on the page. The problem I'm having (as shown in image) is that I can't get the height of the div to be the same as the div children of it. In this example I have my "box1" and 2 "sub-boxes". The sub-boxes have the text inside but the main div which contains them doesn't have any height.

This is an issue because when I try to add in divs underneath this one they just slot in at the same place as the top one.

screenshot of issue

If my problem isn't clear please say and I'll try to elaborate

Here is a quick snippet of HTML

<div id="aboutus-box1">
<div id="aboutus-box1sub1">
    <span id="subtitle">What is this site all about</span><br/>
    Information and details about the site, point put forwards to new users to look to the help page for support and to look at the <a id="textlink">site rules</a> TEXT FILLER ------------------------------------------- ----------------------------- ------------------ ------------------------- --------------------- --------------------------------- ----------------------- -------------------------- -------------------------------- ----- -------------------------------------- ----------------------------- ------------------------------------------ ------------------------------ ------------------------------------------------- -------------------------------------------------------- ------------------------------------------------ ----------------------------------------------------------------------- ------------------------------------
</div>
<div id="aboutus-box1sub2">
    <span id="subtitle">Our History</span><br/>
    How the group came about, where different members came from, how the idea came about TEXT FILLER ------------------------------------------- ----------------------------- ------------------ ------------------------- --------------------- --------------------------------- ----------------------- -------------------------- -------------------------------- ----- -------------------------------------- ----------------------------- ------------------------------------------ ------------------------------ ------------------------------------------------- -------------------------------------------------------- ------------------------------------------------ ----------------------------------------------------------------------- ------------------------------------
</div></div>

And some CSS

#aboutus-box1{
    width:100%;
    margin-bottom:1%;
    margin-top:1%;
    }
#aboutus-box1sub1{
    height:100%;
    width:49.5%;
    float:left;
    }
#aboutus-box1sub2{
    height:100%;
    width:49.5%;
    float:right;
    margin-left:1%
    }

Here's a JSFiddle Demo

Upvotes: 3

Views: 122

Answers (3)

Brian Stephens
Brian Stephens

Reputation: 5271

The parent (#aboutus-box1) needs another style: overflow: hidden;

Upvotes: 1

DaniP
DaniP

Reputation: 38252

Since you are using float you need to use also the clear property to make the parent preserve the height.

 #aboutus-box1:after{
    content:" ";
    display:block;
    clear:both;
}

You can check here More About Floats and other ways to use the clear property.

Your Fiddle demo

Upvotes: 5

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

You need to clear your floats in order for the layout to resume.

There are many ways to do this, the simplest being a clearing div after your last floated element.

<div class='clear'></div>

CSS:

.clear {
    clear:both;
}

Upvotes: 1

Related Questions