[thelist] Positioning graphics with CSS

jblanchard at pocket.com jblanchard at pocket.com
Thu Mar 2 11:46:32 CST 2006

? Maybe I missed the first part of this post and something obvious...

Nothing to do with a 3 px gap afaik, you need something for the browser
to draw, iow there isn't anything there so you just get the defaults for
an empty container, gaps and all. 

Also along the lines of missing the first part of the conversation, you
wanted these images to align beside each other? A container will take up
whatever space it is allowed, which is the full width of the browser
window so you must tell it to float if you want it to float, otherwise
you just get stacks of divs.

This works:

<div id="header">
         <div class="left"><img src="img-left.gif" alt="left" /></div>
         <div class="right"><img src="img-right.gif"
alt="right" /></div>
</div><!-- /header -->

with this CSS for side-by side:

.left { float:left; }
.right { float:left; }

The reason for using the images as background for the header divs is so
that other elements can be positioned on top of the graphics with
worrying about the placement of those graphics or having to cut them up
further. The hack that I eventually applied works well and the graphics
look fine in other browsers. This was strictly a problem with IE which I
think I failed to mention.

More information about the thelist mailing list