Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Positioning divs - turns out it's actually kinda hard

    So I started learning html/CSS a few weeks back and I've been steadily going through a bunch of tutorials that have been introducing new features to me. In order to get some practice, I've been playing about in Notepad++ in my spare time, but I've been having a lot of trouble with positioning divs (it's surprisingly difficult when you've got a bunch of them on a page).

    Anyway, this is what I aimed to create:



    ...aaand this is what my code (forthcoming) gives me at the moment:



    For the life of me, I just cannot make #square and #main line up horizontally with #column beneath #main.

    I've tried everything I can think of, but for the sake of clarity, here's my code without me doing anything to try and make them align:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Testing</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
    </head>
    <body>
    <div class="button" id="x1"></div>
    <div class="button" id="x2"></div>
    <div class="button" id="x3"></div>
    <div class="button" id="x4"></div>
    <div class="button" id="x5"></div>
    <div id="square"></div>
    <div id="main"></div>
    <div id="column"></div>
    </body>
    </html>
    And here's the CSS:

    Code:
    .button {
    height:50px;
    width:150px;
    border-radius:5px;
    background-color:#C7C7C7;
    border: 2px solid black;
    display:inline-block;
    }
    
    #square {
    height:150px;
    width:150px;
    border-radius:5px;
    background-color:#FFFFFF;
    border:2px solid black;
    }
    
    #main {
    height:600px;
    width:600px;
    background-color:#FFFFFF;
    border: 2px solid black;
    border-radius:5px;
    }
    
    #column {
    height:450px;
    width:150px;
    border-radius:5px;
    background-color:#FFFFFF;
    border:2px solid black;
    }
    I've tried floating, I've tried messing about with margins, I've tried giving #square and #main the same class, I've tried fiddling with fixed/absolute/relative positioning to see if that makes a difference. What basic principle have I neglected which isn't letting me align my divs correctly?

    Also, if I wanted to create one, all-encompassing div that contains every other div here, would it be possible to preserve what positioning I have now, without editing any of the other divs? I was thinking that I might be able to wrap everything in one div that has a fluid length, but maybe margins of 20px either side, for the sake of presentation. I can't seem to approach that task without messing up what I already have, however. As a general rule, how does absolute/relative/fixed position apply when I'm creating divs within divs? And if I'm structuring divs within divs, is it easier to start from the innermost layer and work my way outwards? (This was my original thinking). I thought I understood more than this, but the only thing I've learned today is how frustrated I can get before my productivity drops to 0.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Just change
    Code:
    <div id="square"></div>
    <div id="main"></div>
    <div id="column"></div>
    to
    Code:
    <div id="square"></div>
    <div id="column"></div>
    <div id="main"></div>
    and then change your CSS to
    Code:
    #square {
    float:left;
    height:150px;
    width:150px;
    border-radius:5px;
    background-color:#FFFFFF;
    border:2px solid black;
    }
    #column {
    float:left;
    height:450px;
    width:150px;
    border-radius:5px;
    background-color:#FFFFFF;
    border:2px solid black;
    }
    #main {
    height:600px;
    /*width:600px;*/
    margin-left:160px; /*150+10 */
    background-color:#FFFFFF;
    border: 2px solid black;
    border-radius:5px;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply, but that still doesn't get the positioning right. It just pushes #square and #square into the top-left corner and causes #main to overlap.

  • #4
    New Coder
    Join Date
    Feb 2013
    Location
    Liverpool
    Posts
    68
    Thanks
    1
    Thanked 3 Times in 3 Posts
    You need to put the 2 column divs next to other and float them left with a specific width. Then float the main content left and give that a width and ensure the 2 widths aren't more than the width of the container.

    If that doesn't work try putting your 2 div column in a container div and float that next to the main column as well
    Working for Edge Three Sixty doing Drupal Development

  • #5
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    I would put the five .button divs in a container of the correct width and float it left. Then put the square and column in another container and float it left. Then float the main div up against it. No extra charge for a couple of divs, and it makes the code unambiguous.

    Warning, float removes all natural margins, so you have to put margins in.
    Last edited by DrDOS; 09-20-2013 at 03:06 PM. Reason: Add warning.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Quote Originally Posted by Schmett View Post
    Thanks for the reply, but that still doesn't get the positioning right. It just pushes #square and #square into the top-left corner and causes #main to overlap.
    Sorry, I forget to clear the float for the second box. See the highlighted code below
    Code:
    #column {
    float:left;
    clear:left;
    height:450px;
    width:150px;
    border-radius:5px;
    background-color:#FFFFFF;
    border:2px solid black;
    }
    http://jsfiddle.net/BnCYm/2/
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    This is what you get when you correct for the margins.
    Code:
    <html>
    <head>
    <title>Testing</title>
    <style type="text/css">
    body
    {
    width:800px;
    margin:0 auto;
    }
    .button {
    height:50px;
    width:150px;
    border-radius:5px;
    background-color:#C7C7C7;
    border: 2px solid black;
    display:inline-block;
    }
    #top{margin-left:5px;}
    #left{float:left;}
    #square {
    height:150px;
    width:150px;
    margin:5px;
    margin-top:0;
    border-radius:5px;
    background-color:#FFFFFF;
    border:2px solid black;
    }
    
    #main {
    float:left;
    
    height:600px;
    width:600px;
    background-color:#FFFFFF;
    border: 2px solid black;
    border-radius:5px;
    }
    
    #column {
    height:450px;
    width:150px;
    margin: 5px;
    border-radius:5px;
    background-color:#FFFFFF;
    border:2px solid black;
    }
    
    </style>
    </head>
    <body>
    <div id="top">
    <div class="button" id="x1"></div>
    <div class="button" id="x2"></div>
    <div class="button" id="x3"></div>
    <div class="button" id="x4"></div>
    <div class="button" id="x5"></div>
    </div>
    <div id="left">
    <div id="square"></div>
    <div id="column"></div>
    </div>
    <div id="main"></div>
    </body>
    </html>
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #8
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for all the replies guys; I actually used a combination of the solutions posted to get the layout right. I even managed to center everything horizontally by wrapping it all in a div. There is one other thing I'm trying to do, however, which is best demonstrated by a picture:



    The blue and everything inside is obviously what I have at the moment, but I'd like to have another larger div, also centered, which sits behind it (the red box). The problem I'm having is that I can't seem to centre my divs vertically using the same technique as centering them horizontally. Here's my updated code:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Testing</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
    </head>
    <body>
    <div id="back"></div>
    <div id="container">
    <div class="button" id="x1"></div>
    <div class="button" id="x2"></div>
    <div class="button" id="x3"></div>
    <div class="button" id="x4"></div>
    <div class="button" id="x5"></div>
    <div id="square"></div>
    <div id="column"></div>
    <div id="main"></div></div>
    <div>
    </body>
    </html>
    And just the CSS for #back:

    Code:
    #back {
    margin-left:auto;
    margin-right:auto;
    height:800px;
    width:1200px;
    z-index:-1;
    border-radius:5px;
    border:2px solid black;
    position:absolute;
    }
    I've been reading about different solutions to this problem, and one suggestion was to wrap it in a <p> and use text-align to get it centered vertically. Is this a practical to solution for what I'm trying to accomplish though, or is there perhaps some better way to accomplish this? I feel like I could achieve the same effect by changing the position and margin-top, but nothing I've tried so far works.


  •  

    Posting Permissions

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