CODEWITHSUNDEEP
htmlcss
renathy
renathy

Reputation: 5355

adding one DIV creates many white space

I have the following HTML / CSS code:

HTML

<div id = "content-wrapper">
<div class="stickyheader"> 
       <a href="index.php"><div id="logo"></div></a>    
       <div class="nav">
            <ul class="top_nav">
               <li>Home</li>
               ...
            </ul>
        </div>
</div>
<div id="content-wrapper">
    <div class="central_img_front">Some text</div>
    <div class="welcome_container">Test</div>
</div>

...
</div>

CSS

.stickyheader {
    background-color: white;
    width: 100%;
    height: 138px;
    padding-top: 24px;
    z-index: 1;
    position: fixed;
    top: 0;
}
#content-wrapper {
    width:1000px;
    margin:0px auto;
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-top: 162px;
}
.welcome_container {
    margin: 413px auto 55px auto;
    text-align: center;
    width: 760px;
}
.central_img_front {
    background-image: url(http://modeles-de-lettres.org/test/images/slide12.jpg);
    width: 1920px;
    height: 413px;
    position:absolute;
    left:-460px;
}

Full JSFiddle code is here: http://jsfiddle.net/ugnmc/

enter image description here

My problem is with content-wrapper part. There are two divs inside this div:

div.central_img_front
div.welcome_container

I need those divs to be exactly under div.stickyheader. Now as you can see in fiddle, div.central_img_front is pushed too far to the bottom (there are a lot of white space under div.stickyheader).If I remove div.welcome_container from HTML then everything is OK. So,

I really cannot get it - why div.welcome_container affects div.central_img_front?

EDIT:

div.central_img_front

is positioned absolute, because it is in container (wrapper). If I remove position:absolute, then it is positioned incorrectly and .

Upvotes: 1

Views: 821

Answers (3)

LouD
LouD

Reputation: 3844

The position:absolute takes the div.central_img_front out of line and the div.welcome_container slides in before it. Can you just remove it?

Upvotes: 1

jmingov
jmingov

Reputation: 14003

hei men, check these fiddle, http://jsfiddle.net/N269j/.

The problem are the margings and the heights.

Upvotes: 0

mishik
mishik

Reputation: 10003

The white space is caused by .welcome-container, which has a huge margin-top.

Demo

Change is:

.welcome_container {
    margin: 0px auto 55px auto; 
    // was margin: 413px auto 55px auto;
    text-align: center;
    width: 760px;
}

Upvotes: 2

Related Questions