CODEWITHSUNDEEP
htmlcss
user2880722
user2880722

Reputation: 37

How to get my div boxes to go together

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>

Upvotes: 0

Views: 128

Answers (4)

Nasser Torabzade
Nasser Torabzade

Reputation: 6710

you just need to:

  1. 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.

  2. move sidebar element to before content.

  3. also use display:inline-block for your sidebar and content. so they can have width and height.

  4. add an element with clear:both after them. this clears float on both sides, and allows next elements not to have float.

  5. 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>

Upvotes: 1

WolfishMoon
WolfishMoon

Reputation: 1

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;
}

Upvotes: 0

Tim Vis&#233;e
Tim Vis&#233;e

Reputation: 3248

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;
    }

Upvotes: 0

Joel Worsham
Joel Worsham

Reputation: 1150

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.

Upvotes: 2

Related Questions