CSS Layout 2-Column Fixed-Fluid

CSS Layout 2-Column fixed-fluid

Try this Dynamic Drive layout and its relatives (that I was pointed to via a similar question of mine).

2 column div layout: right column with fixed width, left fluid

Remove the float on the left column.

At the HTML code, the right column needs to come before the left one.

If the right has a float (and a width), and if the left column doesn't have a width and no float, it will be flexible :)

Also apply an overflow: hidden and some height (can be auto) to the outer div, so that it surrounds both inner divs.

Finally, at the left column, add a width: auto and overflow: hidden, this makes the left column independent from the right one (for example, if you resized the browser window, and the right column touched the left one, without these properties, the left column would run arround the right one, with this properties it remains in its space).

Example HTML:

<div class="container">
<div class="right">
right content fixed width
</div>
<div class="left">
left content flexible width
</div>
</div>

CSS:

.container {
height: auto;
overflow: hidden;
}

.right {
width: 180px;
float: right;
background: #aafed6;
}

.left {
float: none; /* not needed, just for clarification */
background: #e8f6fe;
/* the next props are meant to keep this block independent from the other floated one */
width: auto;
overflow: hidden;
}​​

Example here: http://jsfiddle.net/jackJoe/fxWg7/

two column fixed-fluid-fixed css layout

Try setting the main content to appear fully left but give it a margin-left to make room for the sidebar.

.main-content {
position: absolute;
top: 0;
left: 0px;
margin-left: 220px;
background: #f0f0f0;
width: 100%;
}

Edit:
I've had a bit of time now to try out the code. I suggested margin-left instead of padding-left because it fits better with what you want to do. Using margin gives you the option of putting a border around your content. Also, if you actually do want padding in the content you can set it as normal. if you used a padding to indent for the sidebar you'd have to add the 220px to whatever actual padding you wanted.

This is what I came up with to get it working with margins instead of padding.

body {
margin: 0;
padding: 0;
border: 0;
}

.left-sidebar {
position: absolute;
top: 0;
left: 0;
width: 220px;
border: 1px solid green;
}

.main-content
{
position: fixed;
top: 0;
left: 0px;
right: 0px;
margin-left: 220px;
background: #f0f0f0;
border: 1px solid red;
}

I also agree with the anser referencing dynamic drive. One of the best ways to learn CSS initially is to have a go with a working stylesheet and customise it for your needs. The big advantage is it will already be cross browser compatible. Just use Google to find a bit of inspiration.

2 column layout (Left column fixed width, right fluid + clear:both)

Here's your altered CSS:

html, body {
background: #ccc;
}

.wrap {
margin: 20px;
padding: 20px;
padding-right:240px;
background: #fff;
overflow:hidden;
}

.main {
margin: 0 -220px 0 auto;
width: 100%;
float:right;
}

.sidebar {
width: 200px;
float: left;
height: 200px;
}

.main, .sidebar {
background: #eee; min-height: 100px;
}

.clear { clear:both; }
span { background: yellow }

Basically what I've done is change the way your layout is done, so that .main div is floated on the right. To do this, we had to add 2 things:

  1. A padding of 240px on the .wrap div, and
  2. A right margin on the .main div of -220px to properly align the fluid part of the page.

Because we've floated the .main div on the right, the clear: both; now only affects content inside the .main div, as you want.

You can see a demonstration here: http://jsfiddle.net/6d2qF/1/

How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap?

- Another Update -

Since Twitter Bootstrap version 2.0 - which saw the removal of the .container-fluid class - it has not been possible to implement a two column fixed-fluid layout using just the bootstrap classes - however I have updated my answer to include some small CSS changes that can be made in your own CSS code that will make this possible

It is possible to implement a fixed-fluid structure using the CSS found below and slightly modified HTML code taken from the Twitter Bootstrap Scaffolding : layouts documentation page:

HTML

<div class="container-fluid fill">
<div class="row-fluid">
<div class="fixed"> <!-- we want this div to be fixed width -->
...
</div>
<div class="hero-unit filler"> <!-- we have removed spanX class -->
...
</div>
</div>
</div>

CSS


/* CSS for fixed-fluid layout */

.fixed {
width: 150px; /* the fixed width required */
float: left;
}

.fixed + div {
margin-left: 150px; /* must match the fixed width in the .fixed class */
overflow: hidden;
}

/* CSS to ensure sidebar and content are same height (optional) */

html, body {
height: 100%;
}

.fill {
min-height: 100%;
position: relative;
}

.filler:after{
background-color:inherit;
bottom: 0;
content: "";
height: auto;
min-height: 100%;
left: 0;
margin:inherit;
right: 0;
position: absolute;
top: 0;
width: inherit;
z-index: -1;
}

I have kept the answer below - even though the edit to support 2.0 made it a fluid-fluid solution - as it explains the concepts behind making the sidebar and content the same height (a significant part of the askers question as identified in the comments)



Important

Answer below is fluid-fluid

Update
As pointed out by @JasonCapriotti in the comments, the original answer to this question (created for v1.0) did not work in Bootstrap 2.0. For this reason, I have updated the answer to support Bootstrap 2.0

To ensure that the main content fills at least 100% of the screen height, we need to set the height of the html and body to 100% and create a new css class called .fill which has a minimum-height of 100%:

html, body {
height: 100%;
}

.fill {
min-height: 100%;
}

We can then add the .fill class to any element that we need to take up 100% of the sceen height. In this case we add it to the first div:

<div class="container-fluid fill">
...
</div>

To ensure that the Sidebar and the Content columns have the same height is very difficult and unnecessary. Instead we can use the ::after pseudo selector to add a filler element that will give the illusion that the two columns have the same height:

.filler::after {
background-color: inherit;
bottom: 0;
content: "";
right: 0;
position: absolute;
top: 0;
width: inherit;
z-index: -1;
}

To make sure that the .filler element is positioned relatively to the .fill element we need to add position: relative to .fill:

.fill { 
min-height: 100%;
position: relative;
}

And finally add the .filler style to the HTML:

HTML

<div class="container-fluid fill">
<div class="row-fluid">
<div class="span3">
...
</div>
<div class="span9 hero-unit filler">
...
</div>
</div>
</div>

Notes

  • If you need the element on the left of the page to be the filler then you need to change right: 0 to left: 0.

Two columns layout with 100% height. One fixed column and one fluid column

Demo:
http://codepen.io/awesomeaniruddh/pen/bdJBZy

Add the following piece of code:

html {
height: 100%:
}

Before the html, body {..} part.

CSS: Make two column layout with left column fluid (fill all remaining space) and right column fixed (200px)

This could be easily done with the css calc function. However, it depends on what browsers you want to support. check out this link so see what it is compatible with.

Essentially, just do this:

#entry_window{
border: 2px solid #D4D4D4;
float: left;
width: calc(100% - 208px);
height: 100%;
overflow: scroll;
overflow-x: hidden;
background-color:red;
}
#online_window{
border: 2px solid #D4D4D4;
margin-left: 0%;
display: inline-block;
float: left;
background-color: white;
width: 200px;
height: 100%;
}

note: you need to -208 to take the border into account. Also, check out the jsfiddle

How can I have two fixed width columns with one flexible column in the center?

Instead of using width (which is a suggestion when using flexbox), you could use flex: 0 0 230px; which means:

  • 0 = don't grow (shorthand for flex-grow)
  • 0 = don't shrink (shorthand for flex-shrink)
  • 230px = start at 230px (shorthand for flex-basis)

which means: always be 230px.

See fiddle, thanks @TylerH

Oh, and you don't need the justify-content and align-items here.

img {
max-width: 100%;
}
#container {
display: flex;
x-justify-content: space-around;
x-align-items: stretch;
max-width: 1200px;
}
.column.left {
width: 230px;
flex: 0 0 230px;
}
.column.right {
width: 230px;
flex: 0 0 230px;
border-left: 1px solid #eee;
}
.column.center {
border-left: 1px solid #eee;
}

Two column layout, fixed right column

Not a very elegant solution, but its working. They key is to wrap the contents of the left column and add a margin-right equal to the width of the right column / sidebar. On the right column, set the width and a negative margin-left equal to its width.

.left {
float:left;
width:100%;
background-color: green;
}
.left-content {
margin-right:120px;
}
.right {
float:right;
width: 120px;
margin-left: -120px;
background-color: red;
}

Here's a working fiddle
http://jsfiddle.net/heyapo/9Z363/

Simple two column layout with fixed sidebar and fluid content

Here is what I think you want:

HTML

<div id="sidebar">
Some content
</div>
<div id="content">
Main content
</div>

CSS

#sidebar {
width:20%;
height:500px;
border:1px solid #000;
position:fixed;
}
#content {
margin-left:22%;
border:1px solid #000;
height:1500px;
}

And here is a FIDDLE



Related Topics



Leave a reply



Submit