htmlcsslayout

How do I place two divs 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 has a fixed width, and the other fills the rest of the space.

How do I float the second div to fill the rest of the space?

Solution

  • 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>
</div>

    1. 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>
    </div>
</div>

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