[thelist] Stylesheet confusion

Drew Trusz drew.trusz at gmail.com
Thu Mar 13 08:56:44 CDT 2008


On 3/12/08, Chris Ditty <cditty at gmail.com> wrote:
> Hi all.  I am trying to get 2 images on my page on the same line on opposite
> sides of the page.  The images need to be 163 pixels from the edges with
> that gap filled in with a color.
>
> Below is what I have now and for some reason it refuses to work.

> <head>
> <title></title>
> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
> <meta http-equiv="expires" content="-1">
> <meta http-equiv="pragma" content="no-cache">
> <style type="text/css">
> #blueFillerLeft{
>    background-color: #395D91;
>    width: 163px;
>    top:0px;
>    position: relative;
>    z-index:2;
> }
> #blueFillerRight{
>    background-color: #395D91;
>    right: 0px;
>    width: 163px;
>    top: 0px;
>    position: relative;
>    z-index:2;
> }
> #curvedLeft{
>    margin: 0px 0px 0px 163px;
> }
> #curvedRight{
>    margin: 0px 163px 0px 0px;
> }
> </style>
> </head>
>
> <body>
> <div id="blueFillerLeft"><div id="curvedLeft"><img
> src="../images/left_header_curve.gif"></div></div>
> <div id="blueFillerRight"><div id="curvedRight"><img
> src="../images/right_header_curve.gif"></div></div>
>
> </body>
> </html>
> --
>


You've got two block level elements (div). By definition block
elements fill the width of the viewport with their height dictated by
content. You've just used only the first 163px plus the width of the
image. The remainder of the viewport to the right edge is empty white
space. The browser looks for the next block element then moves down
below the first block and starts again.

Assuming you've left the doctype out for brevity, follow Nan's
suggestion with some caveats.

To use the floats properly, you need to give the containers, the
Filler divs, a width which included the width of the images plus the
163px margin. If you don't, understand that your images are being
pushed outside their container and at some point in some browser this
is likely to have the unintended consequences -- it'll break the
design.

So assuming a pitcure width of 100px you'd do something like this:

#blueFillerLeft{
   background-color: #395D91;
   top:0px;
   /* position: relative;  Remove - it adds nothing */
   z-index:2;
   float:left;  /* added */
   width: 263px;
}
#blueFillerRight{
   background-color: #395D91;
   float:right;  /* added */
   right: 0px;
   width: 263px;
   top: 0px;
   /* position: relative;  Remove - it adds nothing*/
   z-index:2;
}

If you want text between the images, begin the text after closing the
right fill.


And be kind to browsers and users, add width and height to the img
elements; improves the rendering speed.

drew



More information about the thelist mailing list