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:

Code:

<!-- 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:

Code:

#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>


<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>

</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 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!

Thread: 5 column problem...

Thread Tools

Search Thread

5 column problem...

Thnx

Bookmarks

Bookmarks

Posting Permissions