Help with CSS positioning

[SnowballMan]

I've reached that frustrating point where I know there should be a way to do what I want, but cannot find out how. I'm hoping someone here can help.

I am trying to set up a template for a number of similar pages. Each page will have three columns but certain elements need to line up horizontally across all columns. There is also a single element that spans the whole page.

There are ten elements total. To try and show visually:

11122222333
44455555666
77777777777
88899999000

1,4 and 8 form the left side column. 2,5 and 9 form the center. 3,6 and 0 form the right.

The page was separated by <div> tags and each section has it's own class.

<div class="top">
<div class="1"></div>
<div class="2"></div>
<div class="3"></div>
</div>
<div class="middle">
<div class="4"></div>
<div class="5"></div>
<div class="6"></div>
</div>
<div class="7"></div> /* spans full page */
<div class="bottom">
<div class="8"></div>
<div class="9"></div>
<div class="0"></div>
</div>

The CSS file I had, used a combination of relative and absolute positioning as well as setting width, left, and min-height. And at one point everything lined up nicely. The problem came with one page where "5" exceeded it's min-height and overlapped "7". Given that heights on any of these elements can vary, I need a way to have the horizontal groups adjust down if any of the elements of the group above it are taller then the min-height. For example:

11122222333
11122222
44455555666
44455555666
77777777777
88899999000

Is there a way to do this? Or am I wrong in thinking that this can be done with CSS?

[CarpeGuitarrem]

To be honest, I don't think that CSS was designed for something like that. CSS layout is supposed to be dynamic, and it's supposed to shift stuff around fluidly, depending on the size of the browser and other things.

If you're looking to precisely line stuff up, as in physical layout, I'd recommend using a table.

[veti]

I've reached that frustrating point where I know there should be a way to do what I want, but cannot find out how. I'm hoping someone here can help.

Yes, what you want can certainly be done. It'll drive you mad testing across browsers and versions, but it's possible.

But I think this is the wrong place to ask this kind of query. Check out Stack Overflow (http://stackoverflow.com/), it's expressly designed for this sort of support and they've probably covered it dozens of times already (so search before you post a new query...).

[Whoracle]

<table>
<tr>
<td>111</td>
<td>22222</td>
<td>333</td>
</tr>
<tr>
<td>444</td>
<td>55555</td>
<td>666</td>
</tr>
<tr>
<td colspan="3">77777777777</td>
</tr>
<tr>
<td>888</td>
<td>99999</td>
<td>000</td>
</tr>

Done. Like CarpeGuitarrem said: What you want is a table. It's dead simple with a table. Your table cells can contain divs if you want to. It won't break with a table. It'll look fine with one.

In this particular case, don't go down the div route. That way lies madness.

That being said, you could look into z-index for your 7-div. That might help, but it breaks across browsers.

[SnowballMan]

To be honest, I don't think that CSS was designed for something like that.
It was my understanding that this was precisely what CSS was for. That HTML is used for describing what the parts of a web page are and CSS for describing how those parts should look. Every text I have read had some form of "CSS should be used for layout, not tables" discussion.

However, you were right. Implementing it as a table did exactly what I wanted it to. Thank you.


But I think this is the wrong place to ask this kind of query. Check out Stack Overflow (http://stackoverflow.com/), it's expressly designed for this sort of support and they've probably covered it dozens of times already (so search before you post a new query...).
Yes, I did think to search for this prior to posting. The results from Stack Overflow were not helpful.

This forum is frequented by a large number of intelligent people with diverse backgrounds from all over the world. Why would you think this is the wrong place to ask a question?

[Sallera]

There was a certain amount of zealotry among the CSS early adopters, and tables (as the previous standard, and a source of many easy examples of ugliness) ended up in a bit of a witch-burning as a result. They still have their place, though.

[Whoracle]

It was my understanding that this was precisely what CSS was for. That HTML is used for describing what the parts of a web page are and CSS for describing how those parts should look. Every text I have read had some form of "CSS should be used for layout, not tables" discussion.

Long story short: CSS is for controlling the look of the components, HTML for the structure. Those looks can include positioning, true. BUT: Your particular problem isn't about "Use HTML or CSS?", it's about "Are DIVs the right tool for what I want to accomplish?". And while DIVs are all the rage and have pushed table layouts to the back row for quite a while now, your example is exactly what tables are good at and what DIVs suck at :)

All that being said, I thought about your problem for a bit and found out how to do it:

NOTE! THIS DOES NOT WORK PROPERLY! IT WILL POSITION CONTENTS OF 6 BELOW 4, FOR EXAMPLE!
Never mind. Fix was simple. The version in spoilers should work now.




<html>
<head>
<style>
.wrapper {
/* this is just cruft to make the demo look halfway decent */
margin-left: auto;
margin-right: auto;
width: 150px;
border-style: solid;
border-width: 1px;
border-color: #000000;

/* this is important */
overflow: hidden;
}

.one {
float: left;
}

.two {
float: left;
}

.three {
float: left;
}

.four {
float: left;
}

.five {
float: left;
}

.six {
float: left;
}

.seven {
float: left;
}

.eight {
float: left;
}

.nine {
float: left;
}

.ten {
float: left;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="one">111</div>
<div class="two">222222<br>22222</div>
<div class="three">333</div>
</div>
<div class="wrapper">
<div class="four">444</div>
<div class="five">555555</div>
<div class="six">666<br>666</div>
</div>
<div class="wrapper">
<div class="seven">77777777777</div>
</div>
<div class="wrapper">
<div class="eight">888</div>
<div class="nine">99999</div>
<div class="ten">000</div>
</div>
</body>
</html>



Looks like this (http://dl.lynxcore.org/divtest.html) in the end.

This brings some further problems with it, though. While it works, you'll be having troubles positioning stuff inside each div globally. Sure, you can throw a "text-align: center;" in each div class, but not into the wrapper class.

One way or another: Have fun with it :)

[CarpeGuitarrem]

Yeah, DIVs are for dynamic positioning: it's how you manage a site when you have a lot of content, and want it to resize and look nice no matter what size the screen is. If you want a fixed size and layout, that's what tables are for.

[Deadline]

If you want a fixed size and layout, that's what tables are for.

No, that's what they've been used for (because the initial development and deployment is easy and fast). Tables are for tabular data, they've never been for layout. They also carry the rather onerous problem of being difficult to maintain or change down the road (you have to modify your content as well as your style elements when all you should have had to do is modify your style elements).

But as long as your table isn't huge mclarge, and you aren't nesting tables, and you keep things really simple, the maintenance on a page using tables for layout can be manageable.

Alternatively, you can do this with divs easily. Whoracle showed one way to do it, here's another way (slightly modified Whoracle's code):

<html>
<head>
<style>
.leftCol {
clear:left;
float:left;
width:25px;
}
.midCol {
float:left;
width:50px;
}
.rightCol {
float:left;
width:25px;
}
.screenSpan {
clear:left;
float:left;
width:100px;
}
</style>
</head>
<body>
<div class="leftCol">111</div>
<div class="midCol">222222<br />22222</div>
<div class="rightCol">333</div>
<div class="leftCol">444</div>
<div class="midCol">555555</div>
<div class="rightCol">666<br />666</div>
<div class="screenSpan">77777777777</div>
<div class="leftCol">888</div>
<div class="midCol">99999</div>
<div class="rightCol">000</div>
</body>
</html>


Assuming you want the widths of your "columns" consistent, you would need to set specific widths for them.

Edit - Here are a couple of useful resources for CSS work:
Blue Robot Layout Reservoir (http://www.bluerobot.com/web/layouts/) - Some common layouts pre-built
A List Apart (http://alistapart.com/) - Lots of useful information, but man do I hate trying to find stuff on that site.
CSS Zen Garden (http://www.csszengarden.com/) - Showcases the kinds of stuff you can do with CSS.

[CarpeGuitarrem]

I was speaking in a functional sense. :smallsmile: Sure, that's not what tables are intentionally for, but that's what they're practically for, from a design stance.

[Deadline]

I was speaking in a functional sense. :smallsmile: Sure, that's not what tables are intentionally for, but that's what they're practically for, from a design stance.

Only if you're lazy. :smalltongue:

*refuses to comment on whether or not he's used tables for layout*

[CarpeGuitarrem]

I prefer "smart and efficient". :smallwink:

[Seerow]

Only if you're lazy. :smalltongue:

*refuses to comment on whether or not he's used tables for layout*

I'm sure everyone has used tables for layout at some point or another (okay, by "everyone" I mean "everyone who has done any sort of web design work").

Doesn't mean it's right. But it's just so easy.