Home/ Questions/Q 7643309
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T09:24:58+00:00

what i have is 3 divs, 1 for left 1 for center and 1

  • 0

what i have is 3 divs, 1 for left 1 for center and 1 for right
what i need is 3 columns – the left is always there, the center as well but it’s width should be adaptive if the right is there or not

<html>
<head>
</head>
<body>
    <div style="width:460px; padding:0px 20px;">
        <div style="float:left; background: red; width:100px;">
            red
        </div>
        <div style="float:left; background: yellow;  max-width:400px">
            yellow
        </div>
        <div style="float:left; background: green; width:100px;">
            green
        </div>
    </div>
</body>
</html>

what am i’m doing wrong?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The best I could come up with, in order to avoid JavaScript solutions and to use CSS and HTML only, is to use class-names for the columns, and to re-order your HTML in order that the right-most column is first in the html:

    <div class="wrap" style="width:500px">
    <div class="col right">Right Column</div>
    <div class="col left">Left column</div>
    <div class="col middle">Middle column</div>
</div>
<div class="wrap" style="width:500px">
    <div class="col left">Left column 2</div>
    <div class="col middle">Middle column 2</div>
</div>​

    With the CSS adjacent-sibling selector, firstSibling + secondSibling, this can be used to amend the width of the middle column:

    .wrap {
    width: 500px;
    margin: 1em auto;
    overflow: hidden;
}

.left,
.right {
    width: 100px;
    background-color: #ffa;
}

.middle {
    width: 400px;
    background-color: #f90;
}

.left,
.middle {
    float: left;
}

.right {
    float: right;
}

div.right + div.left + div.middle {
    width: 300px;
}

    JS Fiddle demo.

    If you float the .middle column right, instead of left as in the previous example, then you can simplify the adjacent-sibling selector, and the HTML is, effectively, visually reversed (which is slightly easier to understand/work with than the above example wherein the two columns come first, in reverse order, and then the middle column comes at the end), giving:

    <div class="wrap" style="width:500px">
    <div class="col right">Right Column</div>
    <div class="col middle">Middle column</div>
    <div class="col left">Left column</div>
</div>
<div class="wrap" style="width:500px">
    <div class="col left">Left column 2</div>
    <div class="col middle">Middle column 2</div>
</div>​

    And the CSS:

    .wrap {
    width: 500px;
    margin: 1em auto;
    overflow: hidden;
}

.left,
.right {
    width: 100px;
    background-color: #ffa;
}

.middle {
    width: 400px;
    background-color: #f90;
}

.left {
    float: left;
}

.right,
.middle {
    float: right;
}

div.right + div.middle {
    width: 300px;
}

    JS Fiddle demo.

    References:

    • 0