Skip to content Skip to sidebar Skip to footer
Home / Css / Fixed / Fluid Layout / Html / Layout

Fixed - Liquid - Fixed Layout

Post a Comment
I'd like to have a [Fixed][Liquid][Fixed] cross-browser compatible layout. HTML: body div#col-1 div#col-2 div#col-3 CSS: #col-1 { width:150px; float:left; }

Solution 1:

This is pretty simple.

here is the code

<html><head><styletype="text/css">#left {
  float: left;
  width: 150px;
  border: 1px solid black;
  background-color: #999;
  height: 50px;
}
#right {
  float: right;
  width: 150px;
  border: 1px solid black;
  background-color: #999;
  height: 50px;
}
#center {
  /* margin with 10px margin between the blocks*/margin: 0160px;
  border: 1px solid black;
  height: 50px;
}
</style></head><body><divid="left">Text</div><divid="right">Text</div><divid="center">Text</div></body></html>

I'm using floats instead of position absolute. The advantage of using floats above absolute positioning is that you can put a nother div beneath it, lets say the footer. And just give it a clear: both and it will automatically display at the bottom of the page.

here is an example with a footer

<html><head><styletype="text/css">#left {
  float: left;
  width: 150px;
  border: 1px solid black;
  background-color: #999;
  height: 50px;
}
#right {
  float: right;
  width: 150px;
  border: 1px solid black;
  background-color: #999;
  height: 50px;
}
#center {
  /* margin with 10px margin between the blocks*/margin: 0160px;
  border: 1px solid black;
  height: 50px;
}
#footer {
  clear: both;
  margin-top: 10px;
  border: 1px solid black;
}
</style></head><body><divid="left">Text</div><divid="right">Text</div><divid="center">Text</div><divid="footer">footer</div></body></html>

Voila! You've got your liquid layout.

Solution 2:

check this out: http://siteroller.net/articles/3-column-no-tables-no-floats

But no,I don't think that would work. There are plenty of links in said article though to address your issue.

And if there is any interest, I will extend what is written there.

Solution 3:

Okay, got it: http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/

Solution 4:

I like Robert's answer. I would also add a wrapper around the left, right, center and footer. Here, I set the id to "page":

<body><divid="page"><divid="left">Text</div><divid="right">Text</div><divid="center">Text</div><divid="footer">footer</div></div></body>

Then, you can also add the style for the "page":

#page {   
    min-width: 600px;   
    }

This way, if the user shrinks their browser down to a very small size, the content still looks good.

Post a Comment for "Fixed - Liquid - Fixed Layout"