homepage Welcome to WebmasterWorld Guest from 54.167.173.250
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
3 Column CSS Layout (with header and footer)
revisited..
SuzyUK




msg:1206604
 2:24 pm on Dec 6, 2003 (gmt 0)

as a follow up to an earlier attempt [webmasterworld.com]

The layout in question was originally intended to be experimental as well as I wanted to use it.. but I never did use it and it was "complicated" (I know because someone "blogged" that it was, so it must be ;))

I was just going to leave it as is because I didn't need to use it but I keep getting requests for follow ups..

So one last go.. and again I'm looking for Mac testers to see if I've finally got a working sample (although I don't expect the background colours will stretch)

This time after studying the "star selector hack", I've used it instead.. mainly because it covers my problem browser (IE/Mac) too .. and this way if it works, only one stylesheet is required .. in fact the hardest part was getting Opera6 to play ball..

I don't even ususally bother about OP6 anymore as IMO Opera users tend to keep up with latest releases, but there you go it's an extra ;)

It's still based on the same principal which is that the Browsers that can use the CSS Table properties, and IE which can't use table properties uses floats instead as well as their ability to be contained!

(IE6 still needs to be in quirks mode so we can cover the Box model with one set of hacks, and there's one extra div required to pad the center column as IE/Mac need widths on floats I made the center column 100% wide then cleared the side margins with the "extra" padded div, this wouldn't have been required in IE/Win)

feedback welcome....
<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="en" ><head>
<title>3 Column CSS Layout - Fixed Header and Footer</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">@import "v3.css"; </style>
</head>
<body>
<div id="header"><h1>3 Column CSS Layout <span>a work in progress&#187;</span></h1>
</div>
<div class="thetable">
<div class="tablerow">
<div class="tablecell one">
<p>CSS - 100% Height layout.</p>
<ul>
<li>three column stretch</li>
<li>fixed height header and footer</li>
<li>footer spans 3 columns</li>
</ul>
</div>
<div class="tablecell two"><div class="pad">
<h2>Middle Column</h2>
<p>This is a flexible width column, it is the width of the screen and clearance of the side columns in <strong>IE</strong> is produced by <em>left and right padding</em>.</p>
</div></div>
<div class="tablecell three">
<p>This version is done using the star selector hack..</p>
<p>IE6 Quirks still required</p>
</div>
<!-- tablerow --></div>
<!-- thetable --></div>
<div id="footer"><p>and this of course is the footer</p></div>
</body>
</html>

v3.css
html, body {height: 100%; width: 100%; margin: 0; padding: 0; border: 0;}

.thetable {
position: relative;
display: table;
width: 100%;
margin: 0;
padding: 0;
border: 0;
clear: both;
border-spacing: 0; /* required by Opera 6 */
}

/* hide this from opera6 */
head:first-child+body div.thetable {height: 100%;}

/* IE/Win required so floated tablecells take the height
and overcome the display for IE/Mac */
* html .thetable {display: block; height: 100%;}

.tablerow {display: table-row;}
* html .tablerow {display: block;}

.tablecell{
display: table-cell;
border: 0;
padding: 0;
margin: 0;
padding-top: 100px;
padding-bottom: 50px;
vertical-align: top;
min-height: 100%; /* opera6 needs min-height but moz/IE needs height */
}

/* hide this from opera6 */
head:first-child+body div.tablecell {height: 100%;}
/* added for mozilla which worked for others too,
but op6 still needed min-height so hide this rule */

/* for IEwin/mac Only to override display: table-cell; */
* html .tablecell
{display: block; float: left; height: 100%;}

.one{
width: 180px;
background: violet;
position: relative;
border-right: 1px dotted #000;
z-index: 5;
}

.two{
width: auto;
background: yellow;
position: relative;
}

/* all foats need widths in IE/Mac
so had to workaround center column width with padding/margins */
* html .two {
width: 100%;
margin-left: -181px;
margin-right: -201px;
}

* html .two .pad {padding: 0 200px 0 180px;}

.three{
width: 200px;
background: lime;
position: relative;
border-left: 1px dotted #000;
}

#header{
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
background: #000080;
width: 100%;
height: 100px;
color: #fff;
z-index: 10;
border-bottom: 2px dotted lime;
margin-right: -15px; /* see ie/mac hack below */
}

/* to correct an IE/Mac issue -15px positioning bug */
/* the following is invisible to IE Mac : note id selector must be used */
/* commented backslash hack v2 \*/
#header {margin-right: 0px;}
/* end hack */

#footer{
clear: both;
margin-top: -40px;
width: 100%;
background: #000080;
color: white;
z-index: 100;
min-height: 40px; /* IE needs height though */
position: relative; /* required by OP6 but correct value fed re hack below */
}

/* hide this from opera6 */
head:first-child+body div#footer {position: absolute;}

* html #footer{height: 40px;} /* added to overcome content overflow min-height rule */

/**** some general formatting styles **********/
body{font-size: 0.8em; font-family: verdana, tahoma, arial, sans-serif;}

a:link, a:visited{
color: #fff;
background: transparent;
text-decoration: underline;
}

a:hover{
color: lime;
background: transparent;
}

.tablecell a:link, .tablecell a:visited {
color: #009;
background: transparent;
text-decoration: underline;
}

.tablecell a:hover {
color: #fff;
background: #009;
text-decoration: none;}

ul {padding-right: 0.5em;}

/* removing margins and using padding to format instead corrects an Opera and IE display error */
p {padding: 0.5em 1em 0 1em; margin: 0;}

h1, h2, h3 {font-family: georgia; padding: 0.5em 2em; margin: 0;}
h1 {font-size: 1.2em;}
h2 {font-size: 1.1em;}
h3 {font-size: 1em;}

Tested OK (all Win):
Moz 1.4
Firebird 0.6.1
OP6.05
OP7.11
NN7.1
IE6
IE5.5
IE5

Suzy

Hacks etc will be explained if this tests Ok in Mac.. if not I definitely give up ;)

 

ProfMoriarty




msg:1206605
 2:47 pm on Dec 6, 2003 (gmt 0)

Hello Suzy,

did you take a look at [positioniseverything.net...] or at [positioniseverything.net...]

These examples should do it very well also.

Best,

ProfMoriarty

IanTurner




msg:1206606
 7:04 pm on Dec 6, 2003 (gmt 0)

The positioneverything three column stretch example is quite untidy at the bottom of the middle column in Opera 7.11

SuzyUK




msg:1206607
 7:08 pm on Dec 6, 2003 (gmt 0)

Hi ProfMoriarty

thanks for those.

the 3 col stretch I'd seen but the other I hadn't..

the downside of the three column stretch is that the center column has to be the longest, and it's always easier to get a footer in if that is the case ;)

My layout has been an ongoing project (i.e. when time permits) and was built to encompass other frequently requested desires e.g. footer at bottom regardless of length of page (especially a short page!), and all columns control the position of the footer in longer pages..

The ordered borders method also takes care of "any column controls the footer" but a "downside" is that it has to be a fixed width.. which is not too much of a downside really ;) Also you would be restricted to colours for the background, with mine you could use background images and/or borders on the side columns..

I'm not sure but I think my design could be fluid, probably easier than the fixed side columns I've put in , as it would save the center column (IE/Mac) width workaround :)

The definite upside to the "ordered borders" is the ordered source, which I can't do in my layout as it is primarily based on a table layout/table properties..

but that would defeat the experimental nature of this as I deliberately wanted to show how the table properties would be able to be used for layout purposes when they are fully supported.

I was going to stop working on this ;) as I personally wouldn't design as rigidly as this (and hopefully not with all these hacks!),

It is good to know there is usually a technique/layout that covers these points should I need one.. and I suppose then it would depend on the spec which technique would get priority..

PS:
I don't actually need any of these methods at the minute, I've just posted this here for discussion, comments..

Note: ~ Mac tests are in! Thanks Jim

Moz OK,
Safari Ok but footer is not the correct height (passable I think!)..
IE :( it's better, well at least it doesn't crash this time! The respective columns are there,
background colour doesn't stretch as expected,
and there are unnecessary horizontal and vertical scrolls.. (I don't think this is the 15px bug as I allowed for that)

Suzy

ProfMoriarty




msg:1206608
 11:15 am on Dec 7, 2003 (gmt 0)

Suzy,

good to see there are people constantly working on CSS-P layouts and it´s quite better to see that nearly everything formerly done with tables can now be achieved with CSS-P. I really appreciate your work and the works of all the others :-)

I am working on CSS-P layouts for some months now and it took some time to understand what´s really going on in all the different browsers. My "holy grail" is a layout with two or three columns (optional with background images), content column fluid, left or right column fixed width (px), header and footer and source ordered with content at the top, left and right after it and footer at last. Not yet achieved completely, but I´m getting closer to it.

Best,
ProfMoriarty

d1n1_81




msg:1206609
 12:48 pm on Dec 7, 2003 (gmt 0)

Hi Suzy,

I'm a beginner as far as CSS is concerned! I've just been looking at your above layout in IE6. I noticed that when the browser window is shrunk a certain amount, the text you have in the header bar drops down to take up two lines instead of one:

-------------------------------------------
¦
¦ 3 Column CSS Layout a work in progress»
¦
-------------------------------------------

when the browser shrinks this becomes:

-------------------------------
¦
¦ 3 Column CSS Layout a work
¦ in progress»
¦
-------------------------------

Is there any way to prevent this happening so that when the browser window is shrunk far enough a horizontal scroll bar comes up instead of the text altering to remain in the viewable area.

I think I am trying to achieve a min-width effect but I read somewhere that this does not work in IE!

Any help would be appreciated.

Thanks in advance.

Regards,
Dini

photon




msg:1206610
 11:52 pm on Dec 7, 2003 (gmt 0)

A brute force way to do it would be to use
&nbsp; between all of the words instead of "soft" spaces. Another thought that occurs to me is using <pre> tags, but I'm not sure those are allowed inside the header tags.
TGecho




msg:1206611
 12:56 am on Dec 8, 2003 (gmt 0)

There is a way to emulate min-width in IE using expressions. Do a search on WW for it.

aevea




msg:1206612
 7:33 am on Dec 8, 2003 (gmt 0)

Great layout suzyuk. d1n1_81, one way to stop the wrap would be to declare:

h1 {white-space: nowrap; }

Adam

DrDoc




msg:1206613
 4:03 pm on Dec 8, 2003 (gmt 0)

So, no news on how it tests out on Mac yet? ...since that's what Suzy was asking ;)

icelava




msg:1206614
 3:59 pm on Dec 10, 2003 (gmt 0)

did you take a look at [positioniseverything.net...] or at [positioniseverything.net...]
Sorry to "hijack" the thread. ProfMoriarty these examples are cool but I'm still lacking positioning experience to understand exactly how the column DIVs are compensating each other (especially between middle & right columns) during window resize.

Specifically, what I'm looking to do is just a 2 column DIV layout with the following requirements

<Header DIV width 100% no need to worry>
<Column1 DIV> <Column2 DIV>
<Footer DIV width 100% no need to worry>

Column2 has unknown width. It is to be aligned to the window's right always. Column1's width is also unknown, so its right must stretch to Column2's left. When resizing, Column2 shall never adjust its width, and Column1 must compensate.

Looking at those examples, it looks like the property that controls this is MARGIN so I tried a

#Column1Div
{
margin-right: 20%;
}

#Column2Div
{
background-color: #ffffcc;
position:absolute;
right: 0px;
text-align: center;
}

but Column2Div will simply drop below Column1Div. I am missing out on something but can't place a finger on it?

icelava




msg:1206615
 4:23 pm on Dec 10, 2003 (gmt 0)

Ok the progress I've made is to encapsulate the 2 column DIVs into a parent DIV.

<Header DIV width 100% no need to worry/>
<Body DIV>
<Column1 DIV/> <Column2 DIV/>
</Body DIV>
<Footer DIV width 100% no need to worry/>

with CSS

#BodyDiv
{
width: 100%;
}

#Column1Div
{
left: 0px;
margin-right: 20%;
position: absolute;
}

#Column2Div
{
background-color: #ffffcc;
position:absolute;
right: 0px;
text-align: center;
}

They are positioned on the same horizontal level now with MFB obeying the Column1Div margin-right but IE doesn't and lets Column1Div's width shoot under Column2Div. And of course both browsers don't stretch their left/right edges to meet up nicely. So now the missing piece to the puzzle is getting them both to auto stretch their widths... but how?

theonliest




msg:1206616
 6:32 pm on Dec 10, 2003 (gmt 0)

this layout is crashing for me on the mac (IE5 predictably enough!)
did you alter the code to get around this (you mentioned it had 'stopped crashing' in IE)

SuzyUK




msg:1206617
 10:23 pm on Dec 10, 2003 (gmt 0)

theoneliest... no I didn't alter it from post one in this thread

It was the code from the linked thread that used to crash IE5/Mac

The reports I have didn't mention crashing this time, in fact I have screenshots so It must've worked don't know the OS though (but think it's OS X)

The thing is I removed all the the things I "know" to crash IE/Mac from the previous thread code, those were "auto", display:table-row; and I put a width on all the floated columns..

Could it be that it's not liking the "Star selector hack"?

Can you get a working layout using this source, presumably we could then hack it in for using the "commented backslash hack"

Seeing as how it seems to be workable on most other plateforms tested (both versions actually ;))

*aside*...Dear Santa... please can I have a Mac for Xmas....

Suzy

SuzyUK




msg:1206618
 10:27 pm on Dec 10, 2003 (gmt 0)

icelava

Welcome to WebmasterWorld!

rather than use absolute positioning for your columns, if you were to float the left one then use a margin on the right one inside your wrapper the footer will automatically move down the page

absolute positioning removes the element from the flow of the document, so the footer will no longer be able to take its position from them

there is a two column template floating about in a thread somewhere recently.. anybody got the link?

Suzy

icelava




msg:1206619
 11:29 am on Dec 11, 2003 (gmt 0)

SuzyUk
rather than use absolute positioning for your columns, if you were to float the left one then use a margin on the right one inside your wrapper the footer will automatically move down the page

absolute positioning removes the element from the flow of the document, so the footer will no longer be able to take its position from them


Ok I should able to do encapsulate this absolute positioning within the BodyDiv right? I won't have to worry about the header and footer then.

Looking at the start page of Positioniseverything.net again I copied over its style properties first.

#LeftCol
{
margin: 0 45% 0 0;
padding: .5em .5em .5em 2em;
color: #ffa;
border: solid 1px blue;
}

#RightCol
{
background: #ffd;
padding: 0 .3em 1.5em .7em;
border: solid 1px green;
}

#RightWrap
{
position: absolute;
right: 3%;
top: 220px;
width: 39%;
min-width: 210px;
}

Looking at it there's alota hard coding to the right columns' DIVs' widths to make this a possible calculation. So I must certainly be fixing my right column's width to have it claimn precedence over the left column's width?

theonliest




msg:1206620
 5:15 pm on Dec 11, 2003 (gmt 0)

a couple of comments on this 'Gordian Knot' of a layout (rather you than me SuzyUK!)

it's still crashing for me on mac/IE5, I'm getting a 'cannot parse xml file' message followed by a blank screen. it's os9 but I'm sure it would be the same IE5 as osX+, mozilla 1.2.1 on the mac is perfect btw!

the right column is also 'jumping below' when you resize it on IE6Win (you have to make the window very small about 400px wide)

somewhat off the point, but wot does the 'display:table' attribute do exactly?

..and in the stylesheet, you have a 'width:100%' alternative for the centre column on IEmac; is this really necessary? I've recently done a 3 column layout using 'width:auto' on the centre column which works fine on the mac.

SuzyUK




msg:1206621
 12:35 am on Dec 31, 2003 (gmt 0)

Hiya all again..

This one is different altogether ;) (easier too thank goodness) and comes from some things learnt while researching for this thread [webmasterworld.com].

It's a "floaty one".. it relies on the support in newer browsers that descendant floats stretch their container if it too is floated.

Notes (or Pros and Cons):

  • probably best on a fixed/explicit width unless you're happy with percentage width side columns.
  • the background colors/effect would need to be done with a background image (so another reason for fixed width!).. but a lot of fun could be had...
  • I built in a #bgcontain div because it was triggering an IE Bug (double margin/float bug), but this actually makes it easier to center if required.
  • footer can't be "fixed" to bottom of page but the use of min-height (height in IE) on the #container would allow you to place it a suitable distance down a shorter page.
  • all columns control footer
  • can be very easily adapted to 2 columns
  • Works in both IE strict and quirks
  • tested in IE, Moz and Opera (Win)
  • as ususal I need Mac feedback ;)

    Code:
    <!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>Floaty 3 col</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <style type="text/css" media="screen">
    html, body {margin: 0; padding: 0; height: 100%; text-align: center;
    min-width: 700px;
    }

    #bgcontain {
    background: #eee url(shad.jpg) repeat-y 150px 0;
    width: 700px;
    margin: 0 auto;
    text-align: left; /* to override text align center IE5 center workaround */
    }

    #container {
    padding: 0;
    float: left;
    width: 100%;
    clear: both;
    min-height: 250px;
    }

    /* IE min height hack */
    * html #container {height: 250px;}

    #leftwrap {
    float: left;
    width: 520px;
    }

    #rightbar {
    float: left;
    width: 180px;
    background: transparent;
    }

    #leftbar {
    float: left;
    width: 150px;
    }

    #content {
    float: right;
    width: 370px;
    min-height: 100%;
    background: transparent;
    }

    #footer, #header {width: 700px; margin: 0 auto; background: gold; clear: both;}

    /* general */
    p {margin: 0; padding: 10px;}

    a {display: block; color: blue; background: transparent;}
    a:hover {text-indent: 0; color: red;}
    a span {display: none;}
    a:hover span {display: block;}

    </style>
    </head>
    <body>
    <div id="bgcontain">
    <div id="header"><p>header text here</p></div>
    <div id="container">
    <div id="leftwrap">
    <div id="content">
    <p><a href="/">centercontent<br /><br /><span>centercontent<br /><br />centercontent<br /><br />centercontent<br /><br />centercontent</span></a></p>
    </div>
    <div id="leftbar"><p><a href="/">left bar<br /><br /><span>left bar<br /><br />left bar<br /><br />left bar<br /><br />left bar<br /><br />left bar<br /><br />left bar<br /><br />left bar</span></a></p></div>
    </div>

    <div id="rightbar"><p><a href="/">right bar<br /><br /><span>right bar<br /><br />right bar<br /><br />right bar<br /><br />right bar<br /><br />right bar<br /><br />right bar<br /><br />right bar</span></a></p></div>
    </div>
    <div id="footer"><p>footer text here</p>
    </div>
    </div>
    </body>
    </html>

    Enjoy!
    Suzy

    <added>
    If IE/Mac respects the min-height rule the IE hack can be extended (into the "holly hack") to hide it from the Mac:

    /* Hides from IE-mac \*/
    * html #container {height: 250px;}
    /* End hide from IE-mac */

    </added>

  • SuzyUK




    msg:1206622
     5:26 pm on Dec 31, 2003 (gmt 0)

    Note : another plus on new layout there is also ordered source..



    >>msg#5 - ProfMoriarty Thanks for kind words..
    >>your holy grail
    I'm not sure it would be possible to get an ordered source with a flexible center and fixed width sides. But you can gladly cmiiw. If the content column is always the longest then you could approximate it with absolute positioning maybe....

    Reasoning being.. to get ordered source you would probably need to use floats, and in order for for floats to be successful they must have widths specified. Now that could be percentage but that would mean you couldn't fix the side widths?



    >>msg#17 - theoneliest.. "Gordian Knot" hehe.. the Mac report is (msg#2)

    Note: ~ Mac tests are in! Thanks Jim

    Moz OK,
    Safari Ok but footer is not the correct height (passable I think!)..
    IE it's better, well at least it doesn't crash this time! The respective columns are there,
    background colour doesn't stretch as expected,
    and there are unnecessary horizontal and vertical scrolls.. (I don't think this is the 15px bug as I allowed for that)

    I don't understand the error you report as I have a screenshot IE5 decribed above? Anyhow without access to proper testing I can't "tinker".

    somewhat off the point, but wot does the 'display:table' attribute do exactly?

    it's what the non-IE layouts are based on. The design is basically set up to mimic a table and CSS has table properties that emulate HTML. (Opera needs the whole structure built!)

    <table> - display: table;
    <tr> - display: table-row;
    <td> - display: table-cell;

    These particular bits of CSS should be hidden from IE/Mac especially as it was what was crashing it before and IE/Win doesn't understand the table properties anyway so I used the * html hack layout out a floated design for IE(M & W) instead.
    e.g.
    * html .thetable {display: block; height: 100%;}

    ..and in the stylesheet, you have a 'width:100%' alternative for the centre column on IEmac; is this really necessary? I've recently done a 3 column layout using 'width:auto' on the centre column which works fine on the mac.

    Well I only did it this way because I knew that IE/Mac needed widths on floats to work.. but if you can try the code with width: auto instead (I'll try it on Win) then might just be it.. the * html hack can be expanded to block out IE/Mac..and it can be fed a different value so if it's only the one line that's causing a problem that could be it ;)

    So the plea is if anyone with a Mac can understand this CSS and make it work on IE/Mac then I have the hacks to fit!

    Happy New Year
    Suzy

    SuzyUK




    msg:1206623
     12:26 pm on Jan 5, 2004 (gmt 0)

    Another... different again

    this one is again linked to this CSS Positioning and Height Inheritance [webmasterworld.com] thread. (msg#27 >> )

    this time it uses Absolute Positioning and the CSS2.1 Working Draft Computing Heights and Margins [w3.org]

    once each column is "set" you can then use them as wrappers and continue to position inside them so the solid colors that I have used need not be that way (see center column)

    Cons:

  • you still have to know which "column" (content area) is the longest as the AP divs will still overrun if they get longer than their containing block.
  • width of elements (such as images, long words) in the content section need to be handled somehow, I tested with overflow auto which worked OK, but needed to be hidden/hacked out for IE
    Note any gaps that appear are due to rounding errors using pixel borders and percentage widths

    Pros:

  • fluid (percentage widths)
  • flexible center
  • fixed or percentage width sides
  • can be (horizontally) centered easily
  • header and footer capable
  • any number of columns could be built in
  • ordered source
  • only 1 x IE height hack required

    <!-- q -->
    <!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>Multi Column Layout Using AP</title>
    <style type="text/css" media="screen">
    /* this layout will not work in IE Strict */

    html, body {
    margin: 0; padding: 0;
    height: 100%;
    font-family: helvetica, verdana, arial, sans-serif;
    font-size: 100%;
    text-align: center;
    }

    #wrapper {
    position: relative;
    width: 80%;
    margin: 0 auto;
    border: 1px solid black;
    background: #eee;
    min-height: 80%;
    text-align: left;
    }

    /* ie hack - layout REQUIRES a height here to work */
    /* (1% will do) if no min-height is required */
    /* this it where it fails in Strict Mode */

    * html #wrapper {height: 80%;}

    #header, #footer {position: relative;
    width: 80%;
    margin: 0 auto;
    height: 50px;
    background: #ffc;
    border: 1px solid #000;
    }

    #apbg1, #apbg2 {
    position: absolute;
    height: 100%; /* required by IE to inherit from wrapper (IE Hack) above*/
    top: 0;
    bottom: 0; /* Opera needs this! */
    color: gold;
    border-width: 0px;
    border-style: solid;
    border-color: #777;
    }

    #apbg1 {left: 0; width: 150px; background: green; border-right-width: 2px;}
    #apbg2 {right: 0; width: 100px; background: purple; border-left-width: 2px;}

    #apbg2 p {height: 50%; background: #aaa;}

    #contentwrap {
    padding: 10px 110px 10px 160px;
    }

    #content {
    position: relative; /*to further position divs inside content area */
    border: 1px solid #000;
    background: #fff;
    overflow: auto;
    }

    * html #content {height: 1%;} /* IE Hack for peekaboo bug which appeared when I added a background */

    p {margin: 0; padding: 10px; font-size: 0.8em;}
    h1 {font-size: 1.2em; margin: 0; padding: 10px;}

    a {color: white;}
    a:hover {color: yellow;}

    </style>
    </head>

    <body>
    <div id="header"><h1>Heading text</h1></div>

    <div id="wrapper">

    <div id="contentwrap">
    <div id="content">
    <p><b>Center Content Area</b></p>
    <p><b>min-height</b> (height IE)~ gives a short page height </p>
    <p>longwordtestlongwordtestlongwordtest</p>
    <p>add favourite text here
    <br />Lorem ipsum dolor sit amet,
    <br />Lorem ipsum dolor sit amet,
    <br />Lorem ipsum dolor sit amet,
    </p>
    </div>
    </div>

    <div id="apbg1"><p>left content<br /><a href="/">left link</a></p></div>
    <div id="apbg2"><p>right content<br /><a href="/">right link</a></p></div>

    </div>
    <div id="footer"><p>footer text</p></div>
    </body>
    </html>

    As usual any/all feedback welcome
    Suzy

  • Global Options:
     top home search open messages active posts  
     

    Home / Forums Index / Code, Content, and Presentation / CSS
    rss feed

    All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
    Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
    WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
    © Webmaster World 1996-2014 all rights reserved