setting width to fix for all screen sizes

[j05hr]

I would like to know a good way of setting the site so it fits the screen in all resolutions.

At the moment I'm using pixels because it means i can set it to all the right size without something being longer than the other using percentages.

It's a three column layout with a header the three columns and then a footer.

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-align: center;
margin: 0px;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;
}
#wrapper {
width: 999px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: auto;
text-align: left;
border: 1px solid #000000;
}
#header {
margin: 0px;
padding: 0px;
height: 130px;
width: auto;
background-color: #3366CC;
}
#picture {
height: 130px;
width: 317px;
float: left;
}
#title {
width: 560px;
height: 25px;
float: left;
padding-left: 120px;
padding-top: 30px;
}
#title2 {
width: 583px;
height: 50px;
padding-top: 20px;
padding-left: 97px;
float: left;
letter-spacing: 10px;
}
#time {
width: 989px;
background-color: #CCFF99;
padding-left: 10px;
padding-top: 5px;
height: 25px;
}
#container {
padding: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-attachment: scroll;
background-repeat: repeat-y;
background-position: 0px 0px;
height: 1%;
width: auto;
}
#left {
margin: 0px;
width: 165px;
float: left;
background-color: #DFEAF7;
padding-left: 5px;
padding-top: 5px;
height: 1120px;
}
#nav {
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
line-height: 1.8em;
}
#nav li {
margin: 0px;
padding: 0px;
display: block;
background-attachment: scroll;
background-image: url(bullet.gif);
background-repeat: no-repeat;
background-position: 0px 50%;
border-bottom: 2px solid #C0DFFD;
width: 100%;
}
#nav li a:link, #nav li a:visited, #nav li a:active {
color: #666666;
text-decoration: none;
display: block;
margin: 0px;
padding-top: 3px;
padding-right: 15px;
padding-bottom: 3px;
padding-left: 15px;
width: 130px;
background-attachment: scroll;
background-image: url(bullet.gif);
background-repeat: no-repeat;
background-position: 0px 50%;
}
#nav li a:hover {
Background-color:#FF6600;
color: #ffffff;
text-decoration: none;
}
#center {
width: 829px;
float: left;
margin-right: 0px;
margin-bottom: 0px;
line-height: 1.6em;
background-color: #d0e9f5;
padding-top: 25px;
height: 1100px;
}
#title3 {
height: 20px;
width: 500px;
margin-right: 0px;
margin-bottom: 0px;
background-color:#719BFD;
padding-left: 10px;
margin-left: 50px;
}
#sub {
height: 20px;
width: 390px;
float: left;
margin-right: 0px;
margin-bottom: 0px;
background-color:#719BFD;
padding-left: 10px;
margin-left: 10px;
}
#text {
width:490px;
background-color:#C8DFEA;
margin-bottom: 20px;
padding-left: 10px;
padding-top: 5px;
margin-left: 50px;
padding-right: 10px;
border-bottom: 2px solid #C0DFFD;
}
h1 {
font-size: 12px;
margin: 0px;
padding: 0px;
font-weight: bolder;
}
h2 {
font-size: 24px;
color:#CCFF99;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-decoration: none;
}
h3 {
font-size: 12px;
color:#FF9933; 
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-decoration: none;
letter-spacing:3px;
}
#right {
height: 599px;
width: 394px;
float: left;
margin-right: 0px;
margin-bottom: 0px;
line-height: 1.6em;
background-color: #d0e9f5;
padding-top: 25px;
padding-left: 20px;
}
#new {
height: 519px;
background-color: #d0e9f5;
float: left;
width: 169px;
padding-left: 20px;
padding-top: 105px;
line-height: 1.8em;
}
.clearer {
font-size: 0px;
line-height: 0px;
display: block;
margin: 0px;
padding: 0px;
clear: both;
height: 0px;
width: auto;
}
#footer {
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
text-align: center;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 15px;
padding-left: 0px;
background-color: #3366CC;
width: 999px;
}
#footer p {
color: #999999;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
}
#footer a:link, #footer a:visited, #footer a:active {
color: #999999;
text-decoration: none;
}
#footer a:hover {
color: #CCCCCC;
text-decoration: none;
}

html

<!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=utf-8" />
<title>#</title>
<link rel="stylesheet" type="text/css"
href="#" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="picture"></div>
<div id="title"></div>
<div id="title2">
 
<div id="time"></div>
<div id="container"></div>
<div id="left"></div>
<div id="center"></div>
<div id="title3"></div>
<div id="text"></div>
<div id="title3"></div>
<div id="text"></div>
</div>
</div>
</div>
<div class="clearer"></div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

Don't look too much at the html as i deleted all the content out of it and closed divs on lines where they should be inside columns.

It's more to do with the css and making it fit all screens.

If there's any decent tutorials that anyone knows of that would be a great help too. I had a look and couldn't really find anything that was helping.

Thanks for the help,
Josh

[swa66]

First: What do you want to happen depending on page size ?
Making you mind up on what is flexible and within what limits is something you have to do yourself.

just to give you an idea: you could want the middle column to be fluid, with the 2 side columns static in width based upon the font size that the browser had by default, and the total width of the page should not go below 640px and no above 2000px.

There are plenty of good 3 col layout examples out there ...

Second: your CSS can be simplified a lot:

e.g.:
padding-top: 20px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;

can be written as
padding: 20px 0;

I'm a bit afraid to touch the css as it contains hacks to make IE work that aren't labeled, very risky in the long term.

[coaster01]

I guess I'd just make the width of the outer-most box a percentage and the margins auto:

.wrapper {
display:block;
width:90%;
margin-left:auto;
margin-right:auto;
}

That'll make the container fit within the screen whatever the resolution, and center it too. I know tables are frowned on nowadays, but I think that's because people were using them for layouts they weren't intended for, no? But they are intended for columns, so couldn't you just make the column width a percentage as well? Sorry if this is way off target, actually, I've never used tables because I've never used columns. But they're just another box, only oriented vertically, right? Create your white space with top and left margins. It sounds too easy; I must be missing something. Everything about CSS sounds too easy until you start putting it all together then you wonder why the heck it's not working. :-D

[alt131]

Hi j05hr,

Don't look too much at the html as i deleted all the content out of it and closed divs on lines where they should be inside columns.
It's more to do with the css and making it fit all screens

Always remember that css styles html - so the html is the first place to look for clues about what is desired - and the easiest way to achieve it ;)

Unfortunately I think when you prepared the html for posting (which is good) some </div>'s must have got misplaced. On viewing the layout varied greatly between browsers, and that made it hard to figure what was desired from the existing design. Try correcting the html, then posting again - with a clarification of what you wanted to achieve.

@coaster01
I know you are new to code, so just note the following:

.wrapper {
display:block; <div>s are display:block by default, so this is redundant
width:90%; on a really wide viewport this would make line-length difficult to read, plus "undoes" the dimensions j05hr has used to style the remainder of the document
margin-left:auto;
margin-right:auto; use shorthand to save bytes and coding time: margin:0 auto;
}

A search of WebmasterWorld will throw up plenty of threads that should answer your questions about using tables for layout.

@swa66
To j05hr's credit the css validates - without so much as a warning.
It may have some redundancies, but it contains no hacks. There is nothing to "label" (comment?).

[j05hr]

To swa66

I want the right and centre column to stretch the width of the page along with the header and footer or maybe like you said just the middle column, I'm not sure on which and will decide once i know how to do it so i can see which looks better.

With the simplifying the css, how does it know just to simplify just the top and bottom sides?

What's with the hacks? i obviously don't want to make a website that's going to make me lots of problems.

To coaster01

I'll give this idea a go a later and see what i can come up with.

To alt131

Yeah i know css is what styles html, but the css would be the only place where it's going to define if the site would work on all resolutions no?

Yeah lots of </divs> did go missing because i was deleting all the content out so i could post it on here and a few </divs> went with it.

I don't have lots of time to do the code properly now <snip>.

[edited by: swa66 at 11:30 pm (utc) on Dec. 4, 2008]
[edit reason] keep the discussion in the forum not in PM please [/edit]

[swa66]

Validating is one (very good) point to have, but it doesn't mean there's no stuff in there that is only intended for deviant browsers to do something they shouldn't be doing in the first place (hence "hack").

e.g. (those I spotted, there might be more and that's the scary part)
centering a div with text-align:
body {
text-align: center;
}
#wrapper {
text-align: left;
}
auto margins ought to cover that already (IE6 needs this when in quirks mode)

giving the proprietary hasLayout?:
#container {
height: 1%;
}

These things can and will come back and haunt you in the long run. (I differ quite a bit in opinion with alt131 on that, perhaps best not to fight it out here and agree to disagree instead)

My take is to remove anything and everything that's intended to make IE behave from the main CSS and only serve it to those versions of IE that need it (e.g. not give it to the future IE8) That also means removing anything that's not doing anything for you. To fix IE: I'd strongly suggest conditional comments.

Some prefer to avoid conditional comments and prefer to integrate it all into one stylesheet that works everywhere (I find it much complicated to make, and limiting as you can't use anything IE6 doesn't support)
If you want that, at least label all of them as to why they are needed (e.g. /* IE6 doesn't do auto margins */ is enough to remember not to trash it out.

With the simplifying the css, how does it know just to simplify just the top and bottom sides?

[w3.org...]
"The 'padding' property is a shorthand property for setting 'padding-top', 'padding-right', 'padding-bottom', and 'padding-left' at the same place in the style sheet.

If there is only one value, it applies to all sides. If there are two values, the top and bottom paddings are set to the first value and the right and left paddings are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively."

[coaster01]

alt131, sorry, but I don't understand your point about width; I'll study it, but would it be possible to post a short snippet illustrating your point? Second question about redundant code: I understand div's are block elements, but there've been plenty of cases where display:block; made a difference -- ie it didn't render properly as a block without it. What could have been going on there? Sorry if this is a topic hijack, mod please move or remove and I'll post elsewhere.

[Xapti]

One important thing to realize when you're catering to multiple resolutions (and similar things) is font size. Not only is font size an important factor in itself, but when you're dealing with screen resolutions down to 800x600, you need to realzie that a certain font might look too large, or pretty good, but at a larger resolution like 1600x1200, it's now 4 times smaller, and is too small to properly read (meaning at a proper distance, and at a proper speed).

Using EMs for your font size is the best way to deal with this situation. You will then be using the browser's default font size as your website's base font size. Headings and captions and things can still be set relatively larger or smaller.
For vertical divisions, such as navigation menus, you can use ems for your width, so that the text will always fit properly, no matter the font size. For the main content area, it should be automatic (flexible) width, using whatever space is remaining for your content. This guarentees that at virtually any screen size, including mobile devices, that at a proper font setting, the site will fit in the screen.

[alt131]

@j05hr

Yeah i know css is what styles html, but the css would be the only place where it's going to define if the site would work on all resolutions no?

Yes - so far as styling via a css (avoiding inline css - which is good). However, HTML elements have their own characteristics and get arranged in a way that affects how they perform, so suggestions reflect the particular code being used. Here you've used divs, so the first is not so relevant. However, the second is because the missing elements made it difficult to identify what your layout was supposed to be - therefore difficult to suggest where/how to apply the css to achieve what you wanted.

mods, please snip my para for completeness too

This is a version of the code without the missing divs. (I've commented in where <div>s close)

<!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=utf-8" />
<title>Title</title>
<link rel="stylesheet" type="text/css" href="?.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="picture"><img src="?.jpg" width="317" height="130" /></div>
<div id="title"><h2>Title</h2></div>
<div id="title2">
<h3>Title2</h3>
</div>
</div><!--end header-->
<div id="time">Time</div>
<div id="container">

<div id="left">
<ul id="nav">
<li><a href="#" title="h">Link</a></li>
<li><a href="#" title="a">Link</a></li>
</ul>
</div><!--end left-->

<div id="center">
<div id="title3"><h1>title3</h1> </div>
<div id="text">
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>
<div id="title3"><h1>title3</h1> </div>
<div id="text">
<p>text<br />
text </p>
<p>Text<br />
</p>
</div>
</div><!--end center-->

<div class="clearer">&nbsp;</div>
</div><!--end container-->
<div id="footer"> <p>&copy;</p>. </div>
</div><!--end wrapper-->
</body>
</html>

@coaster01

... I don't understand your point about width; ... div's are block elements, but there've been plenty of cases where display:block; made a difference ... What could have been going on there? Sorry if this is a topic hijack,

I think this is hijacking the thread, but quickly:
Width: Not put well by me ;) In this example later element widths have been explicitly set to fit within 999px, so just changing div#wrapper won't make all elements "stretch". (See the effects by testing the code I've just posted.)
display:block Examples required to discuss that properly, but also don't confuse with, for example, setting display:block on an inline element to allow the application of dimensions (commonly applied to <a> when making menus).

swa66

These things can and will come back and haunt you in the long run. (I differ quite a bit in opinion with alt131 on that, perhaps best not to fight it out here and agree to disagree instead)

Making posts representing an opinion I have never expressed are nonsense. While I'm delighted you've realised your comments never provoke argumentative behaviour from me, perhaps now consider not making them in the first place.

This is about discussing and assisting with code to improve understanding. The things you identify are not hacks. Whether it is sensible to choose to write code that requires them, whether they are required in this particular code example, how the should be handled if a coder insists on using these sorts of techniques, etc, are quite different issues. But the things you identify are not what is meant by a "hack".

[edited by: swa66 at 11:30 pm (utc) on Dec. 4, 2008]
[edit reason] as requested [/edit]

[swa66]

@alt131: I was merely trying to point out there are differing ideas on the subject to the others. I was actually trying to avoid to trigger you, not trying to provoke you. I obviously failed in that last one. I am sorry about that.

[coaster01]

Thanks, guys. Sorry about the hijack.

[coaster01]

OK - here goes with posting some code - don't go too hard on me. But I took the given html and the original CSS and converted all the widths to percentages, and took a few other liberties to make it work, but it does work and looks about the same. My question: is there anything really wrong doing it this way? And where will my code break down if it's not viable? Thanks.....

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-align: center;
margin: 0px;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;
}

#wrapper {
width: 90%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: auto;
text-align: left;
border: 1px solid #000000;
}

#header {
margin: 0px;
padding: 0px;
height: 130px;
width: 100%;
background-color: #3366CC;
}

#picture {
background-color:#eeeeee;
height: 130px;
width: 317px;
float:left;
}

#title {
padding-top:25px;
height: 35px;
text-align:center;
}

#title2 {
height: 35px;
padding-top:10px;
letter-spacing: 10px;
text-align:center;
}

#time {
width: 98%;
background-color: #CCFF99;
padding-left:2%;
padding-top: 5px;
height: 25px;
}

#container {
padding: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-attachment: scroll;
background-repeat: repeat-y;
background-position: 0px 0px;
height: 1%;
width: auto;
}

#left {
margin: 0px;
width: 15%;
float: left;
background-color: #DFEAF7;
/*padding-left: 5px; */
padding-top: 5px;
height: 1120px;
}

#nav {
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
line-height: 1.8em;
}

#nav li {
margin: 0px;
padding: 0px;
display: block;
background-attachment: scroll;
background-image: url(bullet.gif);
background-repeat: no-repeat;
background-position: 0px 50%;
border-bottom: 2px solid #C0DFFD;
width: 100%;
}

#nav li a:link, #nav li a:visited, #nav li a:active {
color: #666666;
text-decoration: none;
display: block;
margin: 0px;
padding-top: 3px;
padding-right: 15%;
padding-bottom: 3px;
padding-left: 15%;
width: 12%;
background-attachment: scroll;
background-image: url(bullet.gif);
background-repeat: no-repeat;
background-position: 0px 50%;
}

#nav li a:hover {
Background-color:#FF6600;
color: #ffffff;
text-decoration: none;
}

#center {
width: 80%;
float: left;
margin-right: 0px;
margin-bottom: 0px;
line-height: 1.6em;
background-color: #d0e9f5;
padding-top: 25px;
height: 1100px;
padding-left:5%;
}

#title3 {
height: 20px;
width: 90%;
margin-right: 0px;
margin-bottom: 0px;
background-color:#719BFD;
padding-left: 2%;
}

#sub {
height: 20px;
width: 35%;
float: left;
margin-right: 0px;
margin-bottom: 0px;
background-color:#719BFD;
/*padding-left: 10px; */
/*margin-left: 10px; */
}

#text {
width:90%;
background-color:#C8DFEA;
margin-bottom: 20px;
padding-left:2%;
padding-top: 5px;
/*margin-left: 50px; */
/*padding-right: 10px; */
border-bottom: 2px solid #C0DFFD;
}

h1 {
font-size: 12px;
margin: 0px;
padding: 0px;
font-weight: bolder;
}

h2 {
font-size: 24px;
color:#CCFF99;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-decoration: none;
}

h3 {
font-size: 12px;
color:#FF9933;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-decoration: none;
letter-spacing:3px;
}

#right {
height: 599px;
width: 35%;
float: left;
margin-right: 0px;
margin-bottom: 0px;
line-height: 1.6em;
background-color: #d0e9f5;
padding-top: 25px;
/*padding-left: 20px; */
}

#new {
height: 519px;
background-color: #d0e9f5;
float: left;
width: 15%;
/*padding-left: 20px; */
padding-top: 105px;
line-height: 1.8em;
}

.clearer {
font-size: 0px;
line-height: 0px;
display: block;
margin: 0px;
padding: 0px;
clear: both;
height: 0px;
width: auto;
}

#footer {
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
text-align: center;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 15px;
padding-left: 0px;
background-color: #3366CC;
width: 100%;
}

#footer p {
color: #999999;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
}

#footer a:link, #footer a:visited, #footer a:active {
color: #999999;
text-decoration: none;
}

#footer a:hover {
color: #CCCCCC;
text-decoration: none;
}

[j05hr]

I set all my widths to fit the whole page using percentages too but when you restore the page, the divs don't stay in place and move around depending on the size of the screen? Can post the css if needed.

[coaster01]

They do that because when you add up the widths they come out to more than 100% and when that happens, and they're floating, then the ones that come after float under the ones that come before. You'll notice that I also took out all the fixed horizontal margins and padding, and substituted variable padding. I used padding so you still fill the area with the background color. Make sure you don't have any fixed horizontal width properties.

The image is still fixed width because it's coded as an <img src= so that's a bit of a problem but if it's the type of image where you could use it as a background image, then you could also make that box variable width. The only problem there is that at reduced widths your image would only partly show. If you know javascript, then I suppose there's a way you could use img and change the width and height to scale as the screen resizes, but I don't know how to do that and it would affect how good your image looks.

I suppose you could ditch the floats and fix the boxes in place with relative/absolute positioning, and solve the line break by putting the subsequent boxes inside the first box, but frankly, that's starting to get pretty complicated.

My solution only comes from my own experience with CSS and there's a lot about it I don't know and I'm certainly neither a professional nor well-experienced. But it works for me, and if it works, that's what I'd use until I find something better. ;-)

[coaster01]

OK, this is kind of an interesting problem, so I screwed around with a relative/absolute positioning scheme, and maybe that will solve your problems, too. And this is again using alt131's html template:

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-align: center;
margin: 0px;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;
}

#wrapper {
width: 90%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: auto;
text-align: left;
border: 1px solid #000000;
position:relative;
}

#header {
height: 130px;
width: 100%;
background-color: #3366CC;
}

#picture {
background-color:#eeeeee;
height: 130px;
width: 318px;
position:absolute;
left:0;
top:0;
}

#title {
position:absolute;
left:50%;
top:25px;
}

#title2 {
position:absolute;
top:60px;
left:50%;
letter-spacing: 10px;
}

#time {
background-color: #CCFF99;
padding-left:2%;
padding-top: 5px;
height: 25px;
}

#container {
padding: 0;
margin:0;
width:100%;
background-attachment: scroll;
background-repeat: repeat-y;
background-position: 0px 0px;
height:1120px;
}

#left {
margin: 0px;
width: 15%;
float:left;
background-color: #DFEAF7;
height: 100%;
}

#nav {
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
line-height: 1.8em;
}

#nav li {
margin: 0px;
padding: 0px;
display: block;
background-attachment: scroll;
background-image: url(bullet.gif);
background-repeat: no-repeat;
background-position: 0px 50%;
border-bottom: 2px solid #C0DFFD;
width: 100%;
}

#nav li a:link, #nav li a:visited, #nav li a:active {
color: #666666;
text-decoration: none;
display: block;
margin: 0px;
padding-top: 3px;
padding-right: 15%;
padding-bottom: 3px;
padding-left: 15%;
width: 12%;
background-attachment: scroll;
background-image: url(bullet.gif);
background-repeat: no-repeat;
background-position: 0px 50%;
}

#nav li a:hover {
Background-color:#FF6600;
color: #ffffff;
text-decoration: none;
}

#center {
width: 79%;
margin: 0;
line-height: 1.6em;
background-color: #d0e9f5;
height: 100%;
padding-left:3%;
padding-right:3%;
float:right;
position:relative;
}

#title3 {
position:absolute;
height: 20px;
width: 95%;
background-color:#719BFD;
left: 2%;
padding-left:2%;
top:20px;
}

#sub {
height: 20px;
width: 35%;
float: left;
margin-right: 0px;
margin-bottom: 0px;
background-color:#719BFD;
}

#text {
position:absolute;
width:95%;
background-color:#C8DFEA;
margin-bottom: 20px;
left:2%;
top: 45px;
padding-left:2%;
border-bottom: 2px solid #C0DFFD;
}

h1 {
font-size: 12px;
margin: 0px;
padding: 0px;
font-weight: bolder;
}

h2 {
font-size: 24px;
color:#CCFF99;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-decoration: none;
}

h3 {
font-size: 12px;
color:#FF9933;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-decoration: none;
letter-spacing:3px;
}

#right {
height: 599px;
width: 35%;
float: left;
margin-right: 0px;
margin-bottom: 0px;
line-height: 1.6em;
background-color: #d0e9f5;
padding-top: 25px;
/*padding-left: 20px; */
}

#new {
height: 519px;
background-color: #d0e9f5;
float: left;
width: 15%;
/*padding-left: 20px; */
padding-top: 105px;
line-height: 1.8em;
}

.clearer {
font-size: 0px;
line-height: 0px;
display: block;
margin: 0px;
padding: 0px;
clear: both;
height: 0px;
width: auto;
}

#footer {
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
text-align: center;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 15px;
padding-left: 0px;
background-color: #3366CC;
width: 100%;
}

#footer p {
color: #999999;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
}

#footer a:link, #footer a:visited, #footer a:active {
color: #999999;
text-decoration: none;
}

#footer a:hover {
color: #CCCCCC;
text-decoration: none;
}

There's one remaining problem: using this CSS, the title will ride over the image to its left when the user narrows the screen width. That I don't know how to fix. Hopefully someone who knows will post.

Well, not without adding another div, anyway. Putting another div around the titles, like so:

<div id="header">
<div id="picture"><img src="?.jpg" width="317" height="130" /></div>
<div id="title-box">
<div id="title"><h2>Title</h2></div>
<div id="title2">
<h3>Title2</h3>
</div>
</div>
</div><!--end header-->

#title-box {
margin-left:318px;
height:100%;
}

#title {
width:100%;
text-align:center;
margin-top:25px;
}

#title2 {
width:100%;
margin-top:15px;
text-align:center;
letter-spacing: 10px;
}

should take care of that -- but -- I haven't tested it on all browsers.

[alt131]

@coaster01

And this is again using alt131's html template:

This is not a template designed by me - it is j05hr's code, corrected by reinserting the end tags that had been accidentally deleted from code originally posted, with comments added to make the containing divs easier to identify for those trying to assist.

Correct / accurate attributions are important - professional courtesy, professional integrity and, sometimes, for legal reasons

I expect you meant to identify which code example you were using, not talk about who designed the code itself. Something like:

"I have been using the corrected and commented xhtml posted by alt131", or
"I have been using the code from #3800359"

would do that. ;)

[coaster01]

Yes, thank you, that's what I meant. Though I'm pretty sure almost anyone reading the entire thread would know that. It was mentioned to distinguish WHICH code, not to identify the author. Since Josh was the original author, which is clear when one reads the thread from the beginning, if I didn't point that it was the ammended html code the CSS referred to, he might have thought I was referring to his original code. I'll try to be more specific in the future.

[j05hr]

Sorry I've been busy so haven't been able to post.

Here is the original code html.

<!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=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css"
href="focus.css" />
</head>
<body>
<div id="wrapper">
<div id="header">< /></div>
<div id="time">
</div>
<div id="container">
<div id="left">
<ul id="nav">
</div>
<div id="center">
<div id="title3">
 
</div>
<div id="subheader">
>
</div>
<div id="text">
</div>
<div id="subheader">
</div>
<div id="text"></div>
<div id="title3"></div>
<div id="subheader"></div>
<div id="text">
</div>
<div id="title3">
</div>
<div id="subheader"></div>
<div id="text">
</p>
</div>
<div id="subheader">
</div>
<div id="text">
</div>
<div id="subheader">
</div>
<div id="text">
</div>
<div id="subheader">
</div>
<div id="text">
</div>
</div>
<div class="clearer"></div>
</div>
<div id="footer">
 
</div>
</div>
</body>
</html>

coaster01 your css worked exactly how I meant in the original post. My question is though, if I add loads of text, when it gets to the end of the background colour, will the background carry on going down with the text? Because with the fixed heights I was using if you add more text the background stays at the fixed height. I tried this myself but for some strange reason when I added text it wouldn't let me save it over the top of yours.
Thanks for the help.

[coaster01]

I don't have time to pretty it up, but I think I got it working like you want, although I don't know how many titles and how much text. Basically I put your background color for the center box in the wrapper, made the outside boxes height:100%, put the titles inside the text box, made the text box relative positioning. Now you can put as much text in there that you want and the height stretches to accomodate the text. I'm sure there are more "elegant" ways to do what I did.

<!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=utf-8" />
<title>Title</title>
<style type="text/css">

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-align: center;
margin: 0px;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;
width:100%;
height:100%;
}

#wrapper {
width: 90%;
height:100%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: left;
background-color: #d0e9f5;
border: 1px solid #000000;
position:relative;
}

#header {
height: 130px;
width: 100%;
background-color: #3366CC;
}

#picture {
background-color:#eeeeee;
height: 130px;
width: 317px;
position:absolute;
left:0;
top:0;
}

#title-box {
margin-left:318px;
height:100%;
}

#title {
width:100%;
text-align:center;
margin-top:25px;
}

#title2 {
width:100%;
margin-top:15px;
text-align:center;
letter-spacing: 10px;
}

#time {
background-color: #CCFF99;
padding-left:2%;
padding-top: 5px;
height: 25px;
}

#container {
padding: 0;
margin:0;
width:100%;
height:100%;
}

#left {
margin: 0px;
width: 15%;
float:left;
background-color: #DFEAF7;
height: 100%;
}

#nav {
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
line-height: 1.8em;
}

#nav li {
margin: 0px;
padding: 0px;
display: block;
background-attachment: scroll;
background-image: url(bullet.gif);
background-repeat: no-repeat;
background-position: 0px 50%;
border-bottom: 2px solid #C0DFFD;
width: 100%;
}

#nav li a:link, #nav li a:visited, #nav li a:active {
color: #666666;
text-decoration: none;
display: block;
margin: 0px;
padding-top: 3px;
padding-right: 15%;
padding-bottom: 3px;
padding-left: 15%;
width: 12%;
background-attachment: scroll;
background-image: url(bullet.gif);
background-repeat: no-repeat;
background-position: 0px 50%;
}

#nav li a:hover {
Background-color:#FF6600;
color: #ffffff;
text-decoration: none;
}

#center {
width: 79%;
margin: 0;
line-height: 1.6em;
height: 100%;
padding-left:3%;
padding-right:3%;
float:right;
position:relative;
}

#title3 {
height: 20px;
width: 95%;
background-color:#719BFD;
padding-left:2%;
margin-top:20px;
}

#sub {
height: 20px;
width: 35%;
float: left;
margin-right: 0px;
margin-bottom: 0px;
background-color:#719BFD;
}

#text {
position:relative;
width:95%;
heigh:auto;
background-color:#C8DFEA;
margin-bottom: 20px;
left:2%;
padding-left:2%;
border-bottom: 2px solid #C0DFFD;
margin-top:20px;
}

h1 {
font-size: 12px;
margin: 0px;
padding: 0px;
font-weight: bolder;
}

h2 {
font-size: 24px;
color:#CCFF99;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-decoration: none;
}

h3 {
font-size: 12px;
color:#FF9933;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-decoration: none;
letter-spacing:3px;
}

#right {
height: 599px;
width: 35%;
float: left;
margin-right: 0px;
margin-bottom: 0px;
line-height: 1.6em;
background-color: #d0e9f5;
padding-top: 25px;
/*padding-left: 20px; */
}

#new {
height: 519px;
background-color: #d0e9f5;
float: left;
width: 15%;
/*padding-left: 20px; */
padding-top: 105px;
line-height: 1.8em;
}

.clearer {
font-size: 0px;
line-height: 0px;
display: block;
margin: 0px;
padding: 0px;
clear: both;
height: 0px;
width: auto;
}

#footer {
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
text-align: center;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 15px;
padding-left: 0px;
background-color: #3366CC;
width: 100%;
}

#footer p {
color: #999999;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
}

#footer a:link, #footer a:visited, #footer a:active {
color: #999999;
text-decoration: none;
}

#footer a:hover {
color: #CCCCCC;
text-decoration: none;
}

</style>

</head>
<body>
<div id="wrapper">

<div id="header">
<div id="picture"><img src="?.jpg" width="317" height="130" /></div>
<div id="title-box">
<div id="title"><h2>Title</h2></div>
<div id="title2">
<h3>Title2</h3>
</div>
</div>
</div><!--end header-->

<div id="time">Time</div>

<div id="container">

<div id="left">
<ul id="nav">
<li><a href="#" title="h">Link</a></li>
<li><a href="#" title="a">Link</a></li>
</ul>
</div><!--end left-->

<div id="center">

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

</div><!--end center-->

<div class="clearer">&nbsp;</div>

</div><!--end container-->

<div id="footer"> <p>&copy;</p>. </div>

</div><!--end wrapper-->

</body>
</html>

[coaster01]

PS - the reason your extra text didn't show was because that text box was positioned absolutely with respect to its container box in both top and left. If your text is fixed, you could just handle that by changing the top property for each text box. I think being able to handle variable amounts of text is a better idea, though. So then subsequent boxes should be spaced with respect to the box above them, not absolutely.

[j05hr]

That code is brilliant it's exactly what I wanted thanks! The only thing is, in IE when adding more links on the left, the divs from the middle go down as you add links? Also is there a way to make the background on the left run all the way to the bottom, the same as the center div instead of stopping where the buttons finish?

Thanks

[coaster01]

That box isn't going to want to go to the bottom unless there's content down there. Just a thought: do you really want an empty box running along one side? Here's what I did real quick and I think it looks pretty nice: put the background color you have for left into container and then just let the links float to the left on the background.

Otherwise, I'll have to wait until I have some time to play with it. There's gotta be a way, but I'm no expert, certainly not brilliant, my coding at this point is just do what it takes to make it work.

[coaster01]

OK, whew! Got it. It's ugly and it's dirty, but it works. You can clean it up. Basically what I did was to put another box under everything in the center that had the background color for the nav links on the left. Then I layered another on top of that and floated it right. The nav links and text boxes inside another box with the links floated left and the text floated right. So, you've got your columned look with the nav panel running top to bottom on the left adjacent to the content panel on the right; everythiing nicely set off with "white space".

NOTE - much of the styling is "inline" I've spent enough time on this, you can transfer it to a stylesheet.

Now, you experienced guys please be kind; I'm self taught; pretty everything I had to figure out through trial and error. I think I finally understand how the DOM works; now I need to clean up my act and do thiings the "right" way. But for now, this way works. ;-)

<!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=utf-8" />
<title>Title</title>
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-align: center;
margin:0;
padding:0;
width:100%;
height:100%;
}

#wrapper {
width: 90%;
height:100%;
margin:0 auto;
text-align: left;
background-color: #d0e9f5;
border: 1px solid #000000;
}

#header {
height: 130px;
width: 100%;
background-color: #3366CC;
}

#picture {
background-color:#eeeeee;
height: 130px;
width: 317px;
background-position:left top;
float:left;
}

#title-box {
margin-left:318px;
height:100%;
}

#title {
width:100%;
text-align:center;
padding-top:10px;
}

#title2 {
width:100%;
margin-top:15px;
text-align:center;
letter-spacing: 10px;
}

#time {
background-color: #CCFF99;
padding-left:2%;
padding-top: 5px;
height: 25px;
}

#leftside {
padding:0;
float:left;
width:13%;
margin:0;
margin-top:0;
}

#nav {
margin:1%;
width:90%;
list-style-image: none;
list-style-type: none;
line-height: 1.8em;
float:left;
}

#nav li {
margin: 0px;
padding: 0px;
display: block;
background-image: url(bullet.gif);
background-repeat: no-repeat;
background-position: 0px 50%;
border-bottom: 2px solid #C0DFFD;
width: 100%;
}

#nav li a:link, #nav li a:visited, #nav li a:active {
color: #666666;
text-decoration: none;
display: block;
margin: 0px;
padding-top: 3px;

padding-bottom: 3px;

width: auto;
}

#nav li a:hover {
Background-color:#FF6600;
color: #ffffff;
text-decoration: none;
}

#centerbox {
width: 100%;
margin:0;
line-height: 1.6em;
height: 100%;

}

#title3 {
height: 20px;
width: auto;
background-color:#719BFD;
padding-left:1%;
}

#sub {
height: 20px;
width: 35%;
float: left;
margin-right: 0px;
margin-bottom: 0px;
background-color:#719BFD;
}

#text {
width:96%;
height:auto;
background-color:#C8DFEA;
border-bottom: 2px solid #C0DFFD;
margin:1%;
padding-left:1%;
padding-right:1%;
padding-top:1%;
float:right;
}

h1 {
font-size: 12px;
margin: 0px;
padding: 0px;
font-weight: bold;
}

h2 {
font-size: 24px;
color:#CCFF99;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-decoration: none;
}

h3 {
font-size: 12px;
color:#FF9933;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-decoration: none;
letter-spacing:3px;
}

.clearer {
font-size: 0px;
line-height: 0px;
display: block;
margin: 0px;
padding: 0px;
clear: both;
height: 0px;
width: auto;
}

#footer {
margin:0;
text-align: center;
padding:15px 0;
background-color: #3366CC;
width: 100%;
clear:both;
}

#footer p {
color: #999999;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
}

#footer a:link, #footer a:visited, #footer a:active {
color: #999999;
text-decoration: none;
}

#footer a:hover {
color: #CCCCCC;
text-decoration: none;
}

</style>

</head>
<body>
<div id="wrapper">

<div id="header">
<div id="picture"><img src="?.jpg" width="317" height="130" /></div>
<div id="title-box">
<div id="title"><h2>Title</h2></div>
<div id="title2">
<h3>Title2</h3>
</div>
</div>
</div><!--end header-->

<div id="time">Time</div>

<div id="centerbox">

<div style="background-color:#eeeeee;float:left;">

<div id="leftside">

<ul id="nav">
<li><a href="#" title="h">Link</a></li>
<li><a href="#" title="a">Link</a></li>
</ul>

</div>

<div style="background-color:#d0e9f5;float:right;width:83%;">

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

<div id="text">
<div id="title3"><h1>title3</h1> </div>
<p>Text<br />
text </p>
<p>Text<br />
</p>
</div>

</div>

</div>

</div><!--end center-->

<!-- <div id="clearer"></div> -->

<div id="footer"> <p>&copy;</p>. </div>

</div><!--end wrapper-->

</body>
</html>

PS - renders acceptably and gives same presentation on both IE6 and compliant browsers; IE6, Chrome and Firefox tested.

[j05hr]

haha first thing i did was go and see what it looked like in all the browsers then went to test it in IE 7 and this is what it came up with.

<snip>

You wouldn't think just a new version of a browser would make it look so different. I don't have IE 6 so don't know how it came out on that but you said they all looked the same?

[edited by: swa66 at 6:50 pm (utc) on Dec. 11, 2008]
[edit reason] No URLs please post descriptions and see forum charter [/edit]

[coaster01]

I didn't check it on IE7 because that's on my laptop and I hate using Vista. The reason for that problem is that it's rendering the horizontal dimensions differently. I got it work fine on IE7 as well as the other browsers by changing some of the width properties. Also, "id" should only be used once on each page, though I don't know if that contributed to the problem on not.

[bluesmandeluxe]

I've been working with liquid/elastic layouts for a while and still have "issues" every now and then. However, here are the two most important factors:

1. position:absolute should never be used for any wire-frame layout (fixed or liquid). It is buggy across browsers new and old and can be blown up easily from platform/browser and resolution.

2. For the wire-frame layout use must use floats for columns.

3. FONTS - lose pixel based font sizes - IE6 doesn't resize fixed fonts if the user has set the browser text size to "larger". Forcing someone with visual impairments to try to read your small fixed font is rude - and for business not smart.

Setting your body font size at 1em does not give you a relative baseline different than the browser default size (give or take IE @16 pixels, Safari @ 13 pixels, firefox @ 14 pixels).

Using 1em in the body font-size is the same as using 100% - it says use the browser's default as a baseline (which is widely different across browsers).

I personally prefer using the keyword "small" which is somewhat more relative across browsers (although still a little large in general @ 14px across the board). I adjust it by creating a page wrap with a font-size of .9em - which means 1em is thereafter equal to .9em of small (@12px) - thereafter always size text using em.

No one has figured out the perfect relative size ratio yet - although some have come close (until you get beyond two levels deep), for example:

There is a brilliant solution that makes rendering .ems exactly relative to pixels using an easy to use base-10 system.

Setting the body tag font-size at 62.7% is similar to @ 10px. A little small. However, now you can use an em size based on the actual base 10 "relative" font size you want - since 1em equals @ 10px, 1.2 em equals @ 12px and so on:

1em = 10px
1.2em = 12px
1.4em = 14px
2.0em = 20px
etc.

This is genius ... well, until you get two levels embedded into a box and change the font size.
If you are in a box with a font size of 1.2em (12px) and embed a new box with a size of 1em, 1em is no longer based on 10, it is based on a percentage larger - which means 1em now becomes based on 1.2em and not a clean base 10.

Used carefully the 62.7% body size works like magic. But once you lose the base 10 the confusion is worse than this explanation!

4. The real tricky part of a multi-column wire-frame layout is floating properly - you must learn to "clear" your floats the right way,as well.

It would take too long to explain proper floating techniques, but for those who are serious about this a great book for wire-framing is "Bulletproof Web Design - 2nd Edition" by Dan Cederholm.

<snip> is a website dedicated to displaying cool liquid layouts.

One of my liquid sites is <snip>. Feel free to copy and paste the css and html if you want to play with it. LOL, it uses an old cheesy css based non-graphic "rounded corners" technique.

Good luck,
Dave

[edited by: swa66 at 11:24 pm (utc) on Dec. 11, 2008]
[edit reason] No URLs, please see forum charter. [/edit]

[coaster01]

Hi Dave - obviously you know what you're talking about, but the language is a bit too technical for us amateurs. I have no idea what a "wire-frame layout" is, for example. ;-) I don't get the part about setting the body tag font at 62.7% -- how can a font be set at 62.7% of something that hasn't even been declared? But I'll give it a shot and see what happens. Floats: ya, I sure would love a tutorial on proper use. I'm still not sure when to use left and right. So, pretty much I just throw one in to see if it works when a box doesn't float properly. Rude websites: some of Microsoft's sites are the worst! And I don't even have a vision impairment. Sorry your urls got snipped. :-(

[j05hr]

Hi Coaster, I've bought this book suggested by Dave and i'll now attempt to answer all your questions. I'm not about wire frame layouts. For the fonts, what you do is declare the font in keywords e.g small medium etc. In the book they use small and 90% and they did use the ems version as well like Dave so hope that clears that up for you. For the float left and right here is a url from the book <snip> Hope this helps coaster.

[edited by: swa66 at 12:46 pm (utc) on Jan. 1, 2009]
[edit reason] No URLs, please see forum charter [/edit]

[coaster01]

Thanks -- I've eliminated pixel-based font sizes, using the percentage suggested in Dave's post, and it's been working quite well for me. I figured out that the percent was a percent of the browser's default font size, which is way too large to start with. 70% is what I've been using as the declared body font size. But I have run across the problem he mentioned and that needs extra CSS to counteract the effect, and so next I'm going to try using just the keyword. The one problem remaining is my font-resizing function. Small-medium-large doesn't give much of a range.

[j05hr]

No the way in which you do it, is use the keyword as your actual size and then you use percentage to do the size of the font, so for example if you set the keyword to small and then if you want the font to be a large title you set the percentage to like 150% of the size of the keyword (which is about right if you use the size as small.)

I bought the book Dave recommended and i can't recommend it highly enough for people like us. What it does is, take examples of things that arn't bulletproof like fonts in pixels and navigation and things like that and then he does a whole bulletproof site.