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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jul 2013
    Location
    UK
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Divs Lined Up Side by Side

    Hi guys, please excuse my ignorance over this. I'm learning as I go...

    I have been trying to find the answer to this without having to post. I know a lot of people have asked it before and I've tried to implement some of the answers they received.

    I have a div containing textual content and a div containing 2 CTA button images (one on top of the other) and I'd like them to sit side by side on the same level so that the CTA buttons are sitting to the right of the text content.

    Trying to learn from previous answers, this is my CSS:

    Code:
    #ctacontainer {
           width: 100%;
           position: relative;
    }
    
    #ctacontent {
           width: 50%;
           position: absolute;
    }
    
    #ctabuttons {
           width: 50%;
           position: absolute;
    }
    This is my HTML:

    Code:
    <div class="ctacontainer"><div class="ctacontent">Textual content</div>
    
    <div class="ctabuttons">CTA Buttons</div></div>
    But my second div is still sitting underneath my first div. Maybe I'm missing some rules?

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    You're better off using float than absolute positioning for this:

    Code:
    #ctacontainer {
           width: 100%;
           overflow:hidden;/*clear floats at the end of the containing div*/
    }
    
    #ctacontent {
           width: 50%;
           float:left;
    }
    
    #ctabuttons {
           width: 50%;
           float:left;
    }
    There's a few ways of doing this, this is probably the simplest.

    You could have used absolute positioning - you'd need to set the left and top position as well on #ctacontent and #ctabuttons - but then #ctacontainer will not extend the enclose the other two divs unless given an explicit height, which will quickly become a pain to maintain.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #3
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there Perrie,

    and a warm welcome to these forums.

    Try it like this...
    Code:
    
    .ctacontainer {
     }
    
    .ctacontent {
        width:50%;
        float:left;
     }
    
    .ctabuttons {
        width:50%;
        float:left;
     }
    Note that id is "#" and class is "." in CSS.


    coothead

  • #4
    New to the CF scene
    Join Date
    Jul 2013
    Location
    UK
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi guys! Thanks for the welcome, Coothead.

    Tried both methods and it's still not quite working... The second div is still underneath the first BUT...

    Before your suggestions, the text in my first div extended across the page, whereas now the text has condensed so that there is some blank space to the right. So I must be getting somewhere.

    Do you think the problem might be that the divs are too wide to sit next to each other? The images in my second div are 300px wide. Although the first div is just text so that should squash up accordingly shouldn't it?

  • #5
    Regular Coder syco__'s Avatar
    Join Date
    Oct 2005
    Location
    Australia
    Posts
    194
    Thanks
    41
    Thanked 4 Times in 4 Posts
    I changed your
    Code:
    position: absolute;
    to
    Code:
    display:inline;
    in both divs.

    As far as I am aware if you make something position:absolute it pushes everything up and under it as if it is floating mid air as they are both absolute they float underneath each other.
    .pLeAd InSaNiTy.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Quote Originally Posted by Perrie View Post
    Hi guys! Thanks for the welcome, Coothead.

    Tried both methods and it's still not quite working... The second div is still underneath the first BUT...

    Before your suggestions, the text in my first div extended across the page, whereas now the text has condensed so that there is some blank space to the right. So I must be getting somewhere.

    Do you think the problem might be that the divs are too wide to sit next to each other? The images in my second div are 300px wide. Although the first div is just text so that should squash up accordingly shouldn't it?
    syco - both coothead and I have removed position:absolute from the css

    perrie, can you post a link to your page? Otherwise we're probably guessing.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #7
    New to the CF scene
    Join Date
    Jul 2013
    Location
    UK
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ha, it's ok... It's working. Again, please excuse my ignorance... I was looking at the page through my browser from my documents. I hadn't actually put it on the server. Just put it on the server in order to show you guys and now the divs are lining up correctly! Didn't realise it'd make a difference

    THANK YOU!

  • #8
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there Perrie,

    the code that SB65 and I gave does work with the code that you gave us....
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style>
    .ctacontainer {
        overflow:hidden;
        border:1px solid #000;
     }
    
    .ctacontent {
        width:50%;
        float:left;
        background-color:#ccc;
     }
    
    .ctabuttons {
        width:50%;
        float:left;
        background-color:#999;
     }
    </style>
    
    </head>
    <body>
    
    <div class="ctacontainer">
    
    <div class="ctacontent">Textual content</div>
    
    <div class="ctabuttons">CTA Buttons</div>
    
    </div>
    
    </body>
    </html>
    ...so there must be an omission of information on your part.

    coothead

  • #9
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Quote Originally Posted by Perrie View Post
    Just put it on the server in order to show you guys and now the divs are lining up correctly! Didn't realise it'd make a difference

    THANK YOU!
    That sounds like something may have been cached in your browser. Anyway, it works...
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #10
    New to the CF scene
    Join Date
    Jul 2013
    Location
    UK
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'd always assume it's something I'd done wrong or understood wrong, Coothead, what with my embarrassing lack of knowledge lol.

    You've been a great help all, thank you.


  •  

    Posting Permissions

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