CODEWITHSUNDEEP
htmlcss
user1295643
user1295643

Reputation:

Align 3 divs. 2 of them width fixed width and the third auto

I want to align 3 divs. Two of them have fixed width and the right one with auto width to fill of the empty space at the right.

Any hint?

Here's my exemple:

<div id="container" style="width:100%; background-color:Red;">
    <div id="left" style="width:100px; height:400px; background-color: yellow; float:left; display:inline-block">
    </div>        

    <div id="center" style="width:600px; height:400px; background-color: blue; float:none; display:inline-block">
    </div>    

    <div class="right" style=" height:400px; width:auto;background-color: green; float:right; display:inline-block">
    </div>    
</div>

Upvotes: 0

Views: 940

Answers (3)

user3022265
user3022265

Reputation: 1

This only work if you want the third div with fix position, but if you want the second div with fluid with you need to make this.

HTML

<div class="left"></div>
<div class="center"></div>
<div class="right"></div>

CSS

.left, .right {
float:left;
width: 100px;
}
.right {
float: right;
}
.center {
position: absolute;
left: 100px;
right: 100px;
}

Upvotes: 0

jumancy
jumancy

Reputation: 1340

CSS

#div-1, #div-2 {width:100px;float:left}
#div-3 {margin-left:200px}

HTML

<div id="div-1"></div>
<div id="div-2"></div>
<div id="div-3"></div>

Upvotes: 1

sandeep
sandeep

Reputation: 92793

You can write like this:

CSS:

.fixed{
    height:40px;
    width:40px;
    float:left;
    background:green;
}

.fuild{
    overflow:hidden;
    height:40px;
    background:red;
}
div{
    border:1px solid yellow;
}

HTML

<div class="fixed">1</div>
<div class="fixed">2</div>
<div class="fuild">3</div>

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

Upvotes: 2

Related Questions