CODEWITHSUNDEEP
htmlcss
ctreacy1987
ctreacy1987

Reputation: 1

CSS Layout not extending wrapper

I am trying to build a website that has three floating columns in the middle of the page. I have a container wrapping around everthing but it will not extend fully. Is there something I am doing wrong?

Thanks

 <!DOCTYPE html>
 <html>
 <head>
    <title></title>
       <link rel="stylesheet" type="text/css" href="style/style.css">
 </head>
 <body>
     <div id="container">
         <div id="header">
             <div id="navbar"></div>
         </div>
         <div id="topper">This is the Topper</div>
         <div id="colone">This is column one</div>
         <div id="coltwo">This is column two</div>
         <div id="colthree">This is colum three</div>
         <div id="footer">This is the footer</div>
     </div>
 </body>
 </html>

 @charset "utf-8";
/* CSS Document */
#container
{
    background-color:#CCC;
    min-height:100%;
}
#header
{
    background-color: #000;
    width:100%;
    float:left;
}
#navbar
{
    background-color: #FFF;
    border-radius: 10px;
    height:75px;
    width:70%;
    margin: 0 auto;
    margin-top:10px;
    margin-bottom:10px;
    border-radius:10px;
}
#topper
{
    background-color:#000;
    height: 175px;
}
#colone
{
    background-color:#FFF;
    float:left;
    margin-left:15px;
    margin-top:-20px;
    height:150px;
}
#coltwo
{
    background-color:#FFF;
    float:left;
    margin-left:15px;
    margin-top:-20px;
    height:150px;
}
#colthree
{
    background-color:#FFF;
    float:left;
    margin-left: 15px;
    margin-top:-20px;
    height:150px;
}

#footer
{
}

Upvotes: 0

Views: 90

Answers (2)

MiniRagnarok
MiniRagnarok

Reputation: 959

You need to clear your float. This is what it looks like.

http://jsfiddle.net/ZT59d/

<div id="container">
    <div id="header">
        <div id="navbar"></div>
    </div>
    <div id="topper">This is the Topper</div>
    <div id="colone">This is column one</div>
    <div id="coltwo">This is column two</div>
    <div id="colthree">This is colum three</div>
    <div class="clear"></div>
    <div id="footer">This is the footer</div>
</div>

#container {
    background-color:#CCC;
    min-height:100%;
}
#header {
    background-color: #000;
    width:100%;
    float:left;
}
#navbar {
    background-color: #FFF;
    border-radius: 10px;
    height:75px;
    width:70%;
    margin: 0 auto;
    margin-top:10px;
    margin-bottom:10px;
    border-radius:10px;
}
#topper {
    background-color:#000;
    height: 175px;
}
#colone {
    background-color:#FFF;
    float:left;
    margin-left:15px;
    margin-top:-20px;
    height:150px;
}
#coltwo {
    background-color:#FFF;
    float:left;
    margin-left:15px;
    margin-top:-20px;
    height:150px;
}
#colthree {
    background-color:#FFF;
    float:left;
    margin-left: 15px;
    margin-top:-20px;
    height:150px;
}

.clear
{
    clear:both;
}
#footer {
}

If you don't mind, I'm going to give you some suggestions on how to improve your code.

First, you're using HTML5 but you're not using some of the new elements. Let's replace them.

<header>
    <nav></nav>
</header>
<main>
    <div id="topper">This is the Topper</div>
    <div id="colone">This is column one</div>
    <div id="coltwo">This is column two</div>
    <div id="colthree">This is colum three</div>
    <div class="clear"></div>
</main>
<footer>This is the footer</footer>

You're also using ids for everything. Trust me, you don't want to do that. Realistically, you should be using ids sparingly. I'm at the point now that the only time I use an id is if I need to target something with javascript.

<header>
    <nav></nav>
</header>
<main>
    <div id="topper">This is the Topper</div>
    <div class="column">This is column one</div>
    <div class="column">This is column two</div>
    <div class="column">This is colum three</div>
    <div class="clear"></div>
</main>
<footer>This is the footer</footer>

Here's what you're new css would look like.

body {
    background-color:#CCC;
    min-height:100%;
}
header {
    background-color: #000;
    width:100%;
    float:left;
}
nav {
    background-color: #FFF;
    border-radius: 10px;
    height:75px;
    width:70%;
    margin: 0 auto;
    margin-top:10px;
    margin-bottom:10px;
    border-radius:10px;
}
#topper {
    background-color:#000;
    height: 175px;
}
.column {
    background-color:#FFF;
    float:left;
    margin-left:15px;
    margin-top:-20px;
    height:150px;
}
.clear {
    clear:both;
}

I left #topper in because it's unusual. It's hard for me to tell exactly what you're trying to achieve with it.

Here's the fiddle with everything together.

Upvotes: 1

mms27
mms27

Reputation: 826

Easy way to fix this is to add such CSS rules:

#footer
{
    clear: both;
}
#container {
    overflow: hidden;
}

DEMO

Obviously, you have some problems understanding how float property works. You should investigate it more careful. Especially I would recommend to check out clearfix hack.

Upvotes: 0

Related Questions