Forum Moderators: not2easy
-have header
-3 columns:
-right column fixed width (say 200px)
-left column to adjust width to whatever is in it (text or pic)
-center column to adjust to available space between two side columns
-if there is nothing in left column, center column should stretch to occupy the space
-have footer
-page layout should not be limited to max width (ex. design should not specify 780 px max width when user’s screen is 1024)
-order of the content to be loaded into columns should be :
-header
-center
-either of the two side columns
-other side column
-footer
I would post some of the code that I tried but there are so many versions that are not practical. I tried to modify 3 column approach where you adjust positioning via margins, but got nowhere. I also tried making it two columns and then split one of the columns to 2 columns and got nowhere. It seems that for the two columns that are not fixed width you have to at least specify percentage width so it still doesn’t work for me.
Is what I am asking possible using CSS?
I am not asking for anyone to write the code for me, just to point me to the approach of how to do it. I can achieve all of the objectives using table layout, but want to avoid it because:
-page will not show until everything is rendered and loaded
-if I want to switch content between left and right columns in future it requires bunch of editing (although it’s not too bad) – it’s just not elegant solution.
Thanks
[edited by: Leosghost at 11:16 am (utc) on Dec. 17, 2006]
to do this with a table would require a bit of hacking too surely, in order to get content to render first.. can you post your table version?
some random thoughts.
The thing I see with a CSS solution is that you can't order the source very well when you don't know both the right & left column widths because if you want to slot the content in first you would have to know how much to margin each side of the content by ..
I think it should be possible without the source ordering using
display: tabledisplay: inline-block;re: leosghost,
I'm not sure the "one true layout" or "holy grail layout" would do what is required as it relies on widths being known (percentage or otherwise)
would be interested to see if anyone has any solutions for this, perfect or not
Suzy
[edited by: SuzyUK at 12:09 pm (utc) on Dec. 17, 2006]
** Please Note: this is totally untested and is sample code only **
<!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>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Untitled</title>
<style type="text/css" media="screen">
div {border: 2px solid #000;}
#footer, #header {clear: both; width: 100%;}#midcol, #leftcol, #rightcol {
display: inline-block;
}
#midcol, #leftcol, #rightcol {
display: table;
}#midcol {}
#leftcol {float: left;}
#rightcol {float: right; width: 200px;}</style>
</head>
<body>
<div id="header">the header text</div>
<div id="leftcol">#leftcol
<p>makeareallyreallylongword</p>
<p>and then more text</p>
<!--
<p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt</p>
-->
</div><div id="rightcol">#rightcol - width: 200px
<p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div><div id="midcol">
<p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div><div id="footer">the footer text</div>
</body>
</html>
[edited by: SuzyUK at 12:20 pm (utc) on Dec. 17, 2006]
I'm sure that I came across something like that whilst digging around their links looking for a liquid 3 col with fixed footer and scrolling content in the center column ..
best place I could think of that he starts his search ( didn't expect you to be spending your sunday lunch on the boards :))..til some CSS people got here ..
Suzy wrote:The thing I see with a CSS solution is that you can't order the source very well when you don't know both the right & left column widths because if you want to slot the content in first you would have to know how much to margin each side of the content by ..
That’s exactly where I am hitting the wall. I don’t know how to solve this, and started wondering if it is possible to do.
Thanks for posting the example. It’s elegant way for three column layout, but as you noted, it doesn’t meet “ordered layout” for me.
Suzy wrote:
to do this with a table would require a bit of hacking too surely, in order to get content to render first.. can you post your table version?
The layout was mentioned while back here at WebmasterWorld but unfortunately I can’t find the reference to give proper credit to the person who mentioned it. The main hack is in
<TD rowspan=2 </TD>. Here is an example – I took out header and footer in the example for clarity, but it’s trivial to add it back. Also I took out “pretty-fing” effects for same reason. When content is loaded center column is loaded first, then left then right (that’s how text browsers and spiders will see order of content appearing on the page)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>3 column table example with ordered content loading</TITLE></HEAD>
<BODY><!--MAIN_TABLE_BODY-->
<TABLE width="100%">
<!--FIRST_ROW-->
<TR ALIGN="left" VALIGN="top">
<TD>
<!--R1C1-->
</TD>
<!--CENTER_COLUMN--><TD rowspan=2 ALIGN="left" VALIGN="top" WIDTH="100%">
<!--R1C2-->
<p> Center Column loads first </p>
<p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</TD><TD>
<!--R1C3-->
</TD></TR>
<!--SECOND_ROW-->
<TR ALIGN="left" VALIGN="top">
<TD ALIGN="left" VALIGN="top" >
<!--R2C1-->
<p>Left Column loads second</p>
<p>makeareallyreallylongword</p>
<p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</TD>
<TD rowspan=2 ALIGN="center" VALIGN="top"><!--R2C2-->
</TD>
<TD ALIGN="left" VALIGN="top" WIDTH="100%">
<!--R2C3-->
<p>Right Column loads third</p>
<p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p></TD>
</TR></TABLE>
</BODY>
</HTML>
leosghost wrote:..I agree the one true grail wouldn't work in itself ..but I seem to remember something similar to what the OP wants being linked to from there or Erics place ..I'm sure that I came across something like that whilst digging around their links looking for a liquid 3 col with fixed footer and scrolling content in the center column ..
Thanks for the info. I did a lot of research (and trials) prior to posting the question. I did look at “a list apart” and their modified ‘holly grail’ at the beginning of my search but that approach still doesn’t meet all of my requirements.
