CODEWITHSUNDEEP
htmlcss
tim
tim

Reputation: 17

Unwanted spacing between divs

I know this has been done a lot, I did search through a bunch of questions on here but couldn't find a solution for my problem. I know it's something really simple. Basically I have a wrapper, header, navigation div. I'd like header and navigation to be flush, but right now there's space between them (despite them both having no margin). I made a JSFiddle which is probably more straightforward than my code (http://jsfiddle.net/aqEzC/)

Here's a portion my html/css:

<div id="wrapper">
        <div id="header"></div><div id="nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Directory</a></li>
                <li><a href="#">Submit a Profile</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div>

css:

div#header {
    width: 960px;
    height: 75px;
    background-image: url('../img/banner.jpg');
    margin: 0;
    padding: 0;
}


div#nav {
    background-image: url('../img/nav_bg.jpg');
    background-repeat: repeat-x;
    background-position: 25px;
    height: 40px;
    background-color: #003A70;
    -moz-box-shadow: 0 0 8px #666;
    -webkit-box-shadow: 0 0 8px #666;
    margin: 0;
    padding: 0;
}

Any help would be much appreciated.

Upvotes: 0

Views: 1834

Answers (2)

joseeight
joseeight

Reputation: 924

I don't think your markup is very good for this, but your problem is just needing to set overflow to that element, you should not be setting heights on elements unless you really want to, specially when you will have children elements with heights themselves.

div#nav {
background-color: green;
background-color: #003A70;
-moz-box-shadow: 0 0 8px #666;
-webkit-box-shadow: 0 0 8px #666;
margin: 0;
padding: 0;
overflow: auto;}

Solution: http://jsfiddle.net/aqEzC/3/

Upvotes: 0

ShadowCat7
ShadowCat7

Reputation: 824

The ul tag has a margin on it. An immediate fix is to add ul { margin: 0; padding: 0 } to your css.

You can easily check such things by using development tools such as Chrome's or IE's (to use, hit F12).

Upvotes: 1

Related Questions