no idea where to get started on this layout

My first comment is why have you posted up the first attempt at this and yet are not fully prepared with a complete and proper Doctype in place, you should realise that we consider this important and bang on about it repeatedly.

As for FF not working, take a look at your inline styling and remove the errors, it pays to check syntax carefully when things don't work.

If possible don't work to a 1000px width, it's too wide, work to something that accommodates 800px browsers.

I really don't see why you have not made an attempt at the layout using CSS, it would have been better to present us with at least your attempts at it, however borked, rather than the table layout.

Remove all the table elements. Actually use the #wrapper element that you have designated in the styles as your first parent container
allow the header to take up the natural width of the wrapper, if using fixed heights try to keep them flexible with em units

Create and name two divs to follow the header in the flow float one left as your main content, you already have the rules for it's overflow, and possibly float the other right ( you will need to have a look through some tutorials on floating layouts to arrive at the method that best suits your purpose)

Create another div after the content divs and give it clear:both to clear the content above it. In this create 4 divs floated left .

Have a go at starting the layout move your inline styling to the main styles, give IDs to the main elements so that you can target them, work with the flow of the page main elements either floated or default position.

This isn't a difficult layout so have a crack at it and let us look at how you have got on, we can then sort out problems that may arise.

Hugo.

Hugo, thanks!
I will repost when i've made an attempt

Hugo, i took your advice and took a crack at it.
It wasn't as hard as i thought it would be, and i actually got a good part of it developed
http://www.earthbound-misfit.com/random/v4/v4_css.html
The only problem right now, is that i need to make the left column of the middle section to not stretch all the way down, but to start scrolling. I've tried it with height, min-height and overflow attributes, but i can't quite get it to work right.
Any suggestions?

The only problem right now, is that the backgrond color of the #middle div is only showing up in IE and not firefox. I did validate my HTML and my CSS

Remove

<?xml version="1.0" encoding="iso-8859-1"?>

it throws IE into Quirks Mode.

The background-color sounds like you're not clearing your floats.

Add this: overflow:auto; to the div thats not showing the bg color.

adding overflow:auto; now does display the background, thanks!

i am not sure what quirks mode is, so i need to do a bit of reading on that

so, from here, how would i go about sticking the footer at the bottom of the page, and making the left middle column scrollable is it's length goes over the length of the page?

Well I did say it wasn't a very difficult layout you're almost there with it.

The left column needs a fixed height for the auto scrolling to work and content that exceeds that height. So setting the height of the div to say 300px will cause the contents to scroll, 300px on the right column will bring that in line with the left if required.

The background of #middle is not visible due to the fact that the float elements are out of the flow and do not cause their parent to expand you need to clear the #middle. Use this code and place the class .clearfix on the #middle tag in the html

.clearfix:after { 
  display:block; 
  content:"."; 
  height:0; 
  visibility:hidden; 
  clear:both; 
} 
.clearfix {display:inline-table;}/* for IEMac only */ 
 
/* this line hides these rules from IEMac \*/ 
* html .clearfix{height:1%;} 
.clearfix {display:block;} 
/* end hide from IEMac */

Of corse the background will still be obscured if both floated children take up all the height set the right column to a smaller height than the left and you should see the red background.

On the wrapper you could set the margins to margin:0 auto; then you will have a centred wrapper in IE6 and compliant browsers.

Hugo.

Hugo, thanks
First of all, i am not really worried about seeing the red background, i was just stating that IE shows it and FF doesn't. And i am not sure how i should add that code you gave me. Just add the CSS to my style tag and have my div look like this?
<div id="middle" class="clearfooter">

OK, so now it scrolls, if i use fixed height. Here comes the hard part then:

Is there a way to push the footer all the way to the bottom, no matter the length of the middle section? And if the middle gets too long, that's when i want the scroll to appear. I don't want to design to an 800x600 resolution, 600px of height, is not nearly enough for me.

I want this design to be fluid. I want to fix the width, since pages that take up all 1600px on my monitor in width are usually harder to read. But i want it to take up as much heght as it can.

The class is added as class="clearfix" in my example.

I'm not sure how you are seeing this layout working this scroll bar needs a fixed height in order to work, at some point you have to decide how tall you want the div to be.

With the footer you could try making the footer position absolute bottom 0 in the wrapper then it will sit at the bottom wrapper needs to be positioned relative. when the #middle expands to meet the footer it would normally slide behind the footer, you could try using the clearfix div as a padding element that has the same height as the footer this way the content columns coming before the clearfix div would be kept from going any lower than the top of the footer, you would need to test this cross browser, alternatively read this example of using another floated element to act as a vertical spacer the height of the wrapper less the footer height:
http://www.csscreator.com/css-forum/ftopic9291.html

#wrapper
		{
    position:relative;
    min-height:100%;
    background-color:#DDDDDD;
    width:800px;
    padding:0;
    margin:0 auto;
    height:auto;
}
#middle
		{
		width:800px;
		background-color:red;
}
#footer{
    position:absolute;
    bottom:0;
    height:175px;
    width:800px;
    margin-top: 3px;
    background-color:#9999FF;
    margin:0;
}
.clearfix:after {
  display:block;
  content:".";
  height:175px;
  visibility:hidden;
  clear:both;
}

EDIT: forget the above code it won't work in IE, you would need an actual div to act as a padding element, check out the the link above, the float spacer method is more appealing.

Remember that fixed heights on the columns mean that they can not expand in compliant browsers and will just overflow their contents.

Footers are a tricky thing to deal with you need to be sure of what you want here and whether it can be achieved.

Hugo.

hugo, thanks for that clarification.

so, it sounds like i am stuck with a fixed height if am to use stylesheets? That means i would have to pick a lowest resolution to design to.
i really don't want to design to 800x600
stepping up to 1024x768 is also not very good, and doesn't give me a whole lot to work with.
If i DO end up on sticking with fixed, i could easily used fixed positioning for all my DIVs. I am not sure if that's a good technique though, but that would sure eliminate the need for wrappers.

In the interest of full disclosure, I haven't followed the thread all that closely.

What is the concern with fixed heights? Leave the height alone, especially that of any overall wrapper, and the page and its elements will find their natural height based on content. If it runs longer than the viewport (browser window), the browser will give you a scrollbar. You must take extraordinary steps to nullify that behavior.

Without compelling reason otherwise, let your design flow.

cheers,

gary

Gary the fixed height was in respect of an auto scrolling leftcolumn div.

The problem is that if one wants that div to auto scroll it's contents then at some point you will need to fix the height of that div and that means that you force a height to your layout either smallish at less than the viewport area or greater than the height of the viewport area, either way it is a limitation to the notion that you keep mentioning of a fluid design, Gary rightly questions the reason for fixed height and it is what I have been trying to imply is it really what your after ? you may be confused as to how auto scrolling a div will work, you certainly can't say "at some point you would like the div to scroll it either does or it doesn't and at the height that you set. This would also make the idea of a footer at the bottom of the viewport slightly redundant unless the scrolling div was always going to be fixed to a height not greater than the viewport.

i'll play around, but it looks like i can only achieve what i am looking with a table. I really wanted to have a 100% CSS site *sight*

thank you for that loveley picture
does that mean you can help me figure out this problem?

Hugo, thanks for the clarification. I went back and reread the thread. Post number 8 is telling,

Wmp, what is so important about the header and footer areas that they must be in the viewport no matter what? People expect to scroll vertically to reach different parts of the content. They do not expect to scroll a single section on well built sites.

I can pretty much guarantee your visitors will prefer to scroll the page rather than what you're proposing.

If you insist on going that route, you will probably be better off going with a table layout, not because css can't do it, but because IE does not support css2. If you go with a fluid design, I've posted to a few threads recently dealing with the footer issue. A search should locate them and others.

cheers,

gary

Have a look at these big websites:

http://www.yahoo.com/
http://www.msn.com/
http://www.google.co.uk/
http://login.passport.net/uilogin.srf?lc=2057&id=2
http://www.bbc.co.uk/

How many of these feel the need to fix the footer at the bottom of the viewport? None of them. It's not worth the hassle.

kk5st, the reason i want to footer to always be in the viewport is because of the content i plan to have in it. I want it to always be visible. Maye you guys are right though, and maybe it's not worth the hastle

thepineapplehead, just because it works for them, doesn't mean that this is what i want to do

i am not sure if i posted it on this forum before, but here's the design that i have in mind for my new site
http://earthbound-misfit.com/random/v4.jpg (please ignore the colors, and spacing, i know that they need to be worked on)
I'd like to always be able to see the login box (which wil turn into a control panel as soon as the user is logged in), the recents posts and pictures, as well as a linkbox.

A slightly different approach would be something like Stu Nicholls' experiements with fixed layouts: http://www.stunicholls.myby.co.uk/layouts/fixit.html which produces a frame-like effect.

HellsBells, this looks almost exacly like what i am looking for
i will need to experiment with that code quite a lot, but this is defenetly a good place to start for me
Thanks!

well, i thought about it and decided that the fliud design might not be worth the haste, and i am going to work towards a design that looks good on 1024x768. With proper planning and good font sizes i was surpised how much content fit on the page.

I ran into a small snag though.
Please take a look at this page http://earthbound-misfit.com/random/v4/boxTest.html
I used inline styles in the meantime, since i am not sure how i want to add those to the page. They will of course be moved out to the stylesheet.
This page looks fine in IE, but in firefox the H1 element is stretching beyound the box. I want the header to take up all the width of the box.

Thank you for all your help.

And this is a more a coding style question. Is it OK to use H1 like i used it? Or would i be better of with a DIV, or a SPAN element?

For a start, the doctype is incomplete.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

is missing the URL.

You're on the right track with the heading tag, but it's best to use a lesser tag like <h5> or <h6> - <h1> should only be used once as a main header for the page.

And instead of separating the labels and input boxes with divs, consider using the fieldset and <label> tags.

i am still getting used to having put in a doctype
for the longest time i treated that as useless code that the HTML editing software puts in. I now know better, and need to change the habit.

I will look into fieldset and label, i haven't used them much before.

and thanks for the tip about H5 and H6, i know something wasn't right about it

i fixed the doctype, and still my H5 tag is going over

It wasn't wrong; in fact any element could be used and styled accordingy. It's just semantic; and better than using an empty element like a <span>.

Try adding overflow:auto; to .footerbox and see if it fixes the problem. It's to do wiith containing floats; IE wrongly expands boxes to contain floated elements (look at that! I remembered something I read here! Gosh, I feel good with myself )

http://www.csscreator.com/css-forum/ftopic3186.html

Have a look at Tony's solution.

/edit

Take a look at:

http://www.w3schools.com/tags/tag_label.asp
http://www.w3schools.com/tags/tag_fieldset.asp
http://www.w3schools.com/tags/tag_form.asp

I'm gonna have a look too; it's all new to me and I might learn something

adding overflow:auto adds a scrollbar to the box
i am looking at tony's article, and it doesn't looks like what i am trying to do
i gave it a shot anyway, and it didn't fix anything

but i DID manage to fix it
I changed width to max-width and it worked. I have absolutly no idea idea what the difference between width, min-widht and max-width is. I am just happy it works, and i need to read up on this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<title>Untitled Document</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">

		fieldset {
			float: left;
			height: 110px;
			margin: 3px;
			background-color: #cc9;
			border: 1px solid #000;
		}
				
		legend {
			font-size: .8em;
			min-width: 100%;
			padding: 0;
			margin: 2px;
			border: 1px solid blue;
			background-color: red;
			padding: 0 0.5em;
		}
		
		label { 
			width: 45px;
			float: left;
			clear: left;
		}
		
		input {
			width: 100px; 
			float: left;
			margin-bottom: 0.3em;
		}
		
		input.clear {
			clear: both; 
		}
		
		</style>
</head>

<body>
	<fieldset>
	<legend> test </legend>
	 <form name="input" action="form_action.asp" method="get">
		<label for="user">User:</label> <input type="text" name="user" value="Username" />
		<label for="pass">Pass:</label> <input type="text" name="pass" value="Password" />
		<input type="submit" class="clear" value="Submit" />
	</form>
	</fieldset>

</body>
</html>

Does what you want with meaningful, semantic CSS. Style to your liking.

/edit

Didn't see your reply. Regardless, play around with my code and see how it goes. I learnt something, maybe you will too!

i love how clean it is, thanks
that's one of the main reasons i started preaching CSS to all my coworkers here, is cleanliness of the code.
I will defenetly use your code for the form, i like how neat it is

Here's the work in progress so far of what i am trying to acomplish.
http://earthbound-misfit.com/random/test.html

As i said, the colors are temporary. I am dreading picking a color scheme, but comparing to doing the layout, that will be a walk in the park.

<div class="footerBox" id="loginBox">
	<h1>control panel</h1>
	<div id="userName" style="padding-top:3px;padding-left:3px;">
		<span style="float:left;width:45px;">user</span>
		<div style="float:left;width:100px;"><input type="text" size="15" /></div>
	</div>
	<div id="password" style="clear:both;padding-top:3px;padding-left:3px;">

		<span style="float:left;width:45px;">pass</span>
		<div style="float:left;width:100px;"><input type="text" size="15" /></div>
	</div>
	<div id="submit" style="clear:both;padding-top:3px;padding-left:3px;">
		<input type="submit" value="log in">
	</div>
</div>

Are you going to keep it with the divs, or go with the fieldset and label tags? Cos if you want to stick with divs and such, there's still too much code.

i am developing locally, and you were looking at the old version
just cause you've been so very helpful, i uploaded the most recent version on the server.

Splendid.

I see you didn't figure out the <legend> tag - neither did I

You're still using <h1>control panel</h1> whereas you should be using a lesser heading tag.

See this bit here:

<div id="header"> HEADER </div>

Why use a div with a class of header? Why not actually use a h1 tag? You can replace the above with this:

<h1> Header </h1>

and style it exactly the same as a div - height, widht, color and everything.

hmm, using H1 for the page header actually sounds good, will make it more organized, thanks for that tip

I thought i DID change the other one to a lesser header, i guess i never did

and yeah, i am not sure what i could do with the legend. I think i am almost done with the layout, so i will work on colors tonight and post back here to get some artistic feedback

i wanted to post my progress here for anyone that cares
http://earthbound-misfit.com/random/test.html
still very far from being done, and has a few experiments. I am loving the semi-transperancy, and i'd like to see if i could implement that in IE. I doubt it, but it might be worth to do some digging.

I am completly lost as for the header design. I don't want to go over the top with it, nor do i want to make it look sloppy.

I would love to get some feedback on the color scheme that i chose though. Good? Bad? Ugly? I'd like to know

EDIT: Fixed the boxes, they line up now, and removed an unecessary DIV

If it's just a transparent png, why not use a gif?

Looking very nice though, so far

i want to give it 50% opacity, to make the background visible though it

Doh! Here's me not thinking about gif transparency.

Time to tweak my design. I showed it to a friend of mine, and he started messing around with the font size boosting it to be like 5 times bigger and that made things look really, really ugly with scrollbars and everything

I remember someone commenting about my code, saying that i shouldn't set any measurements in PX so i decided to mess around with EM. I wasn't sure what it was, and to be honest, still not 100% clear on it. I do know that it's based of the current font size set in the browser, so i decided to go with that

so far, i am pretty happy with the result

as i was typing this thread, i figured something out. That setting EM to .5, is relative to the parent container, not the document as i previously assumed. That's pretty cool. I actually managed to resolve the problem that caused me to start this post originally, but ran into one more, and it is of course, IE related.

take a look at this page please
http://earthbound-misfit.com/random/test3.html

It looks just fine in FF and IE if you use the default font size.
Quick tip, hold CTRL and move the scroll wheel back and forth to change the font size pretty quickly
Now, try to mess around with the font size in FF. Still looking great. And now IE. Notice how making it smaller, creates a gap between the two DIVs and making it larger, causes one of them to be pushed down. I am going to try it out IE7 beta at home, to see if it's working, but in the meantime, can you tell me if there's a way to fix this in IE6?

Thanks!

i finally got a chance to continue working on the desing
i wanted to create something elastic, but it's proving to be much harder to make that work, so for now i just plan to stick to a pretty fixed one.
I ran into a small problem with padding in the A tag
take a look at this
http://earthbound-misfit.com/random/test.html
here's the code for the links at the top (google, yahoo)

#navigation a
{
	font-size:.75em;
	float: left;
	width: 102px;
	height: 22px;
	background:url("linkBg.jpg") no-repeat;
	padding-left: 20px;
	padding-right: 0px;
	margin: 0px 0px 0px 0px;
	text-decoration: none;
	border: 1px solid red;
}

for some reason it's adding the same padding on the right, as it is on the left. I can't figure out why

Can you help me?

hate to bump my own topic, but i did find a solution to my problem
here's what i did:

 
		#navigation a 
		{ 
			font-size:.75em; 
			float: left; 
			width: 77px; 
			height: 22px; 
			background:url("linkBg.jpg") no-repeat; 
			padding: 2px 0px 0px 25px; 
			margin: 0px 4px 4px 0px; 
			text-decoration: none; 
			overflow: hidden; 
		} 

i think i didn't calculate the box model right, so what i did is i changes the width down to a smaller number, and compensated with the padding.
Yay me!

One last thing that i need to do, is figure out how to stick text into the H1, but not display it.
Why you ask? For accessability purposes. When i turn of the stylesheets, the website looks very, very friendly and still easy to navigate. It would make it very accessible to people with disabilities and lesser browsers.
Also, from what i understand, google likes H1 tags when crawling