CODEWITHSUNDEEP
css
Barlow1984
Barlow1984

Reputation: 205

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

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;
}

Upvotes: 0

Views: 5462

Answers (3)

N30
N30

Reputation: 3663

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?

Upvotes: 2

Christoph
Christoph

Reputation: 51241

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:

Upvotes: 0

Aaron Brewer
Aaron Brewer

Reputation: 3667

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!

Upvotes: 1

Related Questions