?
Solved

Two column MasterPage, with CSS

Posted on 2009-03-30
3
Medium Priority
?
439 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 10

Assisted Solution

by:ollyatstithians
ollyatstithians earned 700 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 700 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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 add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Suggested Courses
Course of the Month10 days, 6 hours left to enroll

765 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