CODEWITHSUNDEEP
htmlcss
vincent
vincent

Reputation: 1313

Filling a screen with 3 divs

I have the following situation:

<div id="container">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

div1 and div3 have a fixed width of 100px and a height of 100%, div3 also has a height of 100%. What i want is for div1 to float left, div3 to float right and div2 should take the remaining space between them. I cant seem to get it to work.

Any help?

Upvotes: 1

Views: 1097

Answers (2)

sandeep
sandeep

Reputation: 92793

Write like this:

CSS:

#div1{
    float:left;
    background:red;
    width:100px;
}
#div3{
    float:right;
    background:green;
    width:100px;
}
#div2{
    overflow:hidden;
    background:blue;
}

HTML

<div id="div1">1</div>
<div id="div3">3</div>
<div id="div2">2</div>

Check this http://jsfiddle.net/D8836/

UPDATED

If you want equal height then you can use display:table property for this. Check this

http://jsfiddle.net/D8836/11/

Upvotes: 6

mikevoermans
mikevoermans

Reputation: 4007

This one doesn't require you changing the order of your divs, but does require CSS3 (flex box). http://jsfiddle.net/pPEmZ/

Upvotes: 2

Related Questions