CODEWITHSUNDEEP
csshtmlcss-float
iamricard
iamricard

Reputation: 493

Float left leaving a white space on top

EDIT: By white space I mean the inside divs don't stack to the top (if that makes sense) http://jsfiddle.net/UdbKq/

I have the following html setup 

<body>
<div id=all>
<pre>
<div id=header><b>
 __   __     ______     ______     __     __     __  __     ______     __         ______     ______     ______   ______  
/\ "-.\ \   /\  __ \   /\  == \   /\ \  _ \ \   /\ \_\ \   /\  __ \   /\ \       /\  ___\   /\  __ \   /\  ___\ /\__  _\ 
\ \ \-.  \  \ \  __ \  \ \  __<   \ \ \/ ".\ \  \ \  __ \  \ \  __ \  \ \ \____  \ \___  \  \ \ \/\ \  \ \  __\ \/_/\ \/ 
 \ \_\\"\_\  \ \_\ \_\  \ \_\ \_\  \ \__/".~\_\  \ \_\ \_\  \ \_\ \_\  \ \_____\  \/\_____\  \ \_____\  \ \_\      \ \_\ 
  \/_/ \/_/   \/_/\/_/   \/_/ /_/   \/_/   \/_/   \/_/\/_/   \/_/\/_/   \/_____/   \/_____/   \/_____/   \/_/       \/_/ 
  </b>
</div>                                                                                                             
</pre>
<div id=content>
    <div id=menu>
        <ul>
            <li><a href=#>Home</a></li>
            <li><a href=#>Lorem Ipsum</a></li>
            <li><a href=#>Github</a></li>
            <li><a href=#>About us</a></li>
            <li><a href=#>Contact</a></li>
        </ul>
    </div>
    <div id=container>
        <div id=leftcontent>
        </div>
        <div id=middlecontent>
        </div>
        <div id=rightcontent>
        </div>
    </div>
</div>  
</div>

And the CSS

    body
{
    background-color:black;
    font-family:'Press Start 2P', cursive;'
}
#all
{
    margin:auto;
    color:#fff;
    width:950px;
    height:100%;
    border:7px double #fff;
}
#header
{
    position:relative;
    top:-27.8px;
    font-size:12px;
    border-bottom:7px double #fff;
}
#menu ul
{
    position:relative;
    left:-40px;
    top:-75px;
    width:950px;
    font-size:16px;
    font-family:'Press Start 2P', cursive;
}
#menu ul li
{
    background-color:pink;
    text-align:center;
    width:184.4px;
    float:left;
    padding:20px 0px 20px 0px;
    list-style:none;
    display:inline;
    border-right:7px double #fff;
}
#menu ul li:last-child
{
    border:none;
}
#menu ul li:hover a
{
    color:#000;
    background-color:#fff;
}
#menu a
{
    color:#fff;
    text-decoration:none;
}
#container
{
    position:relative;
    top:-19px;
    height:500px;
    width:950px;
    background-color:cyan;
    border-top:7px double white;
}
#leftcontent
{
    float:left;
    padding:0;
    margin:0;
    background-color:red;
    border-right:7px double white;
    width:184.4px;
    height:500px;
}
#middlecontent
{
    float:left;
    padding:0;
    margin:0;
    background-color:blue;
    border-right:7px double white;
    width:567.2px;
    height:500px;
}
#rightcontent
{
    float:left;
    padding:0;
    margin:0;
    background-color:green;
    width:184.4px;
    height:500px;
}

Now my problem is after floating the content divs they all leave the parent (or that's what it seems to happen) and thus leaving a huge white space on top.

Thank you.

Upvotes: 1

Views: 6150

Answers (4)

Ray
Ray

Reputation: 73

If i understand what you mean, just remove the borders and see what you get

give it a try

div, ul, li{
    border:0 !important;
}

Upvotes: 0

Adrift
Adrift

Reputation: 59799

Add overflow: hidden; to #menu ul - you haven't cleared the floated list-items

Once you've done that you can just adjust the height of <div id="menu"> to be 0 if you don't want the space.

jsbin

Upvotes: 3

James Coyle
James Coyle

Reputation: 10398

Remove all of the whitespace from your pre tags and get rid of all the unnecessary relative positioning.

<div id=header>
    <pre>[ascii chars]</pre>
</div>

jsFiddle

Upvotes: 0

Lowkase
Lowkase

Reputation: 5699

Do you mean the cyan white space? If you do then add overflow:hidden to #container:

#container
{
    overflow:hidden;
    position:relative;
    top:-19px;
    height:500px;
    width:950px;
    background-color:cyan;
    border-top:7px double white;
}

Upvotes: 0

Related Questions