CSS 3 column not working :(

[uaintgotthisid]

I have a CSS 3 column layout. Actually it's a 5 column layout because I want 3 in the centre, and 2 on the outsides (just to keep a margin). Standards based attemptI have used the almighty and powerful "holy grail" which was recommended by someone on here. I have managed to tailor it a bit to my needs but I am struggling with the last bit. Having bashed on at it all day and having now reached the pinnacle of frustration I am crying out (begging) for others to help me.Absolute positioning attemptThis is my prior version but this was using fully absolute positioning (which I still find much easier and more time saving). However, in an attempt to make a standards based website (as I'm making it for my mate and it's not fair otherwise) I am trying to solve the problem.PROBLEM:I can't get the commercial bit to go up the top next to the other residential bit and the image.Anyone with any ideas shall save not only my sanity but also my head, and a small portion of my wall. Thanks in advance!

[rzea]

Fix your first URL.EDIT---Ok, several things:1. You're contradicting yourself: ...in an attempt to make a standards based website (as I'm making it for my mate and it's not fair otherwise) andI have a CSS 3 column layout. If you're really wanting to create a site for your buddy that's standards compliant, you need to build it using CSS 2.1. CSS3 is NOT a standard yet, it hasn't been released (and it's going to be a while before they do), so building 'real' projects with CSS3 is all the way 'following the standards' because not all the browsers support CSS3, heck, even Firefox lacks A LOT of support, but that's ok because as I said CSS3 is not out yet. I suggest you stay with CSS 2.1.2. There's no need to have margins on the sides of you design using DIVs for it... that's why you use margin: :)3. What do you mean by "bit" (I can't get the commercial bit to go up the top next to the other residential bit...)4. What is the problem with your "Absolute positioning attempt"? It looks Ok to me.

[uaintgotthisid]

Fix your first URL.http://uglyfashion.110mb.com/client/EuroUnion/home.htmlEDIT---Ok, several things:1. You're contradicting yourself: ...in an attempt to make a standards based website (as I'm making it for my mate and it's not fair otherwise) andI have a CSS 3 column layout. If you're really wanting to create a site for your buddy that's standards compliant, you need to build it using CSS 2.1. I am making a 3 column layout in CSS 2.2. There's no need to have margins on the sides of you design using DIVs for it... that's why you use margin: I wish to fill the margins with a differing repeating image to make the centre stand out3. What do you mean by "bit" (I can't get the commercial bit to go up the top next to the other residential bit...)I mean section. If you see the site you will realise that there is a blue bit with the name residential in the heading.4. What is the problem with your "Absolute positioning attempt"? It looks Ok to me.The problem is I want to have the margins grow with the page, whereas currently they have a height attached. Without this height attached I can't get a background colour on the div, and hence, I cannot have infinite margins dependant on the size of the page not a strictly defined height.

[rzea]

wtf¿? Are you editing this thread? lolEDIT-- Oh your answers are inside the quote, relol. Reading...EDIT 2 --

I wish to fill the margins with a differing repeating image to make the centre stand out

Why don't you use a background image in the body then?

The problem is I want to have the margins grow with the page, whereas currently they have a height attached.

If I understood correctly (honestly is a little confusing) your problem may lie in the way you are conceptualizing your page architecture. Seems like you are 'fixed' in using 'margins' which in turn are not margins but DIVs acting as margins, which in turn blocks you from considering maybe using a background image in the body.If you could give us an image of what you want to accomplish, we, well, at least I, can help you more and be more efficient instead of going back and forth with posts.Let us know then.PS. No need to yell with the big URL

[jeffman]

From scratch, here is a drastically simplified version of what you're up to. I put in some colors so you can see the general outlines, but mostly it's just empty divs waiting for content. You'll need to adjust some values, notably height, but where I could I used your values. Seeing the structure laid bare like this can ease the confusion. Play with it. EDIT: and remember, if you add a border to a div that has an assigned width, you'll need to decrease that width by width of the border * 2.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd"><html>	<head>		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">		<title></title>		<style type="text/css">			body, html {margin: 0; text-align: center; background-color: #ffff99}			div.container {margin: 0 auto; width: 780px; height: 100%; text-align: left}			div.logo {height: 136px; background-color: #ffff44}			div.links {height: 35px; background-color: #ffffff}			div.residential, div.commercial {float: left; width: 170px; height: 500px; background-color: #0000ff}			div.center {float: left; width: 440px; height: 500px}			div.pic {height: 314px; background-color: #ccccff}		</style>	</head>	<body>		<div class="container">			<div class="logo"></div>			<div class="links">			</div>			<div class="residential">			</div>			<div class="center">				<div class="pic"></div>				<div class="text">					<p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. </p>				</div>			</div>			<div class="commercial">			</div>		</div>	</body></html>

[uaintgotthisid]

Firstly thanks very much I very much appreciate your help. I do have some questions however.The first is very pedantic. It involves your use of class as opposed to "id". I believe that class is supposed to be used for repeating things and id for individual items (unique). The second is that although your layout looks good, it has none of the pictures in it, my layout wasn't dissimilar but as soon as I put the pictures into the thing it went haywire. Do you have any ideas why this happened? Originally in absolute positioning it was fine, then afterwards it was not, even if I use absolute positioning within my central column? I have a feeling it has to do with the fact that I used lists for my menus. [sKIP THIS I'VE TRIED IT AND ITs WORKING A LOT BETTER!]Can you explain why mine wasn't working? I fully understand that yours is a simplified version but it seems to be exactly what I was trying to achieve at the beginning yet yours seems to work better. I need to understand, I appreciate you've done it for me, but now I want to understand better.

[jeffman]

1. I'm in the habit of using classes. If the page is short and unique, and the page element you're identifying is unique, then it's really a matter of preference, I think. I suppose I use class on the off-chance I may end up creating another element that needs the same attribute values. In bigger pages, or with a shared style sheet, I'll mostly use classes and reserve id identifiers for those few attributes that are not or should not be inherited.2. Creating the column effect on the left and right margins is kind of an illusion. Those spaces normally get no definition. They are part of the background that shows around a container div that has been centered.Your original text elements followed a div that had been floated to the left. With no additional definitions, they float up to the left of that div. The big trick was bringing them back down. I accomplished that by putting the photo and the text in the same div (the center). The center div floats left, but the ones it contains have no float property, so they stack on top of each other.I don't think there's much more to it than that.

[uaintgotthisid]

Thanks for taking the time out to do that, it's very much appreciated. I've learned a lot. It's lead to a new question, which I shall post elsewhere.