www.webdeveloper.com
Results 1 to 2 of 2

Thread: div placement

  1. #1
    Join Date
    Nov 2004
    Location
    xxxyyy
    Posts
    357

    div placement

    I have 3 divs i.e div1 , div 2 , div 3

    I want div1 and div 2 center aligned and side by side with a little gap in between.

    div 3 would be just beneath div1 and div 2

    see the desired screen here(attached)

    How do I arrange div such a way ?


    I understand I need to float 2 divs (i.e div1 and div 2 ) in one line..and need to put div3 in the next line.

    my question is :
    how do put I another div(i.e div3) in next line ?
    how do I put a little gap between div1 and div2 which would work for all resolution.

    Please look at the desired screen attached so that you'll understand what look I want

    What is the solution ?
    Attached Images Attached Images

  2. #2
    Join Date
    Aug 2012
    Posts
    7
    body{
    width:900px;
    margin: 0 auto;
    }

    .div1 {
    float: left;
    padding: 0 50px 150px 25px;
    }

    .div2 {
    float: left;
    padding: 0 50px 25px 150px;
    }

    .div3 {
    clear: left;
    margin: 0 auto;
    }
    better yet, I would put div1 & div2 in another div, to contain them both, then just margin align them centered in that div. You can then just use padding on the right of div1, and the left of div2 to provide the space you need inbetween them.

    There are plenty of ways to do this, and obviously yours isnt going to look like my example code. Depending on your main page width, the size of the divs, etc. But what you should focus on is the "float:"s and the "clear".

    the "float: left;" makes the div float to the left side, while allowing the surrounding content to be on the right side of it.
    You will notice if you do not use the "clear: left;" on the third div, that it will also move up on the right side of your second div. That is what the clear is for, it prevents anything from floating on the left side of it.

    You could use different forms of measurement instead of pixels of coarse, if you want it to scale. But that is a whole other explanation entirely and should be researched on your own, to help you deciede on what you wish to use. It seems you are looking for Relative Units of Measurement. (be realize they will scale, and you need to know how much to let it scale, and let it stay fluid with the rest of the layout.) I always use "px" for div sizes. Which is relative, as most screens have different resolutions.


    Here are the relative units of measurement:
    px - pixels
    em - em space
    % - percentage of space avaliable on screen
    ex - x space

    Here are the non changing Absolutes:
    pt - points (72 points per inch, 12 points to pica)
    pc - picas (6 picas to an inch)
    cm - centimeters
    in - inches
    mm - millimeters



    Check those out to deciede what you want to do for your measurements.
    But really to each his own, as everyone has their own ways of doing things, and different tasks require different things.

    Also my code is just a quick explanation, take the "float:" and "clear:" lesson from it, only. So you can implement it in your own page.

    Good luck.
    If you need more help, code would help.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles