markt markt - 1 year ago 53
CSS Question

How to place div side by side

I have a main wrapper div that is set 100% width. Inside that i would like to have two divs, one that is fixed width and the other that fills the rest of the space. How do i float the second div to fill the rest of the space. Thanks for any help.

Answer Source

There are many ways to do what you're asking for:

  1. Using CSS float property:

    <div style="width: 100%; overflow: hidden;">
        <div style="width: 600px; float: left;"> Left </div>
        <div style="margin-left: 620px;"> Right </div>
  2. Using CSS display property - which can be used to make divs act like a table:

    <div style="width: 100%; display: table;">
        <div style="display: table-row">
            <div style="width: 600px; display: table-cell;"> Left </div>
            <div style="display: table-cell;"> Right </div>

There are more methods, but those two are the most popular.