CSS Child Div to fill 100% of parent with borders and margin

Question

I've spent all morning searching and trying solutions to this problem with no success so I thought that I'd make my own post to understand whay I can't get my 3 child DIVs to have an equal unspecified height based on their parent.

I need there to be 3 columns, 100% height of their parent, a border around each child div and a margin between each of them.

Here is where I am with the code so far:

HTML

<div class="outer">
    <div class="col1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida dictum odio accumsan aliquam.</div>
    <div class="col2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida dictum odio accumsan aliquam. Curabitur tortor tortor, sodales vitae adipiscing vitae, tristique in sapien. Aenean interdum hendrerit quam, at semper risus pharetra ut. Morbi metus ipsum, sagittis ac rutrum faucibus, suscipit ut mauris. Nam eu felis felis. Nam et mi sit amet nisl euismod pharetra vitae id orci.</div>
    <div class="col3">Etiam ornare nibh non odio porta congue.</div>
</div>

CSS

.outer {
position:relative; 
height:auto; 
width:900px; 
}

.col1{
float: left;
    position:relative; 
min-height:100%; 
width:200px; 
margin-right: 10px;
border: 1px solid black;
}

.col2{
float: left;
    position:relative; 
min-height:100%; 
width:200px; 
margin-right: 10px;
border: 1px solid black;
}

.col3{
float: left;
    position:relative; 
min-height:100%; 
width:200px; 
border: 1px solid black;
}

I'm using firefox at the moment. I should have said also that I have tried the 3 columns layout and using the margin hack too — Barlow1984, Jul 03 '12 at 14:17

score 2 · Answer 1 · edited May 23 '17 at 11:48

2

Change your outer div height form auto to something like 400px and it will work.

here is the fiddle for you..

http://jsfiddle.net/vbEXB/3/

relevant discussion here..

Set div height to 100% of parent

EDIT:

and

answer to the question below gives you pure css solution which does not involve fixed height ( so it covers 99% cases :) )

How to Force Child Div to 100% of Parent's Div Without Specifying Parent's Height?

edited May 23 '17 at 11:48

Community

1
1

answered Jul 03 '12 at 14:20

N30

3,463
4
34
43

In 99% of the cases, you can't set the height of the parent due to dynamic content. – Christoph Jul 03 '12 at 14:21
@Christoph added relevant SO question which covers 99% cases. – N30 Jul 03 '12 at 14:52
I've tried this solution however I want margins and borders and cant seem to make it work properly for my scenario – Barlow1984 Jul 03 '12 at 14:58

score 1 · Accepted Answer · answered Jul 03 '12 at 14:18

1

I could never figure out how to do this without jQuery/JavaScript. From what I believe, this isn't possible with strict CSS and HTML. You may have to use jQuery. Check out the link provided. This should point you in the right direction.

http://www.jainaewen.com/files/javascript/jquery/equal-height-columns.html

Hope this helps!

answered Jul 03 '12 at 14:18

Aaron Brewer

3,567
18
48
78

fixing css issue with javascript/jquery is probably not a good idea. – N30 Jul 03 '12 at 14:20
@N30: How would you "fix" this issue than N30? Strictly through CSS? – Aaron Brewer Jul 03 '12 at 14:21
@Barlow1984 @Aaron Brewer I believe there is a way for `height`, but it must be an inherited property from its parent. See the other answers here discussing something like that. – paddotk Jul 03 '12 at 14:27
@poepje: Yes, I definitely agree with you on that, but I am assuming that Barlow want's something more dynamic (in-a-sense) than static. – Aaron Brewer Jul 03 '12 at 14:31
In that case javascript would indeed do – paddotk Jul 03 '12 at 14:32
Yeah it's for a template in our CMS so it needs to be a dynamic inherited property so that the parent is the height of the longest child. – Barlow1984 Jul 03 '12 at 14:41
@Barlow1984: Than I believe that my answer would suit you best. Trust me, I had to do the same for a client that emphasizes a CMS, and I had to make sure that the column height's would by dynamic over static. – Aaron Brewer Jul 03 '12 at 14:43
@aaron Brewer - Damn, I was hoping for a HTML/CSS fix. I'll give it a go though if there is no alternative. Thanks for your help – Barlow1984 Jul 03 '12 at 14:50
@Barlow1984: You are very welcome, and I was hoping for the same. Remember to mark the correct answer once found. Welcome to to the Stack Overflow Community. – Aaron Brewer Jul 03 '12 at 14:53

Christoph · Answer 3 · 2012-07-03T14:35:32.897

Without a specified height on the parent this is a very tough job. For including borders and margins you can use

box-sizing:border-box;

Depending on your usecase, try table-layout as display-property on your divs. If you know the height of the parent, set a height. Or try a layout with absolute positioning and specify all sides (e.g. position:absolute;left:0;top:0;bottom:0;right:33%; for the left column). You DON'T need javascript per se for this but it depends on what you want to achieve.

There have been a lot of questions asked on SO about equal column-layouts. Im sure you will find an answer by searching.

If you feel fancy you might want to use flex-box with horrible IE-support but it achieves exactly what you want without fuzz. See for more info:

CSS Child Div to fill 100% of parent with borders and margin

3 Answers3