How to get my div boxes to go together

Question

I have this HTML and CSS, I want to know why my left-nav div shows up underneath the content-box div. I would like them to be side by side.

Please don't flame me, I'm sure this is a stupid question but I haven't worked very much in CSS and I'm trying to learn.

    @charset "utf-8";
   /* CSS Document */

 #header {
height: 250px;
width: 728px;
border: dashed #000;
text-align:center;
font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
font-size:12px;
}

#footer {
height: 28px;
width: 728px;
border: dashed #000;
text-align:center;
font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
font-size:12px;
}

#left-nav {
height: 500px;
width: 150px;
border: dashed #000;
text-align: center;
font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
font-size: 14px;
position: relative;

}

#content-box {
height: 500px;
width: 578px;
border: dashed #000;
margin-right: 0px;
margin-left: 155px;
margin-top: 0px;
margin-bottom: 0px;
}

.

<body>

<div id="header">
this is the header
</div>

<div id="content-box">
</div>

<div id="left-nav">
<ul id="left-nav-links">
<li> <a href="#"> Link Item #1 </a></li>
<li> <a href="#"> Link Item #2 </a></li>
<li> <a href="#"> Link Item #3 </a></li>
<li> <a href="#"> Link Item #4 </a></li>
<li> <a href="#"> Link Item #5 </a></li>
</ul>
</div>

<div id="footer">
this is the footer
</div>

</body>
</html>

score 2 · Answer 1 · answered Oct 28 '13 at 19:56

Div elements are by default block-level elements. They don't allow you to have multiple elements on the same line.

What you need is for the element to be inline-level. This would allow multiple elements to be "in-line" with each other.

Problem with inline, is you cannot set the height and width as you can a "block" element. So the answer is inline-block. This element flows inline with other inline-block elements but also allows for height and width and such.

So you need to add the CSS display:inline-block to both "content-box" and "left-nav" elements.

score 1 · Answer 2 · edited May 23 '17 at 11:50

you just need to:

use float:left for your sidebar and content. this makes them go to the left side of the line. you should use this when you need two (or more) elements side by side. read this for a description on how float works.
move sidebar element to before content.
also use display:inline-block for your sidebar and content. so they can have width and height.
add an element with clear:both after them. this clears float on both sides, and allows next elements not to have float.
please note that border-width is not counted as element width, and your content no longer needs a margin-right value.

=================================

<html>
<head>
<style>
    @charset "utf-8";
   /* CSS Document */

    #header {
        height: 250px;
        width: 728px;
        border: dashed #000;
        text-align:center;
        font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
        font-size:12px;
    }

    #footer {
        height: 28px;
        width: 728px;
        border: dashed #000;
        text-align:center;
        font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
        font-size:12px;
    }

    #left-nav {
        float:left;
        display:inline-block;
        height: 500px;
        width: 150px;
        border: dashed #000;
        text-align: center;
        font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
        font-size: 14px;
        position: relative;
    }

    #content-box {
        float:left;
        display:inline-block;
        height: 500px;
        width: 572px;
        border: dashed #000;
        margin-right: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    #clear{
        clear:both;
    }

    #container{
        display:inline-block;
    }
    body{
            text-align:center;
    }
</style>
</head>

<body>
<div id="container">
    <div id="header">
        this is the header
    </div>


    <div id="left-nav">
        <ul id="left-nav-links">
            <li> <a href="#"> Link Item #1 </a></li>
            <li> <a href="#"> Link Item #2 </a></li>
            <li> <a href="#"> Link Item #3 </a></li>
            <li> <a href="#"> Link Item #4 </a></li>
            <li> <a href="#"> Link Item #5 </a></li>
        </ul>
    </div>

    <div id="content-box">
    </div>

    <div id=clear></div>

    <div id="footer">
        this is the footer
    </div>
</div>
</body>
</html>

In addition to that, it does not allow me to center all of the divs, if I center them only the header and footer are centered how do I center the left-nav and content-box as well? — user2880722, Oct 28 '13 at 20:18
it needs a container to be centered, see my updated code, it's now centered! :) — Nasser Torabzade, Oct 28 '13 at 20:39
It seems that the divs are still all stuck to the left and not centered — user2880722, Oct 28 '13 at 20:52
@user2880722, clear removes the float for all the proceeding elements. It also anchors any containers so they take up the correct size. Think of it as a nail holding down a sheet of the bottom of a sheet of paper in place — Liam, Oct 28 '13 at 20:52
You can't center floated elements. Inline-block would of been a better option of you need this. — Liam, Oct 28 '13 at 20:53

score 0 · Answer 3 · answered Oct 28 '13 at 19:59

You should give this a try, put those two divs in a wrapper and set the childs' display style to inline-block to make the childs inline. It should look similar to this:

HTML:

<div id="header">
this is the header
</div>

<div id="wrapper">
<div id="content-box">
</div>

<div id="left-nav">
<ul id="left-nav-links">
<li> <a href="#"> Link Item #1 </a></li>
<li> <a href="#"> Link Item #2 </a></li>
<li> <a href="#"> Link Item #3 </a></li>
<li> <a href="#"> Link Item #4 </a></li>
<li> <a href="#"> Link Item #5 </a></li>
</ul>
</div>

<div id="footer">
this is the footer
</div>
</div>

</body>
</html>

CSS:

@charset "utf-8";
       /* CSS Document */

     #header {
    height: 250px;
    width: 728px;
    border: dashed #000;
    text-align:center;
    font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
    font-size:12px;
    }

    #footer {
    height: 28px;
    width: 728px;
    border: dashed #000;
    text-align:center;
    font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
    font-size:12px;
    }

    #left-nav {
    height: 500px;
    width: 150px;
    border: dashed #000;
    text-align: center;
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
    font-size: 14px;
    position: relative;
    display: inline-block;
    }

    #content-box {
    height: 500px;
    width: 578px;
    border: dashed #000;
    margin-right: 0px;
    margin-left: 155px;
    margin-top: 0px;
    margin-bottom: 0px;
    display: inline-block;
    }

score 0 · Answer 4 · answered Oct 28 '13 at 20:27

Another solution implies creating a wrapper to contain the columns (left-nav and content) and then, float each of these columns (to the right and left respectively). Check out the CSS below and the fiddle @ http://jsfiddle.net/torovoltanrex/yrARC/

#header {
height: 250px;
width: 728px;
border: dashed #000;
text-align:center;
font-family:Baskerville;
font-size:12px;
margin:0 auto;
}
#wrapper {
width:740px;
margin:0 auto;
padding:0;
}
#footer {
margin:0 auto;
height: 28px;
width: 728px;
border: dashed #000;
text-align:center;
font-family:Baskerville;
font-size:12px;
clear:both;
}

#left-nav {
padding:0;
height: 500px;
width: 150px;
border: dashed #000;
text-align: center;
font-family: Baskerville;
font-size: 14px;
float:left;

}

#content-box {
padding:0;
height: 500px;
width: 578px;
border: dashed #000;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
float:right;
}

How to get my div boxes to go together

4 Answers4