Hello all. This is the first time I've been working with faux columns and I've had a world of troubles. First off, I took a look at the list apart article (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->) several times, and it didn't tell me what I wanted to know. (quite a few things).
It works no matter what in Internet Explorer, but in Firefox (1.5) it kinda works, but not entirely. The div in which I have my main information (not the main container) doesn't go down all the way, so it's information overflows.
How do I fix that? I've used all sorts of height variables (percentages, auto or no height declaration at all). One thing I've used as a variable is the footer. I've used border-bottom in the main container, and I've tried a div as the bottom either way, it doesn't work in FF.
Here is the page (<!-- m --><a class="postlink" href="http://www.team847.com/new%20layout/2/New%20Folder/">http://www.team847.com/new%20layout/2/New%20Folder/</a><!-- m -->)
Many thanksRemove the height of container....
#container {
BACKGROUND-IMAGE: url(images/column2.gif); MARGIN: 10px auto; WIDTH: 750px; BORDER-BOTTOM: #808080 10px solid; BACKGROUND-REPEAT: repeat-y; HEIGHT: 90%
}Hey Sunny G, you missed the most important part of Faux Columns. You need a clearing element beneath your three columns and INSIDE your #container. By clearing element, I mean you need an HTML tag with the CSS property and value clear: both; applied to it. That will stretch the #container DIV below the three columns.
Floated elements do not take up space in the block level layer. If all children of #container are floated, then #container "contains" nothing.
Adding <br id="containerSpacer" /> after your three columns, but INSIDE the #container DIV should be all the markup you need. Then in your style sheet, add this declaration:
#containerSpacer {
clear: both;
font-size: 1px; /* Might be needed for IE-Win, might not be needed. */
}I used both your suggestions and they worked!
Instead of <br> I used what I originally had in my css, a bottom div with clear both. The only reason it didn't work was because the container div had the height thing.
Thanks!
=edit=
Sorry, I should've linked to it earlier... Thanks again!
<!-- m --><a class="postlink" href="http://www.team847.com/new%20layout/">http://www.team847.com/new%20layout/</a><!-- m -->
It works no matter what in Internet Explorer, but in Firefox (1.5) it kinda works, but not entirely. The div in which I have my main information (not the main container) doesn't go down all the way, so it's information overflows.
How do I fix that? I've used all sorts of height variables (percentages, auto or no height declaration at all). One thing I've used as a variable is the footer. I've used border-bottom in the main container, and I've tried a div as the bottom either way, it doesn't work in FF.
Here is the page (<!-- m --><a class="postlink" href="http://www.team847.com/new%20layout/2/New%20Folder/">http://www.team847.com/new%20layout/2/New%20Folder/</a><!-- m -->)
Many thanksRemove the height of container....
#container {
BACKGROUND-IMAGE: url(images/column2.gif); MARGIN: 10px auto; WIDTH: 750px; BORDER-BOTTOM: #808080 10px solid; BACKGROUND-REPEAT: repeat-y; HEIGHT: 90%
}Hey Sunny G, you missed the most important part of Faux Columns. You need a clearing element beneath your three columns and INSIDE your #container. By clearing element, I mean you need an HTML tag with the CSS property and value clear: both; applied to it. That will stretch the #container DIV below the three columns.
Floated elements do not take up space in the block level layer. If all children of #container are floated, then #container "contains" nothing.
Adding <br id="containerSpacer" /> after your three columns, but INSIDE the #container DIV should be all the markup you need. Then in your style sheet, add this declaration:
#containerSpacer {
clear: both;
font-size: 1px; /* Might be needed for IE-Win, might not be needed. */
}I used both your suggestions and they worked!
Instead of <br> I used what I originally had in my css, a bottom div with clear both. The only reason it didn't work was because the container div had the height thing.
Thanks!
=edit=
Sorry, I should've linked to it earlier... Thanks again!
<!-- m --><a class="postlink" href="http://www.team847.com/new%20layout/">http://www.team847.com/new%20layout/</a><!-- m -->