PDA

Click to See Complete Forum and Search --> : Need some help with style sheet issue

rutledj
06-20-2006, 06:50 AM
Could someone please take a look at this simple example and explain why,
when the page shrinks horizontaly, at a certain point, the content div
moves to below the left div?


Master page:


<%@ Master Language="VB" CodeFile="MasterPage.master.vb"
Inherits="MasterPage" %>

<!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 runat="server">
<title>Untitled Page</title>
<link href="master.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="header">

</div>
<div id="left">
<asp:Menu ID="Menu1" runat="server">
</asp:Menu>
</div>
<div id="content">
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</div>
<div id="lower-content">
</div>
<div id="footer">
</div>
<div id="footer-text">
Our Mission <br />
Reidsville Christian Church exists to share the good news <br />
of Jesus with people everywhere, to teach and strengthen <br />
the believers, to minister to the needs of others, and to <br />
be a Christian influence in the community.
</div>
</form>
</body>
</html>




Master style sheet:

body
{
height: 100%;
width: 100%;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
margin: 0px;
border-top-style: none;
padding-top: 0px;
border-right-style: none;
border-left-style: none;
border-bottom-style: none;
}
#header
{
background-color: #999999;
height: 25%;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
margin: 0px;
border-top-style: none;
padding-top: 0px;
border-right-style: none;
border-left-style: none;
border-bottom-style: none;
}

#left
{
float: left;
width: 23%;
background: #fff999;
height: 100%;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
margin: 0px;
border-top-style: none;
padding-top: 0px;
border-right-style: none;
border-left-style: none;
border-bottom-style: none;
}

#content
{
background: #aa0000;
height: 100%;
width: 76.7%;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
margin: 0px;
border-top-style: none;
padding-top: 0px;
border-right-style: none;
border-left-style: none;
border-bottom-style: none;
}

#footer
{
clear: both;
background: #ff3399;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
margin: 0px;
border-top-style: none;
padding-top: 0px;
border-right-style: none;
border-left-style: none;
border-bottom-style: none;
}

#lower-content
{
clear: both;
background: #ff9999;
width: 100%;
height: 20%;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
margin: 0px;
border-top-style: none;
padding-top: 0px;
border-right-style: none;
border-left-style: none;
border-bottom-style: none;
}




default page:


<%@ Page Language="VB" MasterPageFile="~/MasterPage.master"
AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default"
title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
This is the content
</asp:Content>



Thanks,
Rut