CODEWITHSUNDEEP
htmlcss
Gaurav Shah
Gaurav Shah

Reputation: 5279

3 div , one fixed width

I am not sure if this is possible plainly in html css.

I have 3 divs in one line the 2nd div must occupy 200px width and the first & last div must occupy remaining width .

http://jsfiddle.net/Garav/gk9t3/

the remaining two divs are fixed at 100px in fiddle . is there a way to make them fill the remaining of the screen equally on both the sides , so that the 2nd div always remains at center ?

Note : the width of parent div is not fixed .

Upvotes: 1

Views: 2076

Answers (3)

iambriansreed
iambriansreed

Reputation: 22241

Proof: http://jsfiddle.net/5Br5A/

CSS

.image-placeholder{
    background: #0f0;
    width: 200px;
    height : 200px;
    clear:none;
    float: left;
}
.fill-remaining {
    height:200px;
    width:50%;
    clear:none;
}
.fill-remaining.left {
    background:#f00;
    float: left;
    margin-right:-100px;
}
.fill-remaining.left>div {
    padding-right: 100px;
}
.fill-remaining.right {
    background:#00f;
    float: right;
    margin-left:-100px;
}
.fill-remaining.right>div {
    padding-left: 100px;
}​

HTML

<div class="fill-remaining left">
</div>
<div class="fill-remaining right">
</div>
<div class="image-placeholder">
</div>

Upvotes: 3

Paul
Paul

Reputation: 9022

Just use margin: 0 auto; no need for margin divs: http://jsfiddle.net/gk9t3/3/

Upvotes: 1

gabitzish
gabitzish

Reputation: 9691

I've added the middle div inside another div, and centered it. See if this fits your requirements: http://jsfiddle.net/gk9t3/1/

Upvotes: 0

Related Questions