[thelist] Positioning graphics with CSS
Drew Trusz
drew.trusz at gmail.com
Fri Mar 3 12:39:52 CST 2006
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
More information about the thelist
mailing list