Click to See Complete Forum and Search --> : [RESOLVED] Column Layouts


bulgarian388
08-19-2007, 06:35 PM
Hi guys, my current project, http://www.biofreshsolutions.com/, needs to be updated to have two columns, one on the left and one on the right. Left one will have the content, and the right one will have quick links and such. Well, I got the columns to appear, but the right one appears bellow the left one, not on the side. I don't have a whole lot of experience with column layouts, so I was hoping someone here might be able to shed some light on what's going on. I'm currently experimenting on this page:

http://www.biofreshsolutions.com/theProblem.aspx

Any help will be highly appreciated!

Thanks in advance!

Centauri
08-19-2007, 07:14 PM
By the time the theoretical "page pointer" gets to the right column code, it has advanced down the page to the bottom of the left column, so that is where the float will start. If the left column is floated as well, then the "pointer" is still at the top due to the float being out of the document flow. The footer will then have to clear both floats. The following modifications will sort things out.
.leftLayer {
width: 75%;
float: left;
}

.footerLayer {
background: #a9d06a;
border-left: 3px solid #FFFFFF;
border-right: 3px solid #FFFFFF;
color: #FFFFFF;
font-size: 12px;
text-align: center;
clear: both;
}

bulgarian388
08-19-2007, 07:28 PM
Ahh, I see whats going on now. I tried floating the left column to see if it worked, but I never thought about clearing in the footer layer, and since it didn't work on it's own I gave up on it.

Thank you very much, I really appreciate the help!:)