Log in

View Full Version : 5 column problem...


anim8it
05-17-2005, 11:37 AM
Well I hav a problem. I have to build a page that has 5 columns in the footer but I cant seem to succed. The second and fourth column get lowered by firsts and thirds content.

HTML:


<!-- Blocks -->
<div id="blocks" >
<div id="pair" >
<div id="block1" >One<br/>One<br/></div>
<div id="block2" >Two</div>
</div>

<div id="columns" ></div>
<div id="spair" >
<div id="block3" >Three<br /><br /><br /><br /><br /></div>
<div id="block4" >Four</div>
</div>
<div id="news" >News</div>
</div>
</div>
<!-- Stop Blocks -->


CSS:


#blocks {
border: 0px;
margin: 0px;
padding: 0px;

}

#pair {
float: left;
width: 350px;
border: 0px;
margin: 0px;
padding: 0px;
}

#block1 {
float: left;
width: 175px;
}

#block2 {
float: right;
height: 132px;
width: 175px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}

#colmuns {
float: right;
width: 600px;
}

#spair {
float: left;
width: 350px;
border: 0px;
margin: 0px;
padding: 0px;
}

#block3 {
width: 175px;
border-left: 1px solid #000000;
}

#block4 {
float: right;
height: 132px;
width: 175px;
border-left: 1px solid #000000;
}

#news {
float: right;
width: 275px;
border-left: 1px solid #000000;
}


I played with them floats and I cant make it work...
Im slowly loosing it in my head so if theres some genious here who knows how to make 5 column layout and helps me out Im going to serve him in the afterlife....
I just dont have the nerves to continue but I have to (it would have been much easier with a table I know... But these are clients demands - and I cant say I cant do it... I have to do it... By tommorow preferably...

Anyway thanks go to everyone who at least offer a suggestion. Im in a crisis and everything helps!

Peace!
juanmanuel
05-17-2005, 06:11 PM
I hope this sample can help you with your problem

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> FLOAT JUANMANUEL DEMO </title>

<style type="text/css">
#blocks {
border: none;
margin: 0px;
padding: 0px;
}

.col{
float: left;
border: 1px dashed gray;
background-color: #FAFAFA;
color: #006830;
}

/*THE SUMATORY OF COL WIDTHS CAN NOT BE OVER THE WIDTH OF THEIR CONTAINING BLOCK*/
/*IN IE EXPLORE CAN NOT BE OVER 99%*/
/*WHEN THE WIDTH LIMIT IS PASSED THE LAST FLOAT WILL BE POSITIONED UNDER THE*/
/*FIRST COLUMN*/

#col1{
width: 19%;
}
#col2{
width: 19%;
}
#col3{
width: 19%;
}
#col4{
width: 19%;
}
#col5{
width: 19%;
}

.col .block1{
width: 40%;
float: left;
}

.col .block2{
width: 40%;
float: right;
}
</style>
</head>

<body>

<!-- Blocks -->
<div id="blocks" >
<div class="col" id="col1">
<div class="block1" >One<br/>One<br/></div>
<div class="block2" >Two</div>
</div>
<div class="col" id="col2">
<div class="block1" >One<br/>One<br/></div>
<div class="block2" >Two</div>
</div>
<div class="col" id="col3">
<div class="block1" >One<br/>One<br/></div>
<div class="block2" >Two</div>
</div>
<div class="col" id="col4">
<div class="block1" >One<br/>One<br/></div>
<div class="block2" >Two</div>
</div>
<div class="col" id="col5">
<div class="block1" >One<br/>One<br/></div>
<div class="block2" >Two</div>
</div>
</div>
<!-- Stop Blocks -->
</body>
</html>
jscheuer1
05-17-2005, 06:58 PM
I'm not sure why this works in Mozilla but, have an idea. It also works in IE and I get why that is. Here's some sample code:


<html>
<head>
<title></title>
<style type="text/css">
#blocks {
border: 2px dashed black;
}

#block {
vertical-align:top;
height:20ex;
width:30em!important;width:20%;
display:table-cell!important;display:inline;
border: 2px solid red;
}

#news {
vertical-align:top;
height:20ex;
width:30em!important;width:20%;
display:table-cell!important;display:inline;
border: 2px solid silver;
}
</style>
</head>
<body>
<p>some other content above all this</p>
<!-- block -->
<div id="blocks" >

<div id="block" >One<br>One<br></div>
<div id="block" >Two</div>
<div id="block" >Three<br><br><br><br><br></div>
<div id="block" >Four</div>
<div id="news" >News</div>

</div>
<!-- Stop block -->
</body>
</html>
anim8it
05-17-2005, 07:07 PM
I thank both of you greatly. Thanx for helping me out. I'll tell you tomorow how it works out.

again thanks to both of you and everybody who may add their suggestions and solutions in the future.

Peace!
anim8it
05-18-2005, 09:54 AM
juanmanuel your solution worked as a charm. Thank you. I guess I still have some things to learn :(.
Anyway thanks for the helping hand.

jscheuer1 I havent yet had the chance to test you solution but I will take time to see it through...

Thanx everyone... See you on the forums!