Floated div 100% height of dynamic parent without absolute position?

Question

I've done alot of reading on here, and cannot find a solution to my answer.

I have a container div, with multiple floated left divs, as per the html below.

<div class="catbg0" id="b1">

    <div class="catb1">#</div>
    <div class="catb2">Board Name</div>
    <div class="catb3">Topics</div>
    <div class="catb4">Posts</div>
    <div class="catb5">Last Post</div>
    <div class="clearboth"></div>

</div>

My problem is that .catbg0 does not have a specific height, the content of .catb2 pushes it down to its height, and as the content can vary I cant set a specific height. I want the rest of the .catb classes to go to 100% height of the .catbg0 class, but setting height: 100%; does not work.

Below is the CSS that relates to the above.

.catb1 {float: left; width: 9%; height: 100%; min-height: 100%;}
.catb2 {float: left; width: 52%; height: 100%; min-height: 100%;}
.catb3 {float: left; width: 8%; height: 100%; min-height: 100%;}
.catb4 {float: left; width: 8%; height: 100%; min-height: 100%;}
.catb5 {float: left; width: 23%; height: 100%; min-height: 100%;}
.clearboth {clear: both; height:0; width: 0; margin: 0; padding: 0;}

Any ideas? Thanks.

Welcome to SO! This would be easier to answer if you included the relevant CSS as well. — Jude Fisher, Oct 16 '12 at 17:29

Man Hitta · Accepted Answer · 2012-10-16T20:25:46.917

2

As I know only block with position:absolute may be 100% height and its children too.

If you sure that .catb2 has the biggest height of .catb* try to add wrapper:

<div class="catbg0" id="b1">

    <div class="catb2">Board Name</div>

    <div class="wrapper">
        <div class="catb1">#</div>
        <!-- margin == catb2 width -->
        <div class="catb3">Topics</div>
        <div class="catb4">Posts</div>
        <div class="catb5">Last Post</div>
    </div>

    <div class="clearboth"></div>

</div>

CSS

.catbg0 { position: relative; }
.wrapper { position: absolute; width: 100%; height: 100%; }
.catb2 { margin-left: /* catb1 width here */  }

P.S. Maybe it'll be usefull for you - A new micro clearfix hack

edited Oct 16 '12 at 20:25

answered Oct 16 '12 at 20:01

Man Hitta

36
2

That seems to work fine, except for the fact the .catb2 div is now hidden behind the rest of the floated divs? If I add .catb1 {margin-right: 52% (width of .catbg2)} it works fine however? Is this because I've not change the part correctly? – sangwe11 Oct 16 '12 at 22:34
Yes, you can add .catb1 {margin-right: 52%;} or .catb3 { margin-left: 52% }. it doesn't matter – Man Hitta Oct 17 '12 at 09:38
here's a jsfiddle example for this: https://jsfiddle.net/f14p9kzL/ I also didn't want to use position absolute but nothing I tried work and this really is the best solution – Francisc0 Jan 04 '18 at 17:14

score 0 · Answer 2 · answered Oct 16 '12 at 17:41

0

I'm not quite sure. But giving the container(catbg0) a overflow: hidden; may work. Usually what this does is stretch the div which it is applied to(When a specific height isn't set).

Note: it's still an overflow, long words etc. and divs will just keep going since the overflow masks the div.

answered Oct 16 '12 at 17:41

CaptainCarl

3,411
6
38
71

Added the relevant CSS. Also, the problem I'm trying to fix isnt stretching down the container div, the clearboth element does that, its stretching the .catb1, .catb3, .catb4, .catb5, to whatever height .catb2 stretches .catb0 too. – sangwe11 Oct 16 '12 at 17:48

Floated div 100% height of dynamic parent without absolute position?

2 Answers2

Linked