Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Getting divs to stay on the same line

Options
  • 06-03-2011 9:27pm
    #1
    jumbone
    Registered Users Posts: 609 ✭✭✭


    [HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Title</title>
    <style type="text/css">
    html, body {height: 100%; margin: 0; padding: 0;}
    #container {width:98%; height:100%; align:center; }
    #header {position:relative; z-index:1; width:100%; height:80px; margin-top:0; margin-bottom:0; padding:0; background-color: black; }
    #space {position:relative; width:100%; margin-left: auto; margin-right: auto; margin-top:0px; margin-bottom:0; padding:0; }
    #left {background-color: blue; width:10%; min-height:100%; float:left; }
    #right {background-color: green; width:10%; min-height:100%; float:right; }
    #content {position:relative; min-height:100%; width:80%; margin-left: auto; margin-right: auto; margin-top:0px; margin-bottom:0; padding:0; background-color: red; }
    .center {margin:0 auto;}
    </style>
    </head>
    <body>
    <div id="container" class="center">
    <div id="header"></div>
    <div id="space"><br /><br /></div>
    <div id="left"" >blah</div>
    <div id="content">lorem ipsum</div>
    <div id="right">blah blah blah</div>
    </div>
    </body>
    </html>
    [/HTML]

    In this layout, why does the div on the right get forced down? I wanted it to be a simple 3 column layout but it is getting confusing!

    Also, can i set a px width for the center div and keep the sides as %s ? If so, would I have to ditch the container div and use padding/margins for the white at the sides?

    I have tried a few different ways to sort this so there may be a few bits lying around that serve no purpose so if you spot something extraneous, let me know.

    jumbone


Comments

  • Options
    #2
    Pablod
    Registered Users Posts: 489 ✭✭Pablod


    because you are floating
    You need to float your #content div left otherwise your #right div doesn't know where to go.

    on the % widths
    You can keep the left/content/right divs as % widths as long as your #container div has a width and as long as the total is 100%

    Just a quick note on your code below -remove the extra quotes from the #left <div id="left"" >blah</div>


  • Options
    #3
    jumbone
    Registered Users Posts: 609 ✭✭✭jumbone


    OK, i've done what pablod said and it worked perfectly. Now what I want to do is have the header div with rounded corners on the bottom and the left and right divs with rounded corners on the left and right respectively (kind of like http://www.techguy.org/ )

    here is my code so far, the rounded-corners class is one I found on a tutorial and i'm not set on using it but i would prefer not to use images

    [HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Title</title>
    <style type="text/css">
    html, body {height: 100%; margin: 0; padding: 0;}
    #container {width:98%; height:100%; align:center; }
    #header {position:relative; z-index:1; width:100%; height:80px; margin-top:0; margin-bottom:0; padding:0; background-color: black; }
    #space {position:relative; width:100%; margin-left: auto; margin-right: auto; margin-top:0px; margin-bottom:0; padding:0; }
    #left {background-color: blue; width:10%; min-height:100%; float:left; }
    #right {background-color: green; width:10%; min-height:100%; float:right; }
    #content {position:relative; min-height:100%; width:80%; float:left; margin-left: auto; margin-right: auto; margin-top:0px; margin-bottom:0; padding:0; background-color: red; }
    .center {margin:0 auto;}
    .rounded-corners {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
    }

    </style>
    </head>
    <body>
    <div id="container" class="center">
    <div id="header" class="rounded-corners"></div>
    <div id="space"><br /><br /></div>
    <div id="left" >blah</div>
    <div id="content">lorem ipsum</div>
    <div id="right">blah blah blah</div>
    </div>
    </body>
    </html>
    [/HTML]


  • Options
    #4
    jumbone
    Registered Users Posts: 609 ✭✭✭jumbone


    bump


  • Options
    #5
    Liam Byrne
    Closed Accounts Posts: 18,163 ✭✭✭✭Liam Byrne


    Put the "content" div after the "right" div, and make sure its width will fit within the "center" (hate that spelling) div (including margins, paddings, border radius, etc)


Advertisement