CSS menú lateral fijo con imágenes, ajuste

I have a position fixed SIDEmenu on my page. It contains 100 little images. Each image is 10px by 10px.

How can I make the images wrap vertically?

I mean if the browser height is 500, then it will show the images in 2 columns, if the browser screen height is 250 then 4 columns...like a vertical word wrap.

Is this possible using HTML and CSS?

Added: =It is a fixed menu bar on the left, with 100 tiny images. I am trying to make it work on the iphone and a computer. The images are to navigate the website, so every image is important. on the iphone the bottom images get cut off, so I wanted to wrap them. so basically I need the menu to be wider when on a smaller screen to fit in all the menu images

preguntado el 05 de septiembre de 12 a las 10:09

3 Respuestas

One options is to use css3's media queries:

@media (min-height:500px) and (max-height:1000px){
  #sidebar { width:20px; }
}

Aquí is a basic example i made, you can try it by resizing your browser (if it supports css3 media queries, of course)

Respondido el 05 de Septiembre de 12 a las 11:09

if you float:left your images, and the side bar is a div, with height in %, images will simply float around based on size. I'll try to make an example.

Por ejemplo aquí: http://jsbin.com/isiquw/1/

Respondido el 05 de Septiembre de 12 a las 10:09

Now the sidebar has unlimited width and all the images are just horizontal...is there any way to control sidebar and float the images at the same time? - David19801

I may not have understood the problem clearly. Care to share an example? - JAR.JAR.frijoles

I have no example sorry :(. It is a fixed menu bar on the left, with 100 tiny images. I am trying to make it work on the iphone and a computer. The images are to navigate the website, so every image is important. on the iphone the bottom images get cut off, so I wanted to wrap them. so basically I need the menu to be wider when on a smaller screen to fit in all the menu images... - David19801

Try this CSS properties in your SIDEmenu,

.sidemenu {
         width:25%;
         height:auto;
         float:left;
}

Remember, use one clear:both after the end of this DIV

Respondido el 05 de Septiembre de 12 a las 10:09

It's another css class, like: .clear{clear:both;}, it's use for removing the floating action just after the class where you have used "float". Use it like this: <div class="clear"></div> after your sidemenu. - Sudip amigo

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.