CODEWITHSUNDEEP
htmlfloating
Bilal075
Bilal075

Reputation: 85

Float div side by side - Two column layout

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

Upvotes: 1

Views: 1572

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206058

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>

Upvotes: 1

Tabetha Moe
Tabetha Moe

Reputation: 480

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;
}

Upvotes: 1

Jan Jouke Tjalsma
Jan Jouke Tjalsma

Reputation: 610

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.

Upvotes: -1

Related Questions