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.

7 Answers

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

1. Using CSS float property:

 <div> <div> Left </div> <div> Right </div> </div>

2. Using CSS display property - which can be used to make divs act like a table:

<div> <div> <div> Left </div> <div> Right </div> </div> </div>

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

CSS3 introduced flexible boxes (aka. flex box) which can also achieve this behavior.

Simply define the width of the first div, and then give the second a flex-grow value of 1 which will allow it to fill the remaining width of the parent.

.container{ display: flex; } .fixed{ width: 200px; } .flex-item{ flex-grow: 1; } 

<div> <div></div> <div></div> </div> 

Demo:

div { color: #fff; font-family: Tahoma, Verdana, Segoe, sans-serif; padding: 10px; } .container { background-color:#2E4272; display:flex; } .fixed { background-color:#4F628E; width: 200px; } .flex-item { background-color:#7887AB; flex-grow: 1; }

<div> <div>Fixed width</div> <div>Dynamically sized content</div> </div>

Note that flex boxes are not backwards compatible with old browsers, but is a great option for targeting modern browsers (see also Caniuse and MDN). A great comprehensive guide on how to use flex boxes is available on CSS Tricks.

I don't know much about HTML and CSS design strategies, but if you're looking for something simple and that will fit the screen automatically (as I am) I believe the most straight forward solution is to make the divs behave as words in a paragraph. Try specifying display: inline-block

<div> Content in column A </div> <div> Content in column B </div> 

You might or might not need to specify the width of the DIVs

You can use CSS grid to achieve this, this is the long-hand version for the purposes of illustration:

div.container { display: grid; grid-template-columns: 220px 20px auto; grid-template-rows: auto; } div.left { grid-column-start: 1; grid-column-end: 2; grid-row-start: row1-start grid-row-end: 3; background-color: Aqua; } div.right { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end; 1; background-color: Silver; } div.below { grid-column-start: 1; grid-column-end: 4; grid-row-start: 2; grid-row-end; 2; }

<div> <div>Left</div> <div>Right</div> <div>Below</div> </div>

Or the more traditional method using float and margin.

I have included a background colour in this example to help show where things are - and also what to do with content below the floated-area.

Don't put your styles inline in real life, extract them into a style sheet.

div.left { width: 200px; float: left; background-color: Aqua; } div.right { margin-left: 220px; background-color: Silver; } div.clear { clear: both; }

 <div> Left </div> <div> Right </div> <div>Below</div>

<div> Left </div> <div> Right </div> <div>Below</div> 

<div> <div> Sidebar </div> <div> content </div> </div> 

This will be cross browser compatible. Without the margin-left you will run into issues with content running all the way to the left if you content is longer than your sidebar.

If you're not tagetting IE6, then float the second <div> and give it a margin equal to (or maybe a little bigger than) the first <div>'s fixed width.

HTML:

<div> <div> lorem ipsum </div> <div> dolor sit amet </div> </div> 

CSS:

#main-wrapper { 100%; background:red; } #fixed-width { width:100px; float:left } #rest-of-space { margin-left:101px; /* May have to increase depending on borders and margin of the fixd width div*/ background:blue; } 

The margin accounts for the possibility that the 'rest-of-space' <div> may contain more content than the 'fixed-width' <div>.

Don't give the fixed width one a background; if you need to visibly see these as different 'columns' then use the Faux Columns trick.

Give the first div float: left; and a fixed width, and give the second div width: 100%; and float: left;. That should do the trick. If you want to place items below it you need a clear: both; on the item you want to place below it.