Align two divs next to each other?

  • Hi,

    Seems like I end up asking for help on a daily basis now, not as good as I used to be.. Anyway, as soon as I change the width on my sidebar (#primary ?) above 145px it automatically drops beneath the main content (#content) rather than staying in line with it. Here’s the link: https://apps.thatrule.com/ (ignore the colours for now, that’s just for me to differentiate between the divs). Basically summed up I’m trying to make the blue and the black divs line up next to each other. Any help would be greatly appreciated.

    Thanks in advance!

Viewing 4 replies - 1 through 4 (of 4 total)

  • Try placing your sidebar inside the container div.

    Thread Starter tlw22

    (@tlw22)

    Nope, still no luck

    Thread Starter tlw22

    (@tlw22)

    Just realized that the maximum I could have was 240px, so I did a quick search through all my documents and found margin: 0 -240px 0 0; Changed this to suit my sidebar and all is now good. Thanks for your help.

    That sure is a confusing way to put divs side-by-side. Here’s how I do it:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "https://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <title></title>
    <style  TYPE="text/css">
        .container { width: 960px; margin: 0px auto; background-color: #999; }
        .main-content { width: 540px; float: left; display: inline; margin-left: 10px; margin-right: 10px; background-color: #F3F3F3; }
        .sidebar { width: 380px; float: left; display: inline; margin-left: 10px; margin-right: 10px; background-color: #CCC; }
        .clear { clear: both; display: block; height: 0px; overflow: hidden; visibility: hidden; width: 0px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="main-content"><h1>Main Content</h1></div>
        <div class="sidebar"><h1>Sidebar</h1></div>
        <div class="clear"></div>
    </div>
</body>
</html>
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Align two divs next to each other?’ is closed to new replies.