Fixed widths inside fluid layout

StackOverflow https://stackoverflow.com/questions/1781638

  •  21-09-2019
  •  | 
  •  

Question

I need CSS definitions for the following layout:

<div id="middle-wrapper">
  <div id="column1-wrapper">
    This has to be 100% - 250px wide
  </div>
  <div id="column2-wrapper">
    This has to be 250px wide
  </div>
  <!-- no other markup in middle-wrapper except maybe a clearing div -->
</div>
  • middle-wrapper needs to be 100% wide
  • column2-wrapper needs to be 250px wide
  • column1-wrapper should take all available space

In summary, column1-wrapper should be 100% - 250px wide and I need both of the columns to look like columns.

I've tried adding float: left to BOTH columns. However this means column1-wrapper looses its width. On pages that do not contain enough content in the left column, the right column aligns itself with the left column and ends up somewhere in the middle of the page:

----------------------------------------------------------------
| LEFT NO WIDTH COLUMN|| RIGHT 250 PX|
----------------------------------------------------------------

I've tried adding float: left to LEFT column and float: right to RIGHT column. That aligns the right column with the right edge but the left column does not stretch appropriately:

----------------------------------------------------------------
| LEFT NO WIDTH COLUMN|                          | RIGHT 250 PX|
----------------------------------------------------------------
Was it helpful?

Solution

Two columns with color.

OTHER TIPS

Try giving float:right to the right column and nothing at all to the left one. Don't float it, don't specify a size, just put the content you want inside it and that's it.

Oh sorry I forgot: you must put column2 inside column1

Yeah, this works:

<html>
<head>

<style>
    div#column1-wrapper {
        width: 100%;
    }

    div#column1-wrapper {
    }

    div#column2-wrapper {
        float: right;
        width: 250px;
    }
</style>
</head>
<body>
    <div id="middle-wrapper">
    <div id="column1-wrapper">
        <div id="column2-wrapper">  <!-- Must be first -->
            This has to be 250px wide
        </div>
        This has to be 100% - 250px wide
    </div>
</div>
</body>
</html>

Not sure if it's what you're after.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top