Align two divs side by side?

Question

How to align two div elements side by side while specifying the width of only the right div? I want the right div to be of fixed width and the left div to take the remaining space.

<div style="width:100%;"><div class="left">left div</div>
<div class="right">right div</div></div>
.left{
float:left;
background:green;
width:100%;
}
.right{    
background:red;
width:200px;
}

Thanks.

score 3 · Answer 1 · answered Nov 12 '14 at 17:45

3

float:right; your "right" div, and put it first:

<div style="height:100px; width:100px; background-color:red; float:right;"></div>
<div style="height:100px; background-color:blue;"></div>

answered Nov 12 '14 at 17:45

Madbreaks

19,094
7
58
72

score 2 · Answer 2 · answered Nov 12 '14 at 17:47

You can use negative margins to negate the width of the fixed with element, then float the fixed width element to the right.

.left{
    float: left;
    background: green;
    width: 100%;
    margin-right: -200px;
}
.right{    
    background: red;
    width: 200px;
    float: right;
}

<div style="width:100%;">
    <div class="left">left div</div>
    <div class="right">right div</div>
</div>

score 1 · Answer 3 · answered Nov 12 '14 at 17:45

1

You can use CSS calc to do this with pretty good browser support(http://caniuse.com/#feat=calc):

.left{
    float:left;
    background:green;
  
    width: calc(100% - 200px);
}
.right{    
    background:red;
    width:200px;
  
    float: right;
}

<div style="width:100%;"><div class="left">left div</div>
<div class="right">right div</div></div>

answered Nov 12 '14 at 17:45

Turnip

35,836
15
89
111

It's neat that you can do this, but unnecessary and will kill performance. – Madbreaks Nov 12 '14 at 17:47
The more options the better in my opinion. I do like your solution though +1. – Turnip Nov 12 '14 at 17:50

score 0 · Answer 4 · answered Nov 12 '14 at 17:44

To align to Divs next to eachother you give them both display: inline or display: inline-block or float: left but you cannot align anything next to a div with width: 100%. Because that basically means you want that Div to take up the entire row. so nothing can fix next to it. By changing the width to be something other than 100% and giving both divs float: left you will accomplish what you want like this http://jsfiddle.net/6707pn01/

Align two divs side by side?

4 Answers4