Div problems (html and css) in a aspx page

Question

I'm trying to style a page with css. I build my page with divs and i'm styling those via an external css document. This is what I have so far: enter image description here

Obviously this is not exactly what I want! For some reason menu (build via ul) doesn't stay in the menu div. Also, my footer is experiencing the same issue. What am I doing wrong?

Here are both my aspx page + css document: ASPX:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="home.aspx.cs" Inherits="AppointmentsDrivingLicense_C_and_D.home" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>A.C.T. | Appointments 1.0.0</title>
    <link rel="stylesheet" type="text/css" href="styles/main.css" />
</head>
<body>
<div id="content">
    <!-- BEGIN HEADER -->
    <div>
        <div id="logo">
            <div id="programName">
                <p><b>ACT</b>Appointments 1.0.0</p>
            </div>
            <div id="logged">
                <p>User | <a href="#">Afmelden</a></p>
            </div>
        </div>
        <div id="menu">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
    <!-- END HEADER -->

    <!-- BEGIN BODY -->
    <div id="body">
        <b>Home</b>
        <hr />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt, elit eu sollicitudin consectetur, nulla velit congue massa, 
            sit amet hendrerit elit massa vel nisl. Sed consequat aliquam risus ac imperdiet. Etiam placerat metus vitae augue accumsan a pretium lacus varius. 
            In facilisis risus vitae enim varius at lobortis eros fermentum. Nunc sit amet enim id ligula scelerisque tincidunt vitae sit amet nisl. 
            Fusce tellus augue, interdum non semper vitae, semper sed lectus. Nam ultricies massa non erat suscipit a vulputate est bibendum. 
            Nullam cursus ante et ipsum accumsan lacinia. Mauris eget diam sed enim dapibus rutrum ut vel mauris. In faucibus convallis ultrices. 
            Donec pharetra tellus at sem euismod eget consectetur arcu luctus.
        </p>
        <p>
            Morbi scelerisque cursus mi ac suscipit. Curabitur quis nisi ante. In arcu diam, mattis a tristique sit amet, adipiscing sed nulla. 
            Nunc felis massa, ullamcorper eget tristique quis, vestibulum eu tellus. In hac habitasse platea dictumst. Pellentesque nec lacus nibh, 
            a egestas neque. Sed sed mi viverra orci luctus fringilla. Praesent dictum elementum felis, vitae gravida dolor vehicula at. 
            Vestibulum nec molestie tortor. Quisque vel arcu dolor. Nulla facilisi.
        </p>
    </div>
    <!-- END BODY -->

    <!-- BEGIN FOOTER -->
    <div id="footer">
        <div id="footer-left">
            <p>Welkom user</p>
        </div>
        <div id="footer-right">
            <p>ACT-KM © 2013</p>
        </div>
    </div>
    <!-- END FOOTER -->
</div>
</body>
</html>

CSS document:

    *{
    margin: 0px;
    padding: 0px;
}
body {
    background-color: lightgray;
}
#content{
    margin-left: 45px;
    margin-right: 45px;
    border-left: solid 1px black;
    border-right: solid 1px black;
}
#footer{
    background-color: #E8E8D9;
    font-size: 12px;
    padding-bottom: 5px;
    padding-top: 5px;
    border: solid 1px black;
    /*border-top: solid 1px black;*/
}
#footer-left{
    float: left;
    padding-left: 10px;
}
#footer-right{
    float: right;
    padding-right: 10px;
}
#body{
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
    background-color: white;
}
#logo{
    /*background-color: #E8E8D9;*/
    background-color: red;
}
#programName p{
    float: left;
    padding-left: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
    font-size: 20px;
}
#logged{
    float: right;
    font-size: 12px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
}
#menu{
    clear:both;
    border-top: solid 1px black;
    border-bottom: solid 1px black;
    padding-left: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
}
#menu ul{
    list-style-type: none;
}
#menu li{
    float: left;
}
#menu li a{
    display: block;
    padding-left: 15px;
    padding-right: 15px;
    text-decoration: none;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 16px;
}

Thanks in advance! Kevin

Floated elements are taken out of the flow of the page, which means in simple terms that any content inside them will not make them expand until the float is cleared. I would add a
after the last li in your menu ul — DavidB, Jan 24 '13 at 11:49
@DavidB Placing a `
` within an `
` is not a good idea, it is not valid HTML. `
` may only contain `
` elements as immediate children. — Christofer Eliasson, Jan 24 '13 at 11:56
@Christofer Eliasson - You're correct, my explanation about floats still stands but my demonstration was incorect. Sorry for the confusion — DavidB, Jan 24 '13 at 12:08

score 1 · Answer 1 · answered Jan 24 '13 at 11:46

1

Since you float all the li elements, you will have to clear the floating to prevent the parent from collapsing. I believe you will solve the problem by clearing the float on the ul element.

#menu ul{
    clear: both;
    list-style-type: none;
}

answered Jan 24 '13 at 11:46

Christofer Eliasson

29,772
6
69
99

score 0 · Answer 2 · answered Jan 24 '13 at 12:06

0

Remove float:left from #footer-left and #menu li

Add disply:inline-block to #menu li to get it aligned horizontally.

#menu li{
   display:inline-block
}

DEMO

answered Jan 24 '13 at 12:06

Sowmya

25,313
20
91
128

score 0 · Accepted Answer · answered Jan 24 '13 at 12:27

try this
<style>
*{
  margin: 0px;
  padding: 0px;
 }

ul li {list-style-type:none;}

body {
     background-color: lightgray;
     }

#content{
        margin-left: 45px;
        margin-right: 45px;
        border-left: solid 1px black;
        border-right: solid 1px black;
        }

#footer{
       background-color: #E8E8D9;
      font-size: 12px;
      padding-bottom: 5px;
      padding-top: 5px;
     border: solid 1px black;
   /*border-top: solid 1px black;*/
overflow:hidden;
    }

#footer-left{
         float: left;
         padding-left: 10px;
         }

 #footer-right{
         float: right;
        padding-right: 10px;
             }
#body{
     padding-left: 20px;
     padding-right: 20px;
     padding-bottom: 10px;
     padding-top: 10px;
     background-color: white;
     }

#logo{
    /*background-color: #E8E8D9;*/
    background-color: red;
overflow:hidden;
    }

#programName p{
         float: left;
        padding-left: 20px;
       padding-bottom: 10px;
       padding-top: 10px;
      font-size: 20px;
       }

#logged{
     float: right;
    font-size: 12px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    }

#menu{
   clear:both;
   border-top: solid 1px black;
   border-bottom: solid 1px black;
  padding-left: 10px;
  padding-top: 3px;
  padding-bottom: 3px;
overflow:hidden;
   }

#menu ul{
      list-style-type: none;
       }

#menu li{
   float: left;
        }

#menu li a{
      display: block;
     padding-left: 15px;
    padding-right: 15px;
   text-decoration: none;
  font-family: Georgia, 'Times New Roman', serif;
   font-size: 16px;
  }
</style>

This worked like a charm! Thx – KevinP Jan 24 '13 at 12:41 — KevinP, Jan 24 '13 at 12:41

Div problems (html and css) in a aspx page

3 Answers3