Home/ Questions/Q 6245665
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T12:32:48+00:00

I am new to CSS and I am trying to create something unusual. My

  • 0

I am new to CSS and I am trying to create something unusual.

My code:

<body>
<div style="background-color:#C1C1C1; height:100%;">
    <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">div1
    </div>
    <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">div2
    </div>
        <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">div3
    </div>
        <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">div4
    </div>
        <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">div5
    </div>
        <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">div6
    </div>
        <div style="background-color:#F0F0F0; width:100px; height:100px; display:block; ">div7
    </div>
</div>
</body>

let’s say screen is 250px height -> the main div height will be 250px too then.

Result: 

div1
div2
div3
...

I know that setting float:left; will display them like

div1 div2 div3 div4 div5 ....

I would like to get:

div1 div3 div5 div7
div2 div4 div6

It’s like horizontal gallery.
Also, when there would be more divs, is it possible to make main div’s width variable and add an x-scrollbar?

This is supposed to work on Internet Explorer 7 and higher only. Also, JavaScript is an option.

Thanks in advance!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What you’re trying to achieve is quite easy with CSS3: http://jsfiddle.net/Ykkyg/

    That fiddle provides the standard CSS for it, and the engine-specific properties for Webkit (Safari, Chrome) and Gecko (Firefox).

    There’s a couple of problems with this approach though:

    • First, IE doesn’t support it.
    • Second, If that column set grows taller than the browser window, you’re going to force your user to scroll up and down to read just one continuous piece of text. This sucks.

    Without CSS3, you can achieve this effect by carefully sizing all elements a priori, but that doesn’t scale, and I’m afraid I know of no generic solution to the problem that doesn’t involve some non-trivial javascript.

    • 0