Solved

Two column MasterPage, with CSS

Posted on 2009-03-30
3
428 Views
Last Modified: 2012-05-06
Greetings all

I have several pages all based on the same layout - essentially two-column page. However, the content for these two columns differs from page to page for both columns.

I have a MasterPage with two ContenPlaceHolders on it, each within a  Div (see code below).

The problem is that if the right div/conetnholder is smaller (less lines) then the footer shoots up underneath, allongside the left column.

How can I prevent this?
MYPAGE:
 

<%@ Page Language="C#" MasterPageFile="~/MimeMaster02_StandAlone.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" Title="Untitled Page" %>
 

<asp:Content ID="Content1" ContentPlaceHolderID="leftnav" Runat="Server">

1<br />

2<br />

3<br />

4<br />

5<br />

6<br />

7<br />

</asp:Content>
 

<asp:Content ID="Content2" ContentPlaceHolderID="righnav" Runat="Server">

a<br />

b<br />

c<br />

</asp:Content>
 
 
 

MASTER PAGE:
 

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MimeMaster02_StandAlone.master.cs" Inherits="MimeMaster02_StandAlone" %>
 

<!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 id="Head1" runat="server">

    

    <title>Mime Master</title>

    

     <link id="cssLink" rel="stylesheet" type="text/css" runat="server"

    href="CSS/Mime.CSS" />  

    

</head>
 

<body id="MasterBody" runat="server" >
 

<form id="form1" runat="server" style="height: 100%;">

    

<div id="container" >
 

    <a name="theTop" ></a>  

    

	<div id="header">

	<!-- Header start -->		  

          		  

		  <asp:ScriptManager ID="ScriptManager1" runat="server">

          </asp:ScriptManager>          

          

          <asp:LoginName  ID="lgUser" runat="server" CssClass="loginName" FormatString="Member: {0}"/>

          

          <center>

		  <h1>Marriage Encounter - Western Cape</h1>

		  <h5>(Administration Management)</h5>

          </center>

                                  

          <asp:Image ID="headerPict" runat="server" CssClass="headerPic" ImageUrl="~/Graphics/ME05.Gif" />
 

           <!-- Give a little space -->

           <div style="height:55px"></div>
 

           <hr  width="96%" class="redline"/>
 

          

	<!-- Header end -->

	</div>

	

	<div id="body">

    <!-- Body start -->

    

	    <div id="dummy" style="position:relative; height: 65px"></div>

	

	    <div id="left" class="leftnav">	

		       <asp:ContentPlaceHolder ID="leftnav" runat="server">

                </asp:ContentPlaceHolder>

        </div>

        

        <div id="Div1" class="rightnav">	

              <asp:ContentPlaceHolder ID="righnav" runat="server">

              </asp:ContentPlaceHolder>

        </div>

                       

        <!-- Give a little space -->

        <div style="height:45px">

        </div>

        

    <!-- Body end -->

	</div>

	

	<div id="footer">

	<!-- Footer start -->

	

		  <center><hr width="75%" class="redline" /></center>

		  

		  <!-- Give a little space -->

          <div style="height:10px"></div>

		  

		  <center><a href="#theTop" class="anchor"  >Back to top</a></center>

		  

		  <br />

          <center>Marriage Encounter Western Cape &reg; is a registered trademark of Marriage Encounter Western Cape, Inc<br />

          &copy; 2009 Marriage Encounter Western Cape, Inc.

          </center>            

        

	<!-- Footer end -->

	</div>    
 

<!-- Div: "Container"  end -->

</div>
 

</form>
 

</body>
 

</html>
 
 

CSS:
 

.leftnav

{    

top: 0px;

float: left;

width: 27%;

margin: 0;

padding: .5em;

padding-right: 10px;

background-color:Aqua;

overflow:hidden;

}
 

.rightnav

{

width: 69%;

padding: .5em;

background-color:Orange;

overflow:hidden;

}

Open in new window

0
Comment
Question by:allanmark
3 Comments
 
LVL 10

Assisted Solution

by:ollyatstithians
ollyatstithians earned 175 total points
ID: 24017942
You could try adding a "clear: both" rule to the <hr> element after "rightnav"...

            <!-- Footer start -->
                  <center><hr style="clear: both;" width="75%" class="redline" /></center>

Olly.
0
 
LVL 11

Assisted Solution

by:level9wizard
level9wizard earned 175 total points
ID: 24017956
Use the css property:

<div style="clear:both;"></div>

before the footer div you don't want to "shoot up underneath".

You may also wish to apply a min-height to each div like this:

#myDiv
{
    min-height: 400px;
    height: auto !important;
    height: 400px;
}

This will grow vertically with content, but always be at least 400px high.
0
 

Accepted Solution

by:
allanmark earned 0 total points
ID: 24018544
http://imaginekitty.com/phonyBorders/phonyBorders.html  -- ha a look at source view and got what I needed!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Add animation to your css 12 32
Excel file not created as expected 7 46
Word Directory is not in the drop down list 4 24
VB.Net How to Exit Sub - Exit Form??? 5 47
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Performance in games development is paramount: every microsecond counts to be able to do everything in less than 33ms (aiming at 16ms). C# foreach statement is one of the worst performance killers, and here I explain why.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

930 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now