<!-- m --><a class="postlink" href="http://mattheandesign.com/md/">http://mattheandesign.com/md/</a><!-- m -->
I want the footer at the bottom(obviously), but it only goes to the bottom of the screen and not to the bottom of the content. I have another design that seems to be pulling it off, but I'm not figuring out the differences as of right now.are you just trying to get it at the bottom of the text, or are you trying to do the more complex thing of having it at the bottom of the screen unless the page is longer than the screen, in which case you want it at the bottom of the page?Let's go with the more simple one of having it below the text since when all of the text is added, it should be of decent sized length anyway.could you try something like
<!-- m --><a class="postlink" href="http://realworldstyle.com/2col.htmlThe">http://realworldstyle.com/2col.htmlThe</a><!-- m --> only issue with doing it that way is that is uses float which I was trying to avoid. I know how to do it using floats. I know Eric Meyer posted somewhat recently about how float has been kind of abused as a way to position things when in reality it isn't really meant to do that. It's for floating things so you can wrap stuff around something, ie text around an image. I'll continue to play around with it and see what I come up with.position absolute screws up printing, so I personally prefer floats.
In fact, (not having read Eric's article), I don't really think there is a viable alternative to floating.Does this (<!-- m --><a class="postlink" href="http://cheers-sendai.com/Matthean.htm">http://cheers-sendai.com/Matthean.htm</a><!-- m -->) help?Floats don't suck (<!-- m --><a class="postlink" href="http://www.meyerweb.com/eric/thoughts/2004/07/17/floats-dont-suck-if-you-use-them-right/">http://www.meyerweb.com/eric/thoughts/2 ... hem-right/</a><!-- m -->)
There's the post from Eric on it. Not that a JS solution is what I want either. Since this isn't the print CSS that I'm working on, I don't mind using absolute positioning.
BonRouge, it looks off in Firefox, but I haven't played around with the code yet either, so I'll look into that later on.In what sense 'off' ? I know the position of your content isn't the same as you had, but I thought I'd leave that to you to fix. Does the footer seem OK there?I think this notion of semantic CSS is a little ridiculous. Floats work very well for layouts, keep all the styling in one place, and are simple to learn. It really has no downsides, once set up properly. I think it's really nitpicking to say you shouldn't use them because they weren't meant for layouts.Ben, tables weren't made for layout either. What's the difference? The difference is tables are HTML not CSS, and the W3C says not to use them for layout. To support my own belief that floats are acceptable for layout use, I'd like to ask Spufi: Where does the W3C that floats should not be used for layout?BonRouge, the borders in Firefox are of different sizes.
Jona, I agree. If we have sematic markup, then the formatting should follow the same idea. The main point to floating something is to have something wrap around what you are floating. The whole positioning aspect is just part of what happens in order for things to wrap around the floated object. Like Eric mentioned, without the clear property using float for the primary reason of position something would never have happened.
I don't see anything at W3C offhand that specifically said you can't use float for the primary purpose of layout positioning.Is this (<!-- m --><a class="postlink" href="http://cheers-sendai.com/Matthean.htm">http://cheers-sendai.com/Matthean.htm</a><!-- m -->) better?Originally posted by Jona
Ben, tables weren't made for layout either. What's the difference? Tables, being HTML, add more code and overall make layouts difficult to modify. Floats, being CSS, keep themselves in a CSS file, and have only one instance of themselves to be used by hundreds of pages, and are small, easily modifiable creatures. Both aren't meant to be used for layout, but you can't compare
<table>
<thead><tr><th colspan="2">Header</th></tr></thead>
<tbody><tr><td>Content</td><td>Nav</td></tr></tbody>
<tfoot><tr><td colspan="2">Footer</td></tr></tfoot>
</table>
with #header, #footer {clear: both;} #content {float: left; width: 80%;} #nav {float: right; width: 20%;}
BTW, I know that my table example doesn't validate (or work right...), but it gets the point across.Originally posted by spufi
Jona, I agree. If we have sematic markup, then the formatting should follow the same idea. The main point to floating something is to have something wrap around what you are floating. The whole positioning aspect is just part of what happens in order for things to wrap around the floated object. Like Eric mentioned, without the clear property using float for the primary reason of position something would never have happened.
I don't see anything at W3C offhand that specifically said you can't use float for the primary purpose of layout positioning.
Being consistent in our ideals throughout our HTML and CSS is a good idea, as it removes doubt in the minds of onlookers; perhaps at one time, the W3C didn't say tables weren't allowed for layout? In that case, we should await the W3C to say something about floats. Until then, however, we can assume that it is safe to use them. <Analogy> Just like you don't ask your parents for a glass of milk in the morning, you just drink it. If they say not to drink it, then you have a different situation on your hands. </Analogy> Remember, though, that we are dealing with CSS, and as such should accept the idea of taking what the W3C has given, and turning it into something lightweight, easily modifiable, with no downsides concerning accessibility, because the inaccessibles' software will not render it any differently than if no floats had been used. So in the long run, just because someone says you can have something, doesn't define how it can be used -- or abused -- but there is a fine-line between use and abuse (such as tables for layout vs. tables for tabular data). You can use floats in the experimental way, but using floats for your layout is not wrong. In section 9.8.3 of the W3C CSS2 visual rendering document (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS2/visuren.html">http://www.w3.org/TR/CSS2/visuren.html</a><!-- m -->), it gives an example of using a floated box for a simple layout.
I want the footer at the bottom(obviously), but it only goes to the bottom of the screen and not to the bottom of the content. I have another design that seems to be pulling it off, but I'm not figuring out the differences as of right now.are you just trying to get it at the bottom of the text, or are you trying to do the more complex thing of having it at the bottom of the screen unless the page is longer than the screen, in which case you want it at the bottom of the page?Let's go with the more simple one of having it below the text since when all of the text is added, it should be of decent sized length anyway.could you try something like
<!-- m --><a class="postlink" href="http://realworldstyle.com/2col.htmlThe">http://realworldstyle.com/2col.htmlThe</a><!-- m --> only issue with doing it that way is that is uses float which I was trying to avoid. I know how to do it using floats. I know Eric Meyer posted somewhat recently about how float has been kind of abused as a way to position things when in reality it isn't really meant to do that. It's for floating things so you can wrap stuff around something, ie text around an image. I'll continue to play around with it and see what I come up with.position absolute screws up printing, so I personally prefer floats.
In fact, (not having read Eric's article), I don't really think there is a viable alternative to floating.Does this (<!-- m --><a class="postlink" href="http://cheers-sendai.com/Matthean.htm">http://cheers-sendai.com/Matthean.htm</a><!-- m -->) help?Floats don't suck (<!-- m --><a class="postlink" href="http://www.meyerweb.com/eric/thoughts/2004/07/17/floats-dont-suck-if-you-use-them-right/">http://www.meyerweb.com/eric/thoughts/2 ... hem-right/</a><!-- m -->)
There's the post from Eric on it. Not that a JS solution is what I want either. Since this isn't the print CSS that I'm working on, I don't mind using absolute positioning.
BonRouge, it looks off in Firefox, but I haven't played around with the code yet either, so I'll look into that later on.In what sense 'off' ? I know the position of your content isn't the same as you had, but I thought I'd leave that to you to fix. Does the footer seem OK there?I think this notion of semantic CSS is a little ridiculous. Floats work very well for layouts, keep all the styling in one place, and are simple to learn. It really has no downsides, once set up properly. I think it's really nitpicking to say you shouldn't use them because they weren't meant for layouts.Ben, tables weren't made for layout either. What's the difference? The difference is tables are HTML not CSS, and the W3C says not to use them for layout. To support my own belief that floats are acceptable for layout use, I'd like to ask Spufi: Where does the W3C that floats should not be used for layout?BonRouge, the borders in Firefox are of different sizes.
Jona, I agree. If we have sematic markup, then the formatting should follow the same idea. The main point to floating something is to have something wrap around what you are floating. The whole positioning aspect is just part of what happens in order for things to wrap around the floated object. Like Eric mentioned, without the clear property using float for the primary reason of position something would never have happened.
I don't see anything at W3C offhand that specifically said you can't use float for the primary purpose of layout positioning.Is this (<!-- m --><a class="postlink" href="http://cheers-sendai.com/Matthean.htm">http://cheers-sendai.com/Matthean.htm</a><!-- m -->) better?Originally posted by Jona
Ben, tables weren't made for layout either. What's the difference? Tables, being HTML, add more code and overall make layouts difficult to modify. Floats, being CSS, keep themselves in a CSS file, and have only one instance of themselves to be used by hundreds of pages, and are small, easily modifiable creatures. Both aren't meant to be used for layout, but you can't compare
<table>
<thead><tr><th colspan="2">Header</th></tr></thead>
<tbody><tr><td>Content</td><td>Nav</td></tr></tbody>
<tfoot><tr><td colspan="2">Footer</td></tr></tfoot>
</table>
with #header, #footer {clear: both;} #content {float: left; width: 80%;} #nav {float: right; width: 20%;}
BTW, I know that my table example doesn't validate (or work right...), but it gets the point across.Originally posted by spufi
Jona, I agree. If we have sematic markup, then the formatting should follow the same idea. The main point to floating something is to have something wrap around what you are floating. The whole positioning aspect is just part of what happens in order for things to wrap around the floated object. Like Eric mentioned, without the clear property using float for the primary reason of position something would never have happened.
I don't see anything at W3C offhand that specifically said you can't use float for the primary purpose of layout positioning.
Being consistent in our ideals throughout our HTML and CSS is a good idea, as it removes doubt in the minds of onlookers; perhaps at one time, the W3C didn't say tables weren't allowed for layout? In that case, we should await the W3C to say something about floats. Until then, however, we can assume that it is safe to use them. <Analogy> Just like you don't ask your parents for a glass of milk in the morning, you just drink it. If they say not to drink it, then you have a different situation on your hands. </Analogy> Remember, though, that we are dealing with CSS, and as such should accept the idea of taking what the W3C has given, and turning it into something lightweight, easily modifiable, with no downsides concerning accessibility, because the inaccessibles' software will not render it any differently than if no floats had been used. So in the long run, just because someone says you can have something, doesn't define how it can be used -- or abused -- but there is a fine-line between use and abuse (such as tables for layout vs. tables for tabular data). You can use floats in the experimental way, but using floats for your layout is not wrong. In section 9.8.3 of the W3C CSS2 visual rendering document (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS2/visuren.html">http://www.w3.org/TR/CSS2/visuren.html</a><!-- m -->), it gives an example of using a floated box for a simple layout.