Switching to CSS Layout

**drhowarddrfine** · May 3 '08, 05:35 PM

This will be easier than you think but there's a lot to explain. You want to start with a bird's eye view of the page and organize the page into sections. Those sections can be contained in divs. One thing you will have to force yourself to do is not thinkin "tables mode".

Forget CSS for now. CSS is for styling the page, not organizing it. Just get your html together first.

Right away, you can tell you have 4 sections. The header at the top, the right and left columns, and a footer at the bottom.

<div id="header"></div>
<div id="sidebar"></div>
<div id="content"></div>
<div id="footer'></div>

The header div only contains an image so we might not even need that one, but put the image in there for now. Fill those other divs with their content without regard to positioning. For example, the welcome box is just a paragraph, or maybe a heading <h3>. The navigation in the sidebar is a list of links, so:
<ul>
<li><a href="">Home</a></li>
<li><a href="">Homes for rent</a></li>
</ul>

and so on.

Look to see what the page looks like with CSS turned off. It should flow and make sense just like that. Pretend you're trying to navigate the page just as it is.

Once that's all collected, then we can worry about placement and "liquidity" .
(more in a minute)

**drhowarddrfine** · May 3 '08, 05:45 PM

Once that's together, you can look at sizing the divs and their content. For liquid layouts, it needs to be done with percentages. The sidebar can be set at width:33% while the content div is set to 67%; but be careful of margins and padding and borders that might cause the total width to be wider than the width of the screen which will cause a div to drop below the other one.

Look into "floats" if you don't understand them. Also, read up on relative positioning and absolute positioning. Keep in mind that using all those methods removes that element from the normal flow of things but remains contained within any "parent positioned" elements.

I cannot emphasize this part enough: DO NOT USE Internet Explorer AS YOUR TEST BROWSER. It is10 years behind web standards and wrong in many parts of its implementation! It will cause your more grief and confusion than you can imagine.

Use Firefox, Opera or Safari for your initial test. Then keep checking to see if IE screws it up; but the bugs and quirks of IE are known, as are the hacks to fix it.

The web developers preference is to use Firefox with the Web Developer Toolbar installed. As you learn more, you should install Firebug, too.

Validate your page often to check for errors. There is no need for any web site to have validation errors on its site. (The current page has 51 HTML errors and 12 CSS errors)

**trvmcnevan** · May 4 '08, 01:12 AM

I appreciate the quick response. I went back and tried to use your method -- it's amazing what a fresh look at things will do.
I am happy with the progress, but hit a wall again. I uploaded the new page at http://jimrents.com/newlayout/index.php .
Right now I have two problems. The first being that the two columns will contain images and objects with set widths, making the main content column wrap to the next line when the browser is resized. I would like the two columns to remain liquid, but also to not move when the browser is resized (like a table would behave). The second problem is that the link bar's height does not extend with the other column's height. Any solutions for these problems? CSS included below.
Thanks for the help.

Code:

/** Body Stuff **/
body{
	margin:0;
	padding:0;
	background:none;
	color:#000000;
}
contentContainer{
	background:#FF00FF none;
	color:#000000;
	margin:0;
	padding:0px;
}

/** DIV Definitions **/
div#header{
	width:100%;
	background:#000000 none;
	color:#000000;
}
div#sidebar{
	width:28%;
	min-width:225px;
	background:#00008B none;
	color:#000000;
	float:left;
}
div#content{
	width:72%;
	min-width:510px;
	background:#F0E68C none;
	color:#000000;
	float:left;
}
div.breaker{
	clear:both;
}
div#footer{
	width:100%;
	background:#000000 none;
	color:#000000;
}

Originally posted by drhowarddrfine

Once that's together, you can look at sizing the divs and their content. For liquid layouts, it needs to be done with percentages..

**drhowarddrfine** · May 4 '08, 01:19 AM

A few things first.

1) Get a proper doctype. You will never get IE to attempt to perform like modern browsers without one. See the article about doctypes under Howtos in the html section above.

2) Don't use <br> to create space.
3) Closing tags that end in /> are for xhtml only.
4) min-/max- anything doesn't work in IE.
5) height/width acts like min-height/width in IE. Go figure.
6) Percentage width/height is a percentage of what? It's parent. But what is the parent set to? It must have a dimension, too.

Equal height columns can be a bug-a-boo but solvable.
Keeping the two columns side by side will require you to set the min-width on either the body or a a wrapper div around those two elements and not those two columns themselves.

**trvmcnevan** · May 4 '08, 03:57 AM

Originally posted by drhowarddrfine

A few things first.

1) Get a proper doctype. You will never get IE to attempt to perform like modern browsers without one. See the article about doctypes under Howtos in the html section above.

2) Don't use <br> to create space.
3) Closing tags that end in /> are for xhtml only.
4) min-/max- anything doesn't work in IE.
5) height/width acts like min-height/width in IE. Go figure.
6) Percentage width/height is a percentage of what? It's parent. But what is the parent set to? It must have a dimension, too.

Equal height columns can be a bug-a-boo but solvable.
Keeping the two columns side by side will require you to set the min-width on either the body or a a wrapper div around those two elements and not those two columns themselves.

Thanks again for the help. Sorry for the endless questions...
Alright, I assigned a min-width to the container instead of the two elements and got them to stay side by side. However, now the content seems to flow out of the elements when the page is resized. What's the deal with that?

As for the other points - I was planning on adding doctype etc. when I got the code fully working, but I guess I'd better do it soon before I forget..

**drhowarddrfine** · May 4 '08, 05:42 AM

The doctype is the very first thing that goes on a page before anything else. It is never something to be put off till later.

The image is a fixed size and can't resize unless you set it to a percentage, too, or make the min-width larger.

Better yet, just remove the container/wrapper and set the body to that min-width.

**trvmcnevan** · May 5 '08, 06:19 AM

Ok, so after four days of stress and a lot of extra help, I finally have a layout the way I want it!
A million thanks to you for sticking with me and my questions all the way through.
Unfortunately, I have one more question on the topic. I have been searching, but am unable to find a solution for it. Is there an IE workaround for min-width that doesn't involve JS? I would like to keep the site as free of JS as possible and the only time I use min-width in the layout is for the body (to keep the divs from wrapping).
I came up with a solution that makes the layout in IE have fixed widths, but I'd really rather keep it fluid in IE as well (much of the target audience uses IE).
Thanks for the help.
The page is still at http://jimrents.com/newlayout/index.php

Switching to CSS Layout

Switching to CSS Layout

Comment

Comment

Comment

Comment

Comment

Comment

Comment