left...">
Geek asks and answers

HTML CSS: fixing and stretching the width of two columns

<div style="width: 800px; height: 600px">

    <div style="float:left; width: 100px">
        left fixed-width column
    </div>
    <div style="???">
        right stretching column (the width should be 700px in this case.)
    </div>

</div>

What is the standard way to create two column layouts where the left fixed size and the right one are stretched?

  • I would like both column styles to be independent. I found a couple of solutions here, but if I changed the width of the left column, I need to change the right style of the column (for example, margin) along with it.

  • I do not need to support older browsers. If this is standard, everything is in order.

+5
source share
2 answers

Apply overflow: hiddento the second div. This will introduce a new format unit . You can find more information in Can overflow: a hidden effect on the layout? .

jsFiddle Demo

+2
source

div ( , ) - , .

<div style="width:auto; min-width:500px; margin:30px; position:relative; top:0px;">

<div style="width:100px; height:100px; padding:15px; background-color:aqua;">
</div>

<div style="height:100px; padding:15px; position:absolute; top:0px; left:100px; right:0px;  background-color:blue;">
</div>

</div>

JSFiddle

0

More articles:


All Articles