Making divs “movable”

[yadolph]

Hi, guys!
I have a little problem making a html of my site.
I want it to be resolution-friendly, so most of the elements adapt to the width of the browser. I’ve almost made it, but now I’m stuck with one problem. I have 6 blocks of so called highlights where the most interesting things would be. I wanted each block to be a fixed-width, but that they would arrange smartly. For example, if one has resolution of 1024×768, he’ll see two columns of three blocks. If it’s 1280px width, he’ll still be seing two columns, but they would be centered pretty well and have bigger gaps between. And with 1680px width one will see three columns with two elements each. I hope you get the idea. But how can I do this?

The best thing I did was making those div’s float left, they organise in columns I want, but those columns aren’t centered, so they could look pretty well in 1024 and 1680 width’s, but in other they look pretty ugly. The css code fot those six divs:

.highlight {

position: relative;

width: 425px;

margin: 10px;

display: block;

border: 1px #000 dashed;

height: 100px;

float: left;

}

Or maybe you know some another way for this to look cool?

[shavenraver]

I think Chris Coyier does something like what you’re describing on this very site.

Resize this page. Out wide the Search box is inline with the tabs… slightly narrower it drops down…. narrower still and the tabs get thinner…. until finally the tabs style change altogether

With a bit of Chrome: Dev tools, or firefox: firebug extension you might be able to figure it out

[yadolph]

Hi again guys. I’ve made it working :)
That’s the code for me:

just some text









just some text









just some text









just some text









just some text









just some text















.highlights

{

margin: 0em 0 0 -2em;

text-align: center;

}



.highlight

{

text-decoration: none;

display: -moz-inline-box;

display: inline-block;

vertical-align: top;

text-align: left;

margin: 3em 0 0 2em;



}



.highlight .r

{

width: 24em;

float: left;

border: 1px #000 dashed;

}

I found useful information here: http://www.artlebedev.ru/tools/technogrette/html/thumbnails-center/
It’s in Russian, so that could be hard for one to read explaining comments. But still, that was useful.

[Author]

Posts