-1

So my problem basically is that I have 3 divs on a page, and my middle content div is always spaced about 50px away from my header and footer divs.

Why is this separation occurring? I haven't specified any margins in the css files.

Amar

EDIT: Here is the code for the css file:

    @-webkit-keyframes showBody{
        from { opacity: 0; }
        to   { opacity: 1;  }
    }



    body { -webkit-animation: showBody 3s; position:relative; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00CC00), to(#24C98D));  height: 100%; margin: 0; background-repeat: no-repeat;
        background-attachment: fixed; }
    #links li {list-style: none; display: inline; margin-right: 30px;}
    a {text-decoration: none;}
    #header { border-top-left-radius: 25px ; border-top-right-radius: 25px; background-color: #FFF; margin-top: 0px; margin-left: auto; margin-right: auto; width:1100px; height: 60px;border-top: 1px solid; border-left: 1px solid; border-right: 1px solid;}
    #navmenu {height: 34px; width: auto; position: relative; left: 100px; top: -25px; }
    #contentArea { background-color: #FFF; border-left: 1px solid; border-right: 1px solid; width: 1100px; margin-right: auto; margin-left: auto;}
    #footer {border-bottom-left-radius: 20px 20px; border-bottom-right-radius: 20px 20px; background-color: #F00; margin-left: auto; margin-right: auto; width:1100px; height: 100px; border-left: 1px solid; border-right: 1px solid; border-bottom: 1px solid; }
    #links {width: 1100px; background-color: #FFF; float: top; border-bottom: 1px solid;}
    #links li {list-style: none; display: inline; margin-right: 30px;}
    #copyrightinfo {width: 1100px; }
    #navmenu {float: top; margin-top: 0px;}
    #container {border-radius: 

20px;}

And here is the code for the html file:

<!DOCTYPE html>
<html>
<head>
    <link type="text/css" href="css/pagestyle.css" rel="stylesheet"/>
    <link type="text/css" href="css/navmenustyle.css" rel="stylesheet" />



</head>
<body>
    <div id="container">
        <div id="header">
            <div id="logo">
            </div>
            <div id="navmenu">

            <ul id="frodoNav">
               <li><a href="#" title="Home">Home</a></li>
                <li><a href="#" title="About">About</a></li>
                <li><a href="#" title="Social">Social</a></li>
                <li><a href="#" title="Reviews">Reviews</a></li>
                <li><a href="#" title="Special Stories">Special Stories</a></li>
                <li><a href="#" title="Travel With Kids">Travel With Kids</a></li>
                <li><a href="#" title="Support">Support</a></li>        
            </ul>

            </div>
        </div>
        <div id="contentArea" style="clear: both;">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra odio vel tellus tempus eget malesuada dui venenatis. In hac habitasse platea dictumst. Ut eu sagittis nisl. Nulla lacinia mattis turpis non tincidunt. Quisque sodales adipiscing libero et consectetur. Donec lectus lacus, consequat et consectetur non, iaculis a urna. Maecenas arcu lacus, luctus at gravida aliquet, varius ac purus. Curabitur varius sodales libero nec semper. Curabitur quis dolor a orci condimentum placerat. Sed sed ipsum nec metus tempus aliquam eu ut metus. Suspendisse arcu magna, dictum ut tristique quis, malesuada at lorem. Nam feugiat dolor quis mauris feugiat blandit.

Phasellus sed risus turpis, ut aliquam felis. Nullam auctor dictum tempor. Vivamus diam lectus, posuere eget viverra sit amet, condimentum nec augue. Pellentesque tellus lectus, scelerisque mollis viverra sit amet, ullamcorper id elit. Cras eu nisi a felis placerat pulvinar. Mauris sit amet ipsum leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Aliquam quis nulla nunc, quis pellentesque arcu. Proin nulla dolor, porta a malesuada ut, hendrerit eget velit. Ut vel molestie lectus. Nam volutpat scelerisque quam, a pharetra nibh cursus pellentesque. Duis ut magna imperdiet nibh gravida sodales vitae sit amet felis. Phasellus vitae velit lacus. Aenean a nisl ut est interdum cursus. Aliquam eu quam risus. Mauris sed nisi non justo tincidunt semper. Cras ornare porta elit, sed vulputate elit rhoncus quis. Aenean egestas metus vel leo pellentesque hendrerit. Suspendisse porta nulla nec erat sagittis vulputate. Fusce dui eros, imperdiet ut viverra ac, tempor ut tortor.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur non tristique urna. Fusce posuere enim ac nulla semper quis ultrices purus pulvinar. Aenean non eros et erat interdum dictum. Donec sodales porttitor est in lobortis. Proin tellus neque, commodo sed vulputate at, rutrum eget dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce feugiat laoreet orci eget euismod. Sed dui ipsum, sodales vitae egestas vel, feugiat a enim. Sed in pharetra odio. Mauris pretium, justo et porttitor semper, enim nulla aliquet erat, non imperdiet augue nisl ut nisi. Proin posuere, nunc non dictum faucibus, tortor massa dictum felis, ut pulvinar dolor erat ac diam. In mollis tincidunt nunc, ut luctus eros cursus at. Etiam pellentesque vehicula magna, sed bibendum sem convallis quis.

Donec sollicitudin, nulla non luctus vestibulum, dui mauris malesuada elit, nec pellentesque magna diam eget sapien. Suspendisse fermentum leo ut dolor adipiscing fringilla. Mauris in condimentum magna. Integer rutrum sem ut metus lacinia a tincidunt felis laoreet. Cras blandit, orci imperdiet tincidunt egestas, erat mauris mattis purus, quis ullamcorper massa urna at sapien. Pellentesque ornare velit mattis purus pretium congue tempor enim porta. Suspendisse ac feugiat ante. Nullam vel lectus sed magna consectetur molestie. Maecenas urna turpis, ultricies non lacinia in, porta vel lacus. Vivamus elit nisl, laoreet ut molestie blandit, vestibulum non arcu. Sed condimentum ante vitae diam ornare rutrum. Sed eget ipsum eu ante posuere placerat nec a orci. Integer ut arcu sit amet arcu eleifend tincidunt. Suspendisse eget pharetra enim.</p>
     </div>
     <div id="footer">
     <div id="footer-nav">
     </div>
     </div>
      </body>
</html>
Amar H-V
  • 1,316
  • 3
  • 20
  • 33

3 Answers3

0

I have been having this issue, it's because of the text nodes between your divs. Add float:left to your divs and they the browser should ignore text nodes.

SBSTP
  • 3,479
  • 6
  • 30
  • 41
0

Its best to have the code available for us to see. However it could be using a default style somewhere else. You could try to have the margin/ padding set to zero.

skub
  • 2,266
  • 23
  • 33
0

Here is my solution to the problem, if anyone is interested.

html,
*
{
    border      : 0;
    box-sizing  : border-box;
    margin      : 0;
    padding     : 0;
}

@-webkit-keyframes showBody
{
    from { opacity : 0; }
    to   { opacity : 1; }
}

a 
{
    text-decoration : none;
}

body 
{
    -webkit-animation     : showBody 3s;
    background-attachment : fixed;
    background-image      : -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00CC00), to(#24C98D));
    background-repeat     : no-repeat;
    height                : 100%;
    position              : relative;
}

#container
{
    border-radius : 20px;
}

#contentArea
{
    background-color : #FFF;
    border-left      : 1px solid;
    border-right     : 1px solid;
    clear            : both;
    margin-left      : auto;
    margin-right     : auto;
    width            : 1100px;
}

#copyrightinfo
{
    width : 1100px;
}

#footer
{
    background-color           : #F00;
    border-bottom              : 1px solid;
    border-bottom-left-radius  : 20px 20px;
    border-bottom-right-radius : 20px 20px;
    border-left                : 1px solid;
    border-right               : 1px solid;
    height                     : 100px;
    margin-left                : auto;
    margin-right               : auto;
    width                      : 1100px;
}

#header
{
    background-color        : #FFF;
    border-bottom           : 1px solid;
    border-left             : 1px solid;
    border-right            : 1px solid;
    border-top              : 1px solid;
    border-top-left-radius  : 25px;
    border-top-right-radius : 25px;
    height                  : 60px;
    margin-left             : auto;
    margin-right            : auto;
    text-align              : center;
    width                   : 1100px;
}

#header:before
{
    content        : '';
    display        : inline-block;
    height         : 100%; 
    vertical-align : middle;
}

#links
{
    background-color : #FFF;
    border-bottom    : 1px solid;
    float            : top;
    width            : 1100px;
}

.menu-item
{
    display      : block;
    float        : left;
    margin-left  : 30px;
    margin-right : 30px;
}

#navmenu
{
    display        : inline-block;
    vertical-align : middle;
}
<!DOCTYPE html>
<html>
    <head>
        <link href = "css/Example.css"
              rel  = "stylesheet"
              type = "text/css"
        />
    </head>

    <body>
        <div id = "container">
            <div id = "header">
                <div id = "navmenu">
                    <div class = "menu-item"><a href = "#" title = "Home">Home</a></div>
                    <div class = "menu-item"><a href = "#" title = "About">About</a></div>
                    <div class = "menu-item"><a href = "#" title = "Social">Social</a></div>
                    <div class = "menu-item"><a href = "#" title = "Reviews">Reviews</a></div>
                    <div class = "menu-item"><a href = "#" title = "Special Stories">Special Stories</a></div>
                    <div class = "menu-item"><a href = "#" title = "Travel With Kids">Travel With Kids</a></div>
                    <div class = "menu-item"><a href = "#" title = "Support">Support</a></div>
                </div>
            </div>

            <div id = "contentArea">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra odio vel tellus tempus eget malesuada dui venenatis. In hac habitasse platea dictumst. Ut eu sagittis nisl. Nulla lacinia mattis turpis non tincidunt. Quisque sodales adipiscing libero et consectetur. Donec lectus lacus, consequat et consectetur non, iaculis a urna. Maecenas arcu lacus, luctus at gravida aliquet, varius ac purus. Curabitur varius sodales libero nec semper. Curabitur quis dolor a orci condimentum placerat. Sed sed ipsum nec metus tempus aliquam eu ut metus. Suspendisse arcu magna, dictum ut tristique quis, malesuada at lorem. Nam feugiat dolor quis mauris feugiat blandit.

                Phasellus sed risus turpis, ut aliquam felis. Nullam auctor dictum tempor. Vivamus diam lectus, posuere eget viverra sit amet, condimentum nec augue. Pellentesque tellus lectus, scelerisque mollis viverra sit amet, ullamcorper id elit. Cras eu nisi a felis placerat pulvinar. Mauris sit amet ipsum leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

                Aliquam quis nulla nunc, quis pellentesque arcu. Proin nulla dolor, porta a malesuada ut, hendrerit eget velit. Ut vel molestie lectus. Nam volutpat scelerisque quam, a pharetra nibh cursus pellentesque. Duis ut magna imperdiet nibh gravida sodales vitae sit amet felis. Phasellus vitae velit lacus. Aenean a nisl ut est interdum cursus. Aliquam eu quam risus. Mauris sed nisi non justo tincidunt semper. Cras ornare porta elit, sed vulputate elit rhoncus quis. Aenean egestas metus vel leo pellentesque hendrerit. Suspendisse porta nulla nec erat sagittis vulputate. Fusce dui eros, imperdiet ut viverra ac, tempor ut tortor.

                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur non tristique urna. Fusce posuere enim ac nulla semper quis ultrices purus pulvinar. Aenean non eros et erat interdum dictum. Donec sodales porttitor est in lobortis. Proin tellus neque, commodo sed vulputate at, rutrum eget dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce feugiat laoreet orci eget euismod. Sed dui ipsum, sodales vitae egestas vel, feugiat a enim. Sed in pharetra odio. Mauris pretium, justo et porttitor semper, enim nulla aliquet erat, non imperdiet augue nisl ut nisi. Proin posuere, nunc non dictum faucibus, tortor massa dictum felis, ut pulvinar dolor erat ac diam. In mollis tincidunt nunc, ut luctus eros cursus at. Etiam pellentesque vehicula magna, sed bibendum sem convallis quis.

                Donec sollicitudin, nulla non luctus vestibulum, dui mauris malesuada elit, nec pellentesque magna diam eget sapien. Suspendisse fermentum leo ut dolor adipiscing fringilla. Mauris in condimentum magna. Integer rutrum sem ut metus lacinia a tincidunt felis laoreet. Cras blandit, orci imperdiet tincidunt egestas, erat mauris mattis purus, quis ullamcorper massa urna at sapien. Pellentesque ornare velit mattis purus pretium congue tempor enim porta. Suspendisse ac feugiat ante. Nullam vel lectus sed magna consectetur molestie. Maecenas urna turpis, ultricies non lacinia in, porta vel lacus. Vivamus elit nisl, laoreet ut molestie blandit, vestibulum non arcu. Sed condimentum ante vitae diam ornare rutrum. Sed eget ipsum eu ante posuere placerat nec a orci. Integer ut arcu sit amet arcu eleifend tincidunt. Suspendisse eget pharetra enim.</p>
        </div>

        <div id = "footer">
            <div id = "footer-nav">
            </div>
        </div>
    </body>
</html>

The problem with the spacing of the divs was solved by inserting the following code into the CSS file...

*
{
    border      : 0;
    box-sizing  : border-box;
    margin      : 0;
    padding     : 0;
}

These styles are applied against all elements using just *. By setting the border, margin and padding properties for all elements to 0, and then overriding that value in a id or a class where desired, you can prevent unwanted default occurences of border, margin and / or padding from occurring, such as was the main problem here.

The line box-sizing : border-box; used here places all border, margin and padding definitions for each element within the width of that element, making laying out a page much simpler.

I also replaced the list (li) a number of div's, which made developing the menu much easier. Lists are fine for presenting text lists, especially when you want some easy bulletting, but they are not well suited to presenting other groups of items, be they text or otherwise. For those other groups, use div's instead.

I placed the menu items in the containing div navmenu, and centered them horizontally. I was then able to center them vertically using a version of Fadi's solution from How to vertically center content with variable height within a div?.

I also removed some redundant / duplicate code from the CSS file, moved a style from the HTML file to the CSS file, and improved the general layout and presentation of the files.

If you have any comments or questions, then please feel free to make them.

Community
  • 1
  • 1
toonice
  • 2,211
  • 1
  • 13
  • 20