Forum Moderators: not2easy
Please examine the html below and tell me what I'm doing wrong. I have four columns defined by css and div. I want the paragraph of text that follows in the html to appear BELOW the columns. Instead, it appears with its top edge even with the top edge of the columns, so that it is effectively invisible. I put a yellow border around the paragraph so people can see it a bit better.
That's my first and most important question. The second question, less important, is how do I make the columns appear the same height in the screen? That is, how do I make their bottoms line up on the same vertical position?
The html follows.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
<!--
body {
background-color: #cccccc;
margin: 0;
}
.col1 {
position: absolute;
left: 0%;
float: left;
padding-left, padding-right: 2px;
width: 20%;
}
.col2 {
position: absolute;
left: 25%;
float: left;
padding-left, padding-right: 2px;
width: 20%;
}
.col3 {
position: absolute;
left: 50%;
float: left;
padding-left, padding-right: 2px;
width: 20%;
}
.col4 {
position: absolute;
left: 75%;
float: left;
padding-left, padding-right: 2px;
width: 20%;
}
.blackarea {
background-color: black;
color: white;
}
.redarea {
background-color: red;
color: white;
}
.bluearea {
background-color: blue;
color: white;
}
.greenarea {
background-color: green;
color: white;
}
-->
</style>
</head>
<body>
<div class="col1 blackarea">
<p>This is the text of column 1. This is the text of column 1. This is the text of column 1. This is the text of column 1. This is the text of column 1. This is the text of column 1. This is the text of column 1. This is the text of column 1. This is the text of column 1. This is the text of column 1. This is the text of column 1. This is the text of column 1. This is the text of column 1. This is the text of column 1. This is the text of column 1. <br>
column 1<br>
column 1
</p>
</div>
<div class="col2 redarea">
<p>The column 2 text is in this area for everyone to read. The column 2 text is in this area for everyone to read. The column 2 text is in this area for everyone to read. The column 2 text is in this area for everyone to read. The column 2 text is in this area for everyone to read. The column 2 text is in this area for everyone to read. The column 2 text is in this area for everyone to read. <br>
column 2<br>
column 2</p>
</div>
<div class="col3 bluearea">
<p>Read all about it here, in the blue column 3 area. Read all about it here, in the blue column 3 area. Read all about it here, in the blue column 3 area. Read all about it here, in the blue column 3 area. Read all about it here, in the blue column 3 area. <br>
column 3<br>
column 3<br>
column 3<br>
column 3<br>
column 3<br>
column 3<br>
column 3<br>
column 3<br>
</p>
</div>
<div class="col4 greenarea">
<p>This is the green area with the column 4 text in it.<br>
column 4
</p>
</div>
<br clear="all">
<p style="border: 5px yellow solid">What's wrong with this paragraph and why will it not go with its top edge just below the columns?</p>
</body>
</html>
You could set a height for each column and then give the final <p> a margin-top that would bring it below this height, but if the content exceeds the height, the columns will get higher unless overflow comes into play.
I presume that even if I put in a height for the DIV columns, things would get messed up depending on browser window size, type faces, etc.
I tried going with relative positioning, and of course then the floats caused the columns to start wrapping rather than staying four side by side.
I know I could solve all this with a table, but I'd like to do it using css.
I played around with seemingly every combination of fixed and absolute and relative and static positioning for the column divs. I used a container div around the four column divs. And something would always be wrong. Making the column divs not absolutely positioned would cause them to start wrapping as I shrank the browser window. Making them all absolute would mean that the text I intended to display below them would instead be covered up by the columns.
My ultimate solution was, gasp, to use a table. I replaced the .col1....col4 classes with a .column class { width: 20%; padding-left, padding-right: 2px } and a couple other tweaks, and I got everything I wanted, including the columns all being equal in height.
Yes, this might offend purists. But although I was (sorta, kinda) using a table for layout, I was actually using it to display stuff that does pretty much lend itself well to table usage: four simple columns of data.
I've read quite a bit of table vs. css debate and although my course of action here might offend purists, I just couldn't stomach spending any more time researching all this stuff, simply to do what I already knew how to do with a table.
How wrong am I being here?
