Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Making divs “movable”

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #31776
    yadolph
    Member

    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?

    #58130
    shavenraver
    Member

    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

    #58077
    yadolph
    Member

    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.

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.