CODEWITHSUNDEEP
htmlcss
Eduardo
Eduardo

Reputation: 7141

Why is this DIV shifted downwards?

I'm trying to build a simple website using DIV-s, for some reason the menu div is shifted down about 200px, whats causing this?

Website Link

JSFiddle

HTML:

<div id="titlediv"><!--Title-->
    <a href="Default.html"><img src="res1/title500x100.png" class="pagelogo"/></a>
</div>

<div id="container"><!--Full Width Content-->
    <div id="menu"><!--Title-->
        <ul class="tablemenu">
            <li><a href="Default.html" id="link">Home</a></li>
            <li><a href="#" id="link">Link1</a></li>
            <li><a href="#" id="link">Link2</a></li>
            <li><a href="#" id="link">Link3</a></li>
            <li><a href="#" id="link">Link4</a></li>
            <li><a href="#" id="link">Link5</a></li>
        </ul>
    </div>

    <div id="divider"><!--Black Divider-->
    </div>

    <div id="content"><!--Main Content-->
    </div>
</div>

CSS:

body{
    font-family: Arial, Helvetica, sans-serif;
}

#titlediv{
    width:100%;
    height:100px;
    display:block;
    text-align:center;
    background-color:red;
}

.pagelogo{
    max-height:100px;
}

#container{
    width:100%;
    height:500px;
    background-color:blue;
}

#menu{
    width:250px;
    height:100%;
    background-color:orange;
    display:inline-block;
}

#menu ul{
    list-style:none;
    text-align:right;
}

#menu a{
    font-size:40px;
    text-decoration: none;
    font-color:black;
    line-height: 50px;
    padding-right:10px;
    padding-left:10px;
    color:black;
    border-top-left-radius:8px;
    border-bottom-left-radius:8px;
}

#menu a:hover{
    background-color:#999967;
}

#divider{
    width:5px;
    height:500px;
    display:inline-block;
    background-color:black;
}

#content{
    width:500px;
    height:500px;
    display:inline-block;
    background-color:yellow;
}

Also I want the second row of div-s (Menu + divider + content) to be centered within the blue #container div, how do I do that?

Upvotes: 1

Views: 300

Answers (3)

Rob Church
Rob Church

Reputation: 6943

Remove display: inline-block and use float:left on #menu and #divider.

To centre, restrict your #container so that it's the width you want, then use margin:0px auto (or use a new div with that margin property).

You may be able to get rid of #divider if you use the border or background properties on #menu, it depends on what you want that divider in there for.

Upvotes: 1

rtcherry
rtcherry

Reputation: 4880

The vertical shift in menu is caused by the display: inline-block; in the CSS for #menu. If you need to use inline-block you can also add vertical-align: top; to fix it.

Upvotes: 1

ralph.m
ralph.m

Reputation: 14345

The menu container is set to display: inline-block, which defaults to vertical-align: bottom. All you need is to add this:

#menu {
    vertical-align: top;
}

Upvotes: 3

Related Questions