Css Layout 3x2 not working [Archive]

lucasl

10-24-2006, 10:14 AM

Hi everyone (I'm new:)),
I am trying to do a css layout, but all the tutorials I've seen are only 1 row. How do I align it so I can have 2 rows and three columns? I had two ways:
1. Aligning everything left. That worked but when I zoomed out enough it became 6x1.
2. This:

a{border: 0;}
a:link {color: #808080;
text-decoration: underline}
a:visited {color: #FFFFFF;
text-decoration: underline}
a:hover {color: #BBBBBB;
text-decoration:none}
a:focus {color: #FFFFFF;
text-decoration: underline}
a:active {color: #FFFFFF;
text-decoration: underline}
#topright {
height:25%;
width:20%;
float:top-right;
border: solid 1px #FFFFFF;
padding-bottom:10px;
}
#topcenter {
height:25%;
width:60%;
float:top-center;
border: solid 1px #FFFFFF;
padding-bottom:10px;
}
#topleft {
height:25%;
width:20%;
float:top-left;
border: solid 1px #FFFFFF;
padding-bottom:10px;
}
#mainright {
width:20%;
height: 75%;
float:bottom-right;
border: solid 1px #FFFFFF;
padding-bottom:10px;
}
#maincenter {
width:60%;
height: 75%;
float:bottom-center;
border: solid 1px #FFFFFF;
padding-bottom:10px;
}
#mainleft {
width:20%;
height: 75%;
float: bottom-left;
border: solid 1px #FFFFFF;
padding-bottom:10px;
}
body {
background-color: black;
}
h1 {/*heading*/
text-align: center;
font-family: arial;
font-style: italic;
color: #969696;
font-size: 26px;
}
h2 {/*subheading*/
font-family: arial;
font-style: italic;
color: #969696;
font-size: 18px;
}
p {/*body text*/
font-family: arial;
color: #969696;
font-size: 16px;
}
.center {text-align: center;}
.left {text-align: left;}
h4 {/*smalltext (for news)*/
font-family: arial;
color: #969696;
font-size: 12px;
}
h5 {/*tinytext (for flash game instructions)*/
font-family: arial;
color: #969696;
font-size: 10px;
}
This made the layout a 6x1 (6 rows 1 column).
Thanks for the help!

Shoot2Kill

10-24-2006, 10:18 AM

MAYBE THIS CAN HELP YOU...

<html>
<head>
<title>css tables</title>

<style>
#parentbox1 {
position: relative;
left: 150;
top: 300;
}
#parentbox2 {
position: relative;
left: 150;
top: 402;
}
#nestedbox1 {
position: absolute;
width: 190px;
height: 100;
border: solid #000000 1px;
}
#nestedbox2 {
position: absolute;
width: 190px;
height: 100;
left: 192px;
border: solid #000000 1px;
}
#nestedbox3 {
position: absolute;
width: 190px;
Height: 100;
left: 384px;
border: solid #000000 1px;
}
</style>
</head>

<body>

<div id="parentbox1">
<div id="nestedbox1">1<br></div>
<div id="nestedbox2">2<br></div>
<div id="nestedbox3">3<br></div>
</div>
<div id="parentbox2">
<div id="nestedbox1">4<br></div>
<div id="nestedbox2">5<br></div>
<div id="nestedbox3">6<br></div>
</div>

</body>
</html>