Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Simple CSS question

    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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •