<div class="container" style="width: 100%;">
<div class="sidebar" style="width: 200px; float: left;">
Sidebar
</div>
<div class="content" style="margin-left: 202px;">
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.
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 style="display: inline-block">
Content in column A
</div>
<div style="display: inline-block">
Content in column B
</div>
You might or might not need to specify the width of the DIVs
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 id="main-wrapper">
<div id="fixed-width"> lorem ipsum </div>
<div id="rest-of-space"> 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.
You can use CSS grid to achieve this, this is the long-hand version for the purposes of illustration:
div.container {_x000D_
display: grid;_x000D_
grid-template-columns: 220px 20px auto;_x000D_
grid-template-rows: auto;_x000D_
}_x000D_
_x000D_
div.left {_x000D_
grid-column-start: 1;_x000D_
grid-column-end: 2;_x000D_
grid-row-start: row1-start_x000D_
grid-row-end: 3;_x000D_
background-color: Aqua;_x000D_
}_x000D_
_x000D_
div.right {_x000D_
grid-column-start: 3;_x000D_
grid-column-end: 4;_x000D_
grid-row-start: 1;_x000D_
grid-row-end; 1;_x000D_
background-color: Silver;_x000D_
}_x000D_
_x000D_
div.below {_x000D_
grid-column-start: 1;_x000D_
grid-column-end: 4;_x000D_
grid-row-start: 2;_x000D_
grid-row-end; 2;_x000D_
}
_x000D_
<div class="container">_x000D_
<div class="left">Left</div>_x000D_
<div class="right">Right</div>_x000D_
<div class="below">Below</div>_x000D_
</div>
_x000D_
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 {_x000D_
width: 200px;_x000D_
float: left;_x000D_
background-color: Aqua;_x000D_
}_x000D_
_x000D_
div.right {_x000D_
margin-left: 220px;_x000D_
background-color: Silver;_x000D_
}_x000D_
_x000D_
div.clear {_x000D_
clear: both;_x000D_
}
_x000D_
<div class="left"> Left </div>_x000D_
<div class="right"> Right </div>_x000D_
<div class="clear">Below</div>
_x000D_
<div style="width: 200px; float: left; background-color: Aqua;"> Left </div>
<div style="margin-left: 220px; background-color: Silver;"> Right </div>
<div style="clear: both;">Below</div>
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 class="container">
<div class="fixed"></div>
<div class="flex-item"></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;
}
_x000D_
<div class="container">
<div class="fixed">Fixed width</div>
<div class="flex-item">Dynamically sized content</div>
</div>
_x000D_
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.
Source: Stackoverflow.com