3 equalizing col layout +header +footer

[Paul O'B]

Hi,

Initially I thought that it would work but it seems theat fixe or absolute elements are removed from the flow and although the scrllbar appears at 800px the element keeps in going.

I think instead of a min-width script you may just have to set the left position of the element if < 0 etc.

I tried a few other things but the only one that was close was just setting the element a percetage width from the side but it just doesn't scale correctly with the rest of the page. I don't think this is a specific problem with my layout but a problem with centering absolute or fixed elements etc.

Paul

[BonRouge]

OK. I think I've got it sorted.
This seems to do the trick :

function fixMenu()
{
if (document.getElementById('side-bar'))
{
var html=document.documentElement;
var menu=document.getElementById('side-bar');
if (html.clientWidth<800)
{
menu.style.left=0;
menu.style.marginLeft=0;
}
else 
{
menu.style.left="50%";
menu.style.marginLeft="-410px";
}
}
}

window.onload=function () {fixMenu();}
window.onresize=function () {fixMenu();}

[Paul O'B]

I knew you could do it lol - I must start learning some js

[simon's]

Hi guys,
I've took a look at the code of 3 liquid colums layout simple. That's perfect but I use another code to do the same. I will posted it here just to comment it with you. Since I think that in this forum there are people more experianced than me with CSS I want find pros and cons of my own code.

#ContainerHeader {
	margin-bottom: 10px; 
	text-align:left;
}

#ContainerFooter {
	margin-bottom: 10px; 
}

#ContainerMaster {
	position:relative;
	width:100%; 
	text-align:left;
	margin: auto;
}

#ContainerLeft {
	position:absolute;
	top:0; 
	left:0;
	width:20%;
}

#ContainerCenter {
	margin:0 21% 0 21%;
}

#ContainerRight {
	position:absolute;
	top:0;
	right:0;
	width:20%;
}

[Paul O'B]

Hi Simon's,

Your code will produce 3 liquid columns ok

In certain situations absolutely placed side columns will give a more solid behaviour than floats and avoid the float dropping of ie. However the main drawback to this method is that because the columns are absolutely placed then there is no way to have a footer span all three columns.

If the design doesn't require this then the above method is fine and will work well. You can put a footer under the centre column as that is static but there will be no way to put a footer under all three columns unless you fix the height to set height (or script it) or keeptheside columns smaller than the center column.

This is the main drawback of your method and why floats are used for most other methods.

However, as mentioned above the absolute side columns do produce a more solid layout because you don't get the float drop effect (in IE of course) that can mess floated layouts up.

Hope that all makes sense.

Paul

[simon's]

Hi Simon's,

Your code will produce 3 liquid columns ok

In certain situations absolutely placed side columns will give a more solid behaviour than floats and avoid the float dropping of ie. However the main drawback to this method is that because the columns are absolutely placed then there is no way to have a footer span all three columns.

If the design doesn't require this then the above method is fine and will work well. You can put a footer under the centre column as that is static but there will be no way to put a footer under all three columns unless you fix the height to set height (or script it) or keeptheside columns smaller than the center column.

This is the main drawback of your method and why floats are used for most other methods.

However, as mentioned above the absolute side columns do produce a more solid layout because you don't get the float drop effect (in IE of course) that can mess floated layouts up.

Hope that all makes sense.

Paul

I see. I've noticed that footer did not go down (is this phrasal verb correct? ) under all three columns. And I've also asked why. Now you tell me the reason. I will edit my code basing on your code as a pattern in order to have a footer span al three columns.

I hope that all is clear. Sometimes my english is down (my brain is always down )

[simon's]

I’m trying to create something like picture posted. There are four main containers: header, footer, right and middle one. Their positions belong follow your 3 liquid columns simple layout code. As you can see, I need to put other boxes in these main containers. Each box has the same properties: same margin, same width, etc…. So it is possible doing that with your code?

P.S.: light grey lines are the lines of structure and they are invisible

[Paul O'B]

Hi,

You don't really need code as complicated as mine if you don't require the 100% height or the equalising columns. You van just use the basic 3 float technique as follows.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>3 col layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
 padding:0;
 margin:0;
 background:#fff;
 color: #000;
}
#outer{
 background:#F8E7EC;
 border-left:1px solid #000;
 border-right:1px solid #000;
 color: #000;
 background:pink;
}
#header{
 height:70px;
 background:#FF0000;
 border-top:1px solid #000;
 border-bottom:1px solid #000;
 color: #000000;
 margin:0;
 padding:0;
}
#left {
 position:relative;
 width:20%;
 float:left;
 background:orange;
}
#right {
 position:relative;
 width:19.9%;/*avoid rounding bug */
 float:right;
 background:orange;
}
.inner,.innerr{
 width:97%;
 border:1px solid #000;
 background:silver;
 margin-bottom:10px;
 min-height:200px;
}
.innerr{float:right}
* html .inner, * html .innerr{height:200px}
#footer {
 clear:both;
 height:50px;
 border-top:1px solid #000;
 border-bottom:1px solid #000;
 background-color: #FF8080;
 color: #000;
 text-align:center;
 position:relative;
}
* html #footer {/*only ie gets this style*/
 \height:52px;/* for ie5 */
 he\ight:50px;/* for ie6 */
}
#centrecontent {
 width:60%;
 float:left;
}
p {margin-top:0;padding-top:0}
</style>
</head>
<body>
<div id="outer"> 
  <h1 id="header">Header</h1>
  <div id="left"> 
	<div class="inner">This is the inner</div>
	<div class="inner">This is the inner</div>
  
</div>
  <div id="centrecontent"> 
	<p> centre content goes here : centre content goes here : centre content goes 
	  here : centre content goes here : centre content goes here : centre content 
	  goes here : centre content goes here : centre content goes here : centre 
	  content goes here : centre content goes here : centre content goes here 
	  : centre content goes here : centre content goes here : centre content goes 
	  here : centre content goes here : centre content goes here : centre content 
	  goes here : centre content goes here : centre content goes here : centre 
	  content goes here : centre content goes here : </p>
  </div>
	<div id="right"> 
	   <div class="innerr">This is the inner</div>
	<div class="innerr">This is the inner</div>
  </div>
<div id="footer">Footer </div>
</div>
</body>
</html>

With fluid sides you will have to make sure that you don't put large images in the columns as this will stop them contracting and then the floats may drop below in ie. Fluid columns like this are best for textual content and small images that can float around.

Paul

[simon's]

Amazing. Thank you. But setting the alignment of the right and left colums and using one inner class instead of two is not more quick than doing what have you wrote?

[Paul O'B]

But setting the alignment of the right and left colums and using one inner class instead of two is not more quick than doing what have you wrote?

I think I understand what you are saying lol

The reason that I have defined left and right as columns and then placed an inner inside the column is to do with the way that floats will be cleared on the page. You can't clear floats anymore withut them clearing everything else on the page (in firefox1.0). You need to contain the content in a float istelf which is why I have floated the whole left colmn and the whole right column.

You can place as many elements as you like in those columns (floated or not) and then you can clear them safely without clearing all the other content on the page.

Also if you float multiple items left and right without them being in a parent container you cannot get them to all be on one side or the other very easily as floats only float level and not level and then upwards.

The other issue is box model issues with padding and borders so you shouldn't add padding to a percentage container because it will eventually be too big for its allocation at some stage.

Hope that all makes sense .

Paul

[simon's]

I think you don't understand, but that's my fault. You create two inners (left and right). My code makes only one inner (#BoxGeneric). Each column (left and right one) have different text-align property. As you can see #ColumnLeft has text-align set on left, and #ColumnRight has text-align set on right. So I create one less inner than you, furthermore my inner is reusable becuse it doesn't float nowhere. Probably I don't uderstand the important reason that has made you to write this code.

[Paul O'B]

Hi,

You're right I probably have got the wrong end of the stick

In your code above you still have 3 columns

#ContainerLeft {
	position:absolute;
	top:0; 
	left:0;
	width:20%;
}

#ContainerCenter {
	margin:0 21% 0 21%;
}

#ContainerRight {
	position:absolute;
	top:0;
	right:0;
	width:20%;
}

Thats really no different from my code apart form the way its positioned. I could do it just with three floats of appropriate dimensions. The extra elements are just icing on the cake so to speak.

Sorry if thats not what you meant

Paul

[simon's]

I apologize if I have been arrogant. Sometimes I use strange espressions that may seem brash. That's my english. I post here with direction to improve it.

[simon's]

I have a problem. If I set padding property to inner boxer the layout goes mad.

[Paul O'B]

Hi,

You will have to add padding to the inner elements (e.g. paragraphs (p) etc) or you will fall foul of the box model. Any padding will increase the size of the element and it won't fit. This is the way the correct box model is designed and can be a bit of a nuisance at times.

In my original example you could actuallly leave the widths out of the elements named inner and innerr and then you could add padding as it would fill to expand the parent.

Paul

[simon's]

Hi,

You will have to add padding to the inner elements (e.g. paragraphs (p) etc) or you will fall foul of the box model. Any padding will increase the size of the element and it won't fit. This is the way the correct box model is designed and can be a bit of a nuisance at times.

In my original example you could actuallly leave the widths out of the elements named inner and innerr and then you could add padding as it would fill to expand the parent.

Paul

I understand. Sorry for the questions bombing but your explanations too clear and precise. I've noticed that with your code the gap between right column and center column is one pixel large less than the center column and left one. Do you know the reason? I think it depends of 19.9% value. Thank you for your patience.

[Paul O'B]

HI,

Yes ie has a problem with rounding percentages and if you make them exact it may round the pixels up as the screen is resized forcing the elements to be bigger than the allocated space. This causes the float to drop down the page below all other floats to find room because it is now wider than it should be.

So you need to make sure you keep the total percentages slighlty less than 100%. You can of course then use inner elements if you want to even things out. Or you can make the center column narrower and have the side columns the same. As long as you make sure that the precentages add up to 99.9% you should be ok. You should realise that percentages are converted into pixel sizes by the browser and sometimes it doesn't equate to an exact size which is why some browsers may round the size up and some round it down or some just handle it badly

Paul

[dreado]

Sigh, just realised that in IE my footer is not being pushed down when the left content is bigger, what have I done wrong please?

Example

[Paul O'B]

Hi,

IE my footer is not being pushed down

The footer seems to be pushed down ok its just that ie is overlapping a bit for some reason.

Just add a bit of extra padding for ie and it should be ok.

* html #left {margin-right:-3px;padding-bottom:35px;}/* negative margins for three pixel jog*/

Paul

[dreado]

Thanks Paul, think that’s sorted it (looks fine on my hard drive, but no change when I look at it live, but I’m sure that just cos something is cached).
On a bit of a side note, does anyone know why I have such a hard time getting IE to refresh? It doesn’t seem to matter whether I delete temp internet files or not, especially when it comes to css files.

[Paul O'B]

Do you clear your history as well ? I usually just refresh the browser and it works fine.

You haven't selected the option "never" in the "check for newer versions of stored pages" have you.(Tools, options, settings - the usual setting is automatic).

Paul

[dreado]

No, I don’t normally clear the history, does that help?
Check for newer versions is set at Automatic, I’ve never noticed that section before, maybe I’ll set it at Every Visit if it keeps it up.
It has refreshed now anyway, and the footer problem is solved, thanks again.

[Paul O'B]

maybe I’ll set it at Every Visit if it keeps it up

That will request new images and css every time and will slow your machine down. Every rollover will request a new image and will be incredibly slow as images won't be cached.

Its fine to use this setting when designing but is not much pratical use otherwise.

Paul

[dreado]

Yeah, duly noted.
I only really use IE for designing anyway; it’s just really frustrating when you think something hasn’t worked, when actually it just hasn’t refreshed. Thinking about it though, if I only get this problem viewing pages that are on the server, and not when I view them locally, does that mean it’s not IE that’s to blame? I guess what it really means is I should preview my pages on my machine

[Shpigford]

Hmmm...for some reason the center content and the left column are both floating all the way to the left.

http://www.sabotagemedia.com/clients...pc01/text.html