[thelist] Positioning graphics with CSS

[Mark Groen]

On Thu, 2006-03-02 at 10:38 -0600, jblanchard at pocket.com wrote:
> [snip]
> I'm not sure why it does that. You could add float:left to div.right,
> but it will need a width or some content.
> [\snip]
> 
> Tried it with float: left; and content but it completely hosed the
> layout.  I found the following hack which I applied after the #header
> declarations;
> 
> /* hide from other browsers \*/ 
> * html .left {margin-right: -3px;} 
> * html .right {margin-left: 0;} 
> /* end hide */
> 
> Seems that the 3px gap is known in IE 

? 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; }

hth!

-- 
cheers,

        Mark