CODEWITHSUNDEEP
htmlcss
Davey
Davey

Reputation: 1324

css margin problems

The div "welove" when given a top margin also pushed the div that it is wrapped in down as well. I would not like this to happen. Can anyone tell me what I am doing wrong? The site is live here: http://littleboxcreative.com

--html--

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Little Box Creative</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="jqtransformplugin/jqtransform.css" />
<link rel="stylesheet" type="text/css" href="formValidator/validationEngine.jquery.css" />
<link rel="stylesheet" type="text/css" href="demo.css" />




<script type="text/javascript" src="js/jquery.jqtransform.js"></script>
<script type="text/javascript" src="js/jquery.validationEngine.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="script.js"></script>


</head>




<body>

<div id="wrapper">

<div id="header">

    <div id="logo">
    </div>
    <div id="tagline">

        <div class="tagline1">
        </div>
    <div id="headline">
    </div>
        <div class="tagline2">
        </div>





    </div>









</div>



<div id="body">
        <div id="services">

        </div>
        <hr />
        <div id="portfolio">

        </div>
    <div id="innerbody">
        <div id="welove">

        </div>
    </div>
</div>
</div>
</body>
</html>

--css--

body {
    background-color: #0E121B;
    color: #ffffff;
}

#wrapper {
    width:960px;
    height: 100%;
    margin:0 auto;
}

#header {
    width: 960px;
    height: 500px;
    margin: 0 auto;
}

#logo {
    width: 470px;
    height:400px;
    background-color: #ffffff;
    float: left;
    margin: 30px 5px 0 0;
}

#tagline {
    width: 470px;
    height: 400px;
    float: left;
    margin: 30px 0 0 0;

}

.tagline1 {
    width: 379px;
    height: 102px;
    background-image: url('http://littleboxcreative.com/img/tagline1.png');
    margin: 0 auto;
}

#headline {
    border-top: 1px solid #080b10;
    border-bottom: 1px solid #252e44;
    height: 1px;
    width: 370px;
    margin: 40px 0 0 50px;
}

.tagline2 {
    width: 407px;
    height:96px;
    background-image: url('http://littleboxcreative.com/img/tagline2.png');
    margin: 50px 0 0 36px;
}

#services {
    width:960px;
    height: 500px;
    background-image: url('http://littleboxcreative.com/img/niceback.jpg');
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: -5px -5px 15px #000;
    -webkit-box-shadow: -5px -5px 15px #000;
    box-shadow: -5px -5px 15px #000;

}

#portfolio {
    width: 960px;
    height: 500px;
    background-image: url('http://littleboxcreative.com/img/paperback.png');
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: -5px -5px 15px #000;
    -webkit-box-shadow: -5px -5px 15px #000;
    box-shadow: -5px -5px 15px #000;


}

#innerbody {
    width: 960px;
    min-height:500px;
    height: 100%;
    background-image: url('http://littleboxcreative.com/img/backpattern.gif');
    -webkit-border-radius: 0 0 10px 10px;
    -moz-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
    -moz-box-shadow: -5px -5px 15px #000;
    -webkit-box-shadow: -5px -5px 15px #000;
    box-shadow: -5px -5px 15px #000;

}

#welove {
    width: 900px;
    height: 200px;
    margin: 45px 0 0 30px;
    background-color: #000000;
    opacity: 0.6;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

}

Upvotes: 0

Views: 355

Answers (4)

Ken Redler
Ken Redler

Reputation: 23943

Try adding position: absolute; to the #innerbody div.

Upvotes: 0

RonLugge
RonLugge

Reputation: 5184

I don't know why it happens, but for some reason you get an 'upward inheritance' where the inner-tag's margin's are applied to the out div. I usually run into this with p or h1 tags causing padding / margin issues for their container divs. Try adding some some test text to see if that's the case here; also, try ussing padding on the container div instead of / in addition to magin on the contained div.

Upvotes: 0

mjsarfatti
mjsarfatti

Reputation: 1745

I would suggest to set the padding-top for the container div instead: 

#innerbody {
    padding-top: 45px;
}

as overflow:hidden could give problems in future design choices.

Upvotes: 3

J Pollock
J Pollock

Reputation: 31

Add overflow: hidden; to the css for #innerbody. Also I'd suggest instead of leaving tags empty with whitespaces replace that whitespace with <!--- --> as whitespace can render incorrectly in some browsers where as a blank tag with a HTML comment in it won't add unexpected whitespace.

eg <div id="logo"><!-- --></div>

rather than <div id="logo"> </div>

Upvotes: 1

Related Questions