如何并排放置div

Question

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 1

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>

2. Using CSS display property - which can be used to make div s 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.

Answer 2

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

 <div class="container"> <div class="fixed">Fixed width</div> <div class="flex-item">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 .

Answer 3

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

Answer 4

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 class="container"> <div class="left">Left</div> <div class="right">Right</div> <div class="below">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 class="left"> Left </div> <div class="right"> Right </div> <div class="clear">Below</div>

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

Answer 5

<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.

Answer 6

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.

Answer 7

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.