Problem with columns? CSS or HTML?

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

Code:

<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/s...ad.php?t=39043

Thread: Problem with columns? CSS or HTML?

Thread Tools

Search Thread

Problem with columns? CSS or HTML?

Bookmarks

Bookmarks

Posting Permissions