[thelist] Positioning graphics with CSS

[Drew Trusz]

On 3/2/06, jblanchard at pocket.com <jblanchard at pocket.com> wrote:
> Howdy group!
>
> I am trying to position 2 graphics side by side with each other and
> having problems getting the gap between them to close. Here is the CSS
>
> /* header */
> #header {
>         position: fixed;
>         background: transparent;
>         padding: 0px;
> }
> #header div.left {
>         background-image:
> url(../grfx/1280_header_left_anim_out_only.gif);
>         background-repeat: no-repeat;
>         float: left;
>         width: 270px;
>         height: 165px;
>         margin: 0px 0px 0px 0px;
> }
> #header div.right {
>         background-image: url(../grfx/1280_header_right.gif);
>         background-repeat: no-repeat;
>         margin: 0px 0px 0px 0px;
>         height: 165px;
>         padding: 0px 0px 0px 0px;
> }
>
> And here is the HTML
>
> <div id="header">
>         <div class="left"></div>
>         <div class="right"></div>
> </div><!-- /header -->
>
You might want to look at collapsing margins in css2.1 to see where
the problem originates:

http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Also, the 3px issue is fully discussed on position-is-everything. If
you haven't been there before:

http://www.positioniseverything.net

drew