Rows of div (blocs)

Discussion in 'CSS' started by jfleblanc, Jul 2, 2008.

  1. #1
    Hi, I do believe I have a hard one for css developpers.

    First, I do believe this is possible but I can't figure how.

    I would like to have 2 rows of div using different type of bloc (div)

    I would have divs that would be:
    - 300x300
    - 600x300
    - 300x600

    Here's an exemple of how it would look.

    [X][X][-X--]|­Â¯|[X][X]|¯|[X]
    [X][X][X][X]|_|[-X--]|_|[X]
    ­
    Blocks could be easily swapable between the different type (300x300,300x600, etc)

    Is this possible?

    If so, if you have an exemple of this working, it would be greatly appreciated.

    Thanks for your help.
     
    jfleblanc, Jul 2, 2008 IP
  2. Christian Little

    Christian Little Peon

    Messages:
    1,753
    Likes Received:
    80
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Just lookup how FLOAT works, that'll do most of what you are looking for.

    I don't have an example to give you, but if you read up on how the float attribute works you should be able to do this fairly easily.
     
    Christian Little, Jul 2, 2008 IP
  3. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #3
    flaot:left or display:inline would do it. Though if you do float:left (probably the easier solution), remember to clear it ;)
     
    blueparukia, Jul 2, 2008 IP
  4. DeeJayEl

    DeeJayEl Peon

    Messages:
    91
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You might want to try out one of the CSS frameworks as training wheels while you get comfortable. 960 grid system is pretty easy to follow.
     
    DeeJayEl, Jul 2, 2008 IP
  5. risoknop

    risoknop Peon

    Messages:
    914
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Nothing really complicated. This is just a question of basic CSS. You'll just use float attribute (float:left should be all you'll need) and clear attribute (clear:left will be enough unless you will float divs also to the right or to the center - then clear:both will do it). That's it.

    Don't have enough time now to code some quick example but I hope you can do it yourself. It's pretty easy.
     
    risoknop, Jul 2, 2008 IP