Topic: CSS Box Model Layout

Hey guys...now, being relativly new at CSS, I have a layout style I want ot achieve, and I'l lbe buggered if I can figure out how to do it. It's based on the two column CSS Box Model, with a full width header div at the top, two divs just below that, one for the menu and the other for the main content, and another full width div below that for the page footer (copyright info, etc). Here's an image that shows what I'm looking for:

http://www.zeloutis.com/skaarjj/layoutexample.jpg

and thanks to Lacuna for hosting that for me...really must get my own domain one of these days when I have money again...

So, can anyone help me in achieving this?

quote:

---

It's based on the two column CSS Box Model

---

Not entirely sure what that is supposed to mean....
Get the basic idea of hat you want though, and it seems simple enough. Except that at the moment, getting the left menu to always fill the space will be next to impossible.

rule number 1: forget about absolute positioning, unless it becomes completely necessary.

It *should* be pretty straightforward.

Make your header div.

make a class="left" div, with a width:25% (or whatever) and a float:left.

make a class="right" div, with a width of say 70% or so (you'll need to account for margins and padding and all) also with a float:left.

Make a footer div with a clear:both.

Set margins, borders, padding appropriately.

Don't set "width:100%;" for anything just yet. See how it works.

Go from there....



[This message has been edited by DL-44 (edited 10-22-2003).]

http://www.bluerobot.com

They have some sample layouts there that you can take a look at for guidance.

:::11oh1:::

Skaarjj: I'm afraid this touches on the subject that has come up here before - asking how to make what is essentially a table-based design in CSS is rather missing the point.

Although it is possible things like ending the two columns on the same line will keep you up all night cursing trying to jam it into a table-free layout. Your best bet if you wanted to do this is use one of the Glish layouts and then use overflow:auto on the right column and fix its height at he same as the left column.

For a great set of resources for this kind of thing see:

GN table-free design links section

___________________
Emps

The Emperor dot org

And just to clarify something here, the "box model"

quote:

---

describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.

---

(box model specs from the W3C)


___________________________
Suho: www.liminality.org

I resent that you think something as simple as this layout is something that is a table-based layout that CSS should not be used for.

To do it, you nest your two columns into a single class with the same background color as the one you want on the left. This is not meant to be a tabled design. Tables are for the presentation of tabular data. A single extra class and a couple bytes of extra text to do something that, in a table setup, would take 10 times as much.

It's meant not only for simplicity and the segregation of content and design, but also to make smaller files, easier page renderings for the browser, and compliance with regulations set out by governmental and private industries for usability and accessibility.

And I'll debate until I'm blue in the face with anyone who disagrees.

I think twItch^ has a very good point here. To be honest, I was a tad perplexed when I first saw the "table design" comment--I could not quite figure out what it was about the design that made it inherently table-based. While it is true that, in the past, designs like this were achieved by abusing tables, this doesn't necessarily mean that it is inherently a table-based design. I don't think there is such a thing as an inherently table-based design, just as I don't think there is such a thing as an inherently css-based design. Granted, new-comers to CSS may produce very similar looking designs (you know what I'm talking about--the "boxy" style), but it doesn't mean that those designs are inherently CSS-based.




___________________________
Suho: www.liminality.org

Well perhaps I was over-stating the case but my point was that getting those borders to line up at the bottom of the 2 columns like that can be done (using something like overflow:auto and aiming for Opera version greater than 6) but it would be a pain (I would be very happy to see someone reproduce the design in CSS). I suspect I've not explained things very well.

___________________
Emps

The Emperor dot org

well, this is what I have so far (with help from Lacuna)
http://emperor.port5.com/skaarjj/baselayout2.html

as you can see I'm having a bit of a problem getting the bottoms of the two centre columns to line up, and I'm quite sure this isn't going ot look right in other browsers...so do oyu guys wanna have a wander through this for me?

Skaarjj: Good first attempt. Things line up (horizontally) bettr in IE6 than in Op7 but it is getting there. I can't quite see why things aren't lining up - I would suggest removing the positon stle from the left column as I'm not sure what it is doing. See how that works.

___________________
Emps

The Emperor dot org

quote:

---

as you can see I'm having a bit of a problem getting the bottoms of the two centre columns to line up

---

In this:

.left {

    position: relative;

	float: left;

	width: 15%;

	height: 400px;

	background:#fff;

	border: solid black 2px;

	margin-top: 5px;

	margin-left: 5px;

	margin-bottom: 5px;

	padding-bottom:15px;

	}

Yout have padding-bottom:15px. Either take it out or put the same thing for the right side. You have the left sided padded which is making it off a little.

Also, for the margin stuff, you can put this all on one line like: margin: 5px; since they all have the same value. If you have different values for the top bottom left etc.. they go in the order of top, left, bottom, right. with no commas between them. margin: 5px 10px 5px 10px;
The only time that you really need to seperate them is when you have to use auto for the value. Opera freaks out if you have margin: 10px auto 10px auto.

Later,

C:\


~Binary is best~