Hi, I'm trying my damnest to create an XHTML 1.1, tableless design to match this (I thought) simple design (<!-- m --><a class="postlink" href="http://www.pixel8labs.com/dev/p8_orig.jpg">http://www.pixel8labs.com/dev/p8_orig.jpg</a><!-- m -->).
Two problems:
1. Strange gap showing up in IE (<!-- m --><a class="postlink" href="http://www.pixel8labs.com/dev/p8_ie.jpg">http://www.pixel8labs.com/dev/p8_ie.jpg</a><!-- m -->) between two div's in the top and bottom div containers. Looks fine in FF (<!-- m --><a class="postlink" href="http://www.pixel8labs.com/dev/p8_ff.jpg">http://www.pixel8labs.com/dev/p8_ff.jpg</a><!-- m -->). All the code has been validated against W3C.
2. Is there any way of making the #maincontent DIV fill up all the available space so that the #bottomrow touches the bottom of the screen? I had tried using a background graphic to make faux columns as mentioned at ALA, but I'd rather not have to do that.
Any help?
-GiannaFloating always gives small white margins in IE. Bit of a pain but there we go. Try absolute positioning one in the top corner or overlapping them etc.
With your second one I'll have to look again and try a few things myself, but generally
html, body {
height: 100%;
}
is a good start.If both div's are floated there is no gap.
Two problems:
1. Strange gap showing up in IE (<!-- m --><a class="postlink" href="http://www.pixel8labs.com/dev/p8_ie.jpg">http://www.pixel8labs.com/dev/p8_ie.jpg</a><!-- m -->) between two div's in the top and bottom div containers. Looks fine in FF (<!-- m --><a class="postlink" href="http://www.pixel8labs.com/dev/p8_ff.jpg">http://www.pixel8labs.com/dev/p8_ff.jpg</a><!-- m -->). All the code has been validated against W3C.
2. Is there any way of making the #maincontent DIV fill up all the available space so that the #bottomrow touches the bottom of the screen? I had tried using a background graphic to make faux columns as mentioned at ALA, but I'd rather not have to do that.
Any help?
-GiannaFloating always gives small white margins in IE. Bit of a pain but there we go. Try absolute positioning one in the top corner or overlapping them etc.
With your second one I'll have to look again and try a few things myself, but generally
html, body {
height: 100%;
}
is a good start.If both div's are floated there is no gap.