[thelist] making DIV widths strict

[Simon Willison]

At 18:58 10/09/2002 +0100, Dave Stevens wrote:
>I need to have a menu where separate images give the impression of being one
>big block.
>
>I have done this many times with tables, obviously very easy that way.
>However, in my latest site I'm having a crack at the whole XHTML/CSS thing
>:)
>
>So I thought having a DIV element encasing my images with the width
>specified as the same as that of the images would work, with each image
>being displayed below the previous one.
>
>However, this has not worked - the images just spread across the width of
>the page. I cannot use <br /> in front of each image, as this leaves me with
>a line between each image, destroying the design...
>
>Am I being extremely dense?
>
>The CSS:
>div.rollmenu {position: absolute;
>               top: 74px;
>               left: 0px;
>               width: 124px;
>               z-index: 1;
>               height: 133px;
>               }
>
>The HTML, scaled down :) :
>
><div id="rollmenu">
>       <img />
>       <img... />
>       <img />
>       <img... />
>       <img />
>       <img... />
>       <img />
>       <img... />
>     </div>

Firstly, your CSS selector is wrong. You need div#rollmenu (because
rollmenu is an ID), not div.rollmenu

Secondly, the effect you are looking for could be better served by applying
display: block; to the images:

div#rollmenu img {
   display: block;
}

Hope that helps,

Simon Willison

--
Web Developer, www.incutio.com
Weblog: http://simon.incutio.com/