CODEWITHSUNDEEP
csshtml
Serge P
Serge P

Reputation: 1611

CSS: make div height fit parent div

I'm trying to make a floating div have a height that fills in the parent div.

http://jsfiddle.net/sergep/2qPZ2/1/

The structure is as follows:

Parent div______________________
|    Middle child
|    Left child - float:left
|    Right child - float:right

The problem is that the left child has less text than the right, meaning the right increases the height of the parent div (to fit the div), but the left floating div does not follow suit.

The css looks like so:

.bottomcontainer {
  bottom: 0;
  position: absolute;
  width: 100%;
  height: auto;
}

.bottomleft {
  background: #346CA5;
  float:left;
  width: 50%;
}


.middle {
  background: #FFCE3C;
}

.bottomright {
  background: #65B237;
  float:right;
  width: 50%;
}

How can I make the blue .bottomleft class stick to the bottom of the .bottomcontainer? - I'm trying to make responsive, so I don't want to use actual pixel sizes!

Consequently, how do I make the text inside vertically align middle?

Upvotes: 0

Views: 7790

Answers (2)

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

I misunderstood the question. You can fix that by adding an extra div around .bottomleft and .bottomright and display it as table / tablecells:

HTML:

<div id="nav"></div>
<div id="container">
    <div class="bottomcontainer">
        <div class="middle">
            <h2>Intro tag line here</h2>
        </div>
        <div class="bottom">
            <div class="bottomleft">
                <h2>Tag line here</h2>
            </div>
            <div class="bottomright">
                <h2>Longer tag line goes here</h2>
            </div>
        </div>
    </div>
</div>
<div name="content" id="content"></div>

CSS:

.bottom {
    display: table;
}
.bottomleft {
    display: table-cell;
    background: #346CA5;
    opacity: 1.0;
    width: 50%;
    vertical-align: middle;
}
.bottomright {
    display: table-cell;
    background: #65B237;
    opacity: 1.0;
    width: 50%;
}

And updated Fiddle 2

Delete the float, and add an absolute positioning:

.bottomleft {
    background: #346CA5;
    opacity: 1.0;
    position: absolute;
    bottom: 0;
    width: 50%;
    vertical-align: middle;
}

Also check the updated Fiddle.

Upvotes: 1

SW4
SW4

Reputation: 71150

Use display:table-cell; on the child divs, see here for an example that can be extrapolated

Upvotes: 2

Related Questions