Four column table using DIV tags and CSS...?

0 ⤊

Four column table using DIV tags and CSS...?

I am having trouble getting the div tags to line up correctly. I am able to get a 2 column layout, however I am having a lot of trouble with a 4 column layout.

Here is my code:

HTML:

Content 01

Content 02

Content 03

CSS:
#listing {
float:left; width:50%;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
background-color:#f0f0f0;
padding:5px;
}

#info {
margin-left:50%; width:7%;
text-align:center;
border-bottom:1px solid #fff;
background-color:#f0f0f0;
}

#type {
margin-left:57%; width:7%;
text-align:center;
border-bottom:1px solid #fff;
background-color:#f0f0f0;
}

#type {
margin-left:63%; width:25%;
text-align:center;
border-bottom:1px solid #fff;
background-color:#f0f0f0;
}

The columns to not line up, instead the 4th column appears on the next line and the other columns do not appear to be the correct size.

2007-05-01 05:06:10 · 5 answers · asked by aaronarnett2002 1 in Computers & Internet ➔ Programming & Design

5 answers

First off, in your CSS, you are re-defining "#type", which I don't think you meant to do. Also, you have "Content 03" in both your type and description DIVs. Your CSS selectors have a lot in common with each other and they can be combined (if you prefer.) Last, you should probably put this "CSS table" into a container of some sort so that the floats don't get out of control. Try this instead:

HTML:

Content 01

Content 02

Content 03

Content 04

CSS:
#container {
width: 100%;
clear: both;
}
#listing, #info, #type, #description {
background-color: #f0f0f0;
float: left;
text-align: center;
margin: 1px;
overflow: hidden;
}

#listing {
width: 50%;
text-align: left;
}

#info {
width: 7%;
}

#type {
width: 7%;
}

#description {
width: 25%;
}

Another thing you should probably do is search for "CSS templates" on the web. There are lots of examples of good design out there for you to help yourself to.

2007-05-01 05:56:27 · answer #1 · answered by §©®Î¶†Δ® 4 · 0⤊ 0⤋

#type {
margin-left:57%; width:7%;
text-align:center;
border-bottom:1px solid #fff;
background-color:#f0f0f0;
}

#type {
margin-left:63%; width:25%;
text-align:center;
border-bottom:1px solid #fff;
background-color:#f0f0f0;
}

you are using the same id declarations twice - both #type. - the bottom one will take precedence because it is closer to the html.

Also 57 + 7 = 64 not 63

For some browsers you need to leave a space between the columns (gutter).

Make them all add up to say 99% rather than 100%.

2007-05-01 05:54:50 · answer #2 · answered by Anonymous · 0⤊ 0⤋

TRY ... floating all the columns left, diddling column-width-percentagles until you get the desired result. But with IE this runs the risk of column slippage, down the right and under...And remember, use "overflow: hidden;"

To get deeply complex and weird:
You might also try first creating, say, an outer div containing one column, floated left, and another to contain the other three, floated right.
... Then, within the three-column div, (bear with me) a column floated left, and a div to contain the last two, floated right. ...Then at last, within the two-column div, one floated left and the other floated right...

2007-05-01 05:44:10 · answer #3 · answered by fjpoblam 7 · 0⤊ 0⤋

amen. yes, you can make

layouts using CSS. Simply: Use CSS to ID and format the

tags, such as dimensions, where they are positioned, and other styling. Then use the

ID in HTML to put the divs on the page.

2016-05-18 00:29:15 · answer #4 · answered by ? 3 · 0⤊ 0⤋

Have u checked the same on multiple resolutions and browsers....

2007-05-01 05:34:48 · answer #5 · answered by Vaibhav 4 · 0⤊ 1⤋