Float div side by side - Two column layout

Question

Is there a possibility for the div (#contentwrapper) to take all the remaining width while floating side by side for the next example:

 #maincontainer { width:1000px; height: 100%; display:inline-block; } #leftcolumn { float:left; width: 100px; height:20px; background: blue; } #contentwrapper { float:right; width:900px; height: 20px; background-color: red; } 

 <div id="maincontainer"> <div id="leftcolumn"></div> <div id="contentwrapper"></div> </div> 

JsFiddle

Answer 1

Try using flexbox. It is better than using tables. Make sure to include the vendor prefixes in it.

https://jsfiddle.net/qa6cds9c/

<div id="maincontainer">
    <div id="leftcolumn"></div>
    <div id="contentwrapper"></div>
</div>

#maincontainer {
    border: 1px solid red;
    display: flex;
}

#leftcolumn {
    border: 1px solid blue;
    height: 400px;
    width: 100px;
}

#contentwrapper {
    border: 1px solid green;   
    height: 400px;
    flex: 1;
}

Answer 2

It's really simple. Using good ol' CSS:

• float-left only the left element
• add margin-left to the right column to compensate the left's one width:

 #leftcolumn { float:left; width: 100px; background: blue; } #contentwrapper { margin-left: 100px; /* same as #leftcolumn width */ background: red; } 

 <div id="maincontainer"> <div id="leftcolumn">left</div> <div id="contentwrapper">right<br>contentwrapper</div> </div> 

Answer 3

You could use a table instead of The divs. Or make the divs behave as a table using CSS.

When you have two table cells in a row and set the width for one then the other will fill the remaining space.

Not sure if this is considered best practice though.