Simple CSS question

zmarcoz · 11-21-2012, 08:21 AM

I modify online CSS example for my code. Basically it has header, footer and 4 columns (The third column is 55% width and the rest are 15% width). I put them into a master template, but the master template does not exactly like what I expected.

1. sometimes COL4 is disappear (SEE the picture)
2. sometimes header area is in the same horizontal level as COL1, COL2, COL3 areas.

How to fix it? Thanks

My Master Template Code

Code:

<%@ Master Language="VB" AutoEventWireup="false" CodeFile="Site.Master.vb" Inherits="Site" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head id="Head1" runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
 
<style type="text/css">
 
body{
  background:#123456;
}
#container{
  margin: 0 12.5%;
  background:#FFF;
}
.col{
  float:left;
  margin:0;
  width: 15%;
  min-height:80%
}
#col3{
  width:55%;
}
.col:nth-of-type(2n){
  background:#CCC; /* just to see the cols */
}
 
#header, #footer{
  height:100px; 
 clear:both;}
 
#MyRow{
  height:100px; 
 clear:both;}
</style>
 
</head>
<body>
<div id="container">
<div id="header"><asp:ContentPlaceHolder ID="HeadContent1" runat="server">
                <p>Header area</p>
            </asp:ContentPlaceHolder> </div>
<div id="col1" class="col"> <p>COL1 Area</p> </div>
<div id="col2" class="col"> <p>COL2 Area</p></div>
<div id="col3" class="col3"><asp:ContentPlaceHolder ID="MainContent" runat="server">
                <p style="width: 41.25%">COL3 Area</p>
            </asp:ContentPlaceHolder></div>
<div id="col4" class="col"> <p>COL4 Area</p></div>
<div id="footer"> <p>footer area</p></div>
</div>
</body>
</html>

My HTML code

Code:

<%@ Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="false"
    CodeFile="Default.aspx.vb" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    aaa
</asp:Content>

http://s18.postimage.org/gycj07f61/Capture.png

Excavator · 11-21-2012, 05:23 PM

Hello zmarcoz,
When you give your #col3 the class .col3 it loses the float you've put on all your other .col

Maybe that element should look more like this? <div id="col3" class="col">

Look at it done this way -

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<style type="text/css">
body { background: #123456; }
#container {
	margin: 0 12.5%;
	background: #fff;
}
#col1, #col2, #col4 {width: 15%;}
#col3 {width: 55%;}
.col {
	float: left;
	margin: 0;
	min-height: 80%
}
.col:nth-of-type(2n) { background: #CCC; /* just to see the cols */ }
#header, #footer {
	height: 100px;
	clear: both;
}
</style>
</head>
<body>
    <div id="container">
    <div id="header"><h1>Header area</h1></div>
    <div id="col1" class="col">
    	<h2>COL1 Area</h2>
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
    <!--end col1--></div>
    <div id="col2" class="col">
    	<h2>COL2 Area</h2>
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
    <!--end col2--></div>
    <div id="col3" class="col">
    	<h2>COL3 Area</h2>
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
    <!--end col3--></div>
    <div id="col4" class="col">
        <h2>COL4 Area</h2>
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
    <!--end col4--></div>
    <div id="footer"><p>footer area</p></div>
    <!--end container--></div>
</body>
</html>