having trouble positioning my divs next to each other

Question

I have been reading a few different answers to this type of question, as well as researching a bit on how to fix it, but I feel that my code is probably pretty messed up by now. I can't get my divs to sit next to each other so that I can create another larger div beneath them. I am very new at this and have been following tutorials and class reading to get this far, so I am sure something fairly simple or dumb is wrong. I just can't figure it out :-/. Here is the jsfiddle link http://jsfiddle.net/betyB/1/

CSS:

body {
    background-image: url(superhighway.jpg);
    background-repeat: repeat-x;
    background-attachment:scroll;
    background-color:#000000;
    background-attachment: fixed;
}
#main1 {
    position:relative;
    z-index:1;
    width: 600px;
    height: 400px;
    background-color:#000;
    margin: 5px;
    border: solid 4px #323232;
    padding: 10px;
    overflow:hidden;
    filter:alpha(opacity=50);
    -moz-opacity:.50;
    opacity:.50;
}
#content1 {
    position:relative;
    z-index:2;
    top:-425px;
    width: 960px;
    height: 800px;
    text-align:left;
    color:#FFF;
    font-weight: bold;
    margin: 35px;
}
#main2 {
    position:top;
    z-index:1;
    width: 600px;
    height: 400px;
    background-color:#000;
    border: solid 4px #323232;
    padding: 10px;
    margin-left:auto;
    margin-right:auto;
    margin-top:300px;
    filter:alpha(opacity=50);
    -moz-opacity:.50;
    opacity:.50;
}
#content2 {
    position:relative;
    z-index:2;
    top:-425px;
    width: 960px;
    height: 800px;
    text-align:left;
    color:#FFF;
    font-weight: bold;
    margin: 35px;
}

HTML:

<!DOCTYPE HTML>
<html>

<head>
    <title>Title Here</title>
    <link href="MyStyle.css" type="text/css" rel="stylesheet">
    <!--
    <script language="Javascript" type="text/javascript">
    <!--
    alert("");

    </script>
    -->
</head>
<body>
    <h1>My Ideal Job</h1>

    <div id="main1"></div>
    <div id="content1">
        This is to test the content of the div.
        <li>one</li>
        <li>two</li>
        <p></p>
        <li>a</li>
        <li>b</li>
    </div>

    <div id="main2" style="float:right;margin:0;"></div>
    <div id="content2">
        Testing number two div.
        <li>one</li>
        <li>two</li>
        <p></p>
        <li>a</li>
        <li>b</li>
    </div>
</body>
</html>

Hi, vlund! Welcome to StackOverflow! One of the things that is often helpful when asking questions like this is to provide a jsfiddle of your code, so that we can see exactly what is going on. Check out http://www.jsfiddle.net, copy and paste your code in the appropriate spots, save the fiddle and add a link to the fiddle to your post. Good luck and happy coding! :) — Zachary Kniebel, Apr 26 '14 at 18:26
Also, try to make your code as easily readable as possible, by formatting it for one thing. I will do that for now. — Jeroen Kransen, Apr 26 '14 at 18:30

score 0 · Answer 1 · edited May 23 '17 at 10:32

The first thing that you need to do is add the display: inline-block; property to your divs' CSS. Second, you may need to ensure that there is a whitespace (either via just adding a space or adding   if that is not sufficient, in your divs.

Extra Info

Positioning divs can be very simple, or it can be very challenging depending on your implementation and what you are trying to achieve. Most of the time, when speaking generally about positioning divs side-by-side the simple answer is to use the display:inline-block property. However, if you are trying to space everything out evenly and provide the maximum amount of cross-browser support, the solution gets more complicated.

Check out this post. It provides a terrific description of the challenges and various solutions to positioning divs side-by-side with maximum cross-browser support. The post is primarily concerned with evenly spacing the divs, which you can decide to do or not to do, but it provides a lot of great background and extra info that you should know. I have used the described solution for over a dozen implementations.

Here is the code for that solution:

HTML:

<div id="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <span class="stretch"></span>
</div>

CSS:

#container {
    border: 2px dashed #444;
    height: 125px;

    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;

    /* just for demo */
    min-width: 612px;
}

.box1, .box2, .box3, .box4 {
    width: 150px;
    height: 125px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1
}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

.box1, .box3 {
    background: #ccc
}
.box2, .box4 {
    background: #0ff
}

And here is a link to the fiddle that he provided: http://jsfiddle.net/EDp8R/3903/

score 0 · Answer 2 · answered Apr 26 '14 at 18:26

ok so I made this pen for you: http://codepen.io/anon/pen/zpxJt it does what I think you want, but your html has several errors, missing

you shouldn't be doing inline styles, I understand you're new to this so I get it. The layout you want to achieve can be difficult if your html structure is not correct.

having trouble positioning my divs next to each other

2 Answers2