5 replies [Last post]
Jedi
Jedi's picture
Offline
Regular
Czech Republic
Last seen: 13 years 48 weeks ago
Czech Republic
Timezone: GMT+2
Joined: 2005-10-01
Posts: 13
Points: 0

Hi guys,

I use 3-col layout, left and right cols are float, the one in the middle has left and right margin equal to the left and right's col width.

	#left {
		float:left;
		width:150px;
		margin:0; padding:0;
		margin-right: 12px;
		
		font-size:80%;
		}
	#right {
		float:right;
		width:150px;
		margin:0; padding:0;
		font-size:80%;
		}
	#middle {
		margin:0 150px;
		margin-left: 162px;
		font-size:80%;
		background-color: transparent;
		padding: 12px;
		
		}

I use the trick with background images so it looks like the cols are the same height.
/* bg for the left col*/
#main1 {
		margin:0; padding:0;
		background: White url(../bg-left.gif) repeat-y top left;
		height: 100%;
		}
/*bg for the right col*/
	#main2 {
		margin:0; padding:0;
		height: 100%;
		background: url(../bg-right.gif) repeat-y top right;
		}

All this is contained in one fixed width div that is horizontally centred.

div#main{
  margin: 0 auto;
  width: 780px;
  border: 0px solid red;
  height: 100%;
}

and heres how the structure looks like:
<body>
<div id="main">
<div id="main1"><div id="main2">
  <div id="left">
  </div>
  <div id="right">
  </div>
  <div id="middle" class="clearFix">
  </div>
</div></div>
</div>
</body>

But the cols will be always as high as the highest of them. That's logical and in most cases all i need. But this time i need the left and right col to be from the tom of the page to the bottom, no matter how high any col will be. How to achieve this?
viz http://bluemonday.cz/web/index.php?inc=articles.php&cat=3

I think it could be done with specifying body background image, but i dont know how to position the background, when the left beginning must be ((whole width of the page) - (780px: the width of my 3 cols)) / 2

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 11 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

3-col layout with height of at least 100% of page's height

Hi

Whilst I know that these links will give you more than you want, they show how to do a full height full width deisng like you need, but with header and footer, which you could remove from the code:

www.pmob.co.uk and look for the 3 col fluid width samples.

Trevor

Jedi
Jedi's picture
Offline
Regular
Czech Republic
Last seen: 13 years 48 weeks ago
Czech Republic
Timezone: GMT+2
Joined: 2005-10-01
Posts: 13
Points: 0

3-col layout with height of at least 100% of page's height

Hmm it seems I found what ive been seeking for (http://www.pmob.co.uk/temp/3col-centred-template.htm), thanks. I have noticed some strange things in CSS:

width:771px;
w\idth:765px;

why that backslash? is that a fault or another hack?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 14 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

3-col layout with height of at least 100% of page's height

Is that preceded by * html something? The first one is used to give a different width to IE5+ with the second one setting it back again for IE5 Mac/IE6 (which implement the box model correctly).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Jedi
Jedi's picture
Offline
Regular
Czech Republic
Last seen: 13 years 48 weeks ago
Czech Republic
Timezone: GMT+2
Joined: 2005-10-01
Posts: 13
Points: 0

3-col layout with height of at least 100% of page's height

thats it...

* html #footer {
	height:50px;
	he\ight:40px;
}

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 11 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

3-col layout with height of at least 100% of page's height

Hi

It is a box model hack to feed a value to IE only, the one without the slash in is a fake (wider) width to allow IE5.x to put border and padding inside the width, which it does instead of outside like all other browsers do. The the one with the slash can't be read by IE5.x, but can by IE6, so it returns IE6 back to the correct width.

Trevor