Two column MasterPage, with CSS

Posted on 2009-03-30
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?

<%@ 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 ID="Content2" ContentPlaceHolderID="righnav" Runat="Server">

a<br />

b<br />

c<br />



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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="" >

<head id="Head1" runat="server">


    <title>Mime Master</title>


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

    href="CSS/Mime.CSS" />  



<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:LoginName  ID="lgUser" runat="server" CssClass="loginName" FormatString="Member: {0}"/>



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

		  <h5>(Administration Management)</h5>



          <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 id="body">

    <!-- Body start -->


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


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

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




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

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




        <!-- Give a little space -->

        <div style="height:45px">



    <!-- Body end -->



	<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.



	<!-- Footer end -->


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








top: 0px;

float: left;

width: 27%;

margin: 0;

padding: .5em;

padding-right: 10px;






width: 69%;

padding: .5em;




Open in new window

Question by:allanmark
LVL 10

Assisted Solution

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>

LVL 11

Assisted Solution

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:

    min-height: 400px;
    height: auto !important;
    height: 400px;

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

Accepted Solution

allanmark earned 0 total points
ID: 24018544  -- ha a look at source view and got what I needed!

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