Resolved Problem with columns? CSS or HTML? [Archive]

igotregistered

04-13-2010, 11:58 AM

Hello. I am using an automatic column generator I found on line. I won't name the name, because I'm not sure if I'm allowed.

It automatically generates the CSS and column code. Problem is, when I add it to make a new page, my layout doesn't work.

It all breaks up. The center column goes above the left column and the right column goes to the middle.

It looks like this:
Here's a link:

nhlf1ghtclub.com/nhlfc_hall_of_fame.php [replace the "1" with an i in the domain name]

--------
center column
xxxxxxx
xxxxxxx
xxxxxxx
xxxxxxx
xxxxxxx
--------

-------- ---------
Left Column Right Column
xxxxxxx xxxxxxx
xxxxxxx xxxxxxx
xxxxxxx xxxxxxx
xxxxxxx xxxxxxx
xxxxxxx xxxxxxx
-------- ---------

Nothing I do fixes it. I've even tried to use tables and it creates the same problem.

liamallan

04-13-2010, 12:10 PM

can u post the code, maybe that way we will be able to see the problem.

igotregistered

04-13-2010, 12:18 PM

Hi, thank you for replying.

Here is the code and CSS which is made with the online generator:

<html>
<body>
<style type='text/css'>
.header{
width: 100%;
left: 0%
}
.colmask{
width: 100%;
left: 0%
}
.colmid{ right: 21% }
.colleft{ right: 60% }
.col1{
width: 58%;
left: 101%
}
.col2{
width: 17%;
left: 24%
}
.col3{
width: 19%;
left: 86%
}
.footer{
width: 100%;
left: 0%
}
.header{
clear: both;
float: left;
position: relative;
border-bottom: #000 1px solid;
background-color: #b4d2f7
}
.colmask{
clear: both;
float: left;
overflow: hidden;
position: relative;
background-color: #b4d2f7
}
.colmid{
float: left;
width: 100%;
position: relative;
background-color: #b4d2f7
}
.colleft{
float: left;
width: 100%;
position: relative;
background-color: #b4d2f7
}
.col1{
padding: 0px 0px 1em 0px;
overflow: hidden;
float: left;
position: relative;
background-color: #99ccff
}
.col2{
padding: 0px 0px 1em 0px;
overflow: hidden;
float: left;
position: relative;
background-color: #99ccff
}
.col3{
padding: 0px 0px 1em 0px;
overflow: hidden;
float: left;
position: relative;
background-color: #99ccff
}
.footer{
clear: both;
float: left;
position: relative;
border-bottom: #000 1px solid;
background-color: #b4d2f7
}
.bottom{
clear: both;
width: 100%;
float: left;
position: relative;
background-color: #cdeb8b
}
body {
border-width: 0px;
padding: 0px;
margin: 0px;
font-size: 90%;
width: 100%;
min-width: 600px;
}
</style>
<div class="bottom">
<div class="header">
head <br />
</div>
<div class="colmask">
<div class="colmid">
<div class="colleft">
<div class="col1">
middle
</div>
<div class="col2">
left
</div>
<div class="col3">
right
</div>
</div>
</div>
</div>
<div class="footer">
footer <br>
</div>
</div>
</body>
</html>

igotregistered

04-13-2010, 01:34 PM

Figured it out.

I'm using @Monicasaha's fix found here in this thread.

http://www.dynamicdrive.com/forums/showthread.php?t=39043