SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    May 2004
    Location
    London (sometimes Sheffield), UK
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Child div content outside parent

    Hi all

    I'm having a problem with content from a child div overlaping the parent div. I want to have two columns within a div element. So I created a column class within the section class which has 50% width and then set it float:left. However in Mozilla/Firefox when I add the float setting the content is then outside the parent.


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    	<title>LightWorks User Site - Admin Area</title>
    	<style type="text/css">
    	html, body{	
    	font: 8pt/12pt verdana;
    	background-color: #ccc;
    	text-align: center;}
    	
    .section {
    	background-color: #fff;
    	border: thin solid #7D74AB;
    	text-align: left;
    	width: 80%; 
    	padding: 10px;
    	margin: 5px 8% 5px 8%;
    	clear: both;
    }
    
    .section .column {
    	width: 50%;
    	float:left;
    }
    </style>
    </head>
    
    <body>
    
    <h1>LightWorks User Site - Admin Area</h1>
    
    <div class="section">
    <h2>Reports</h2>
    <div class="column">
    <p><a href="#" target="_blank">Registered Users</a></p>
    <p><a href="#" target="_blank">Users who want news from Suppliers</a></p>
    <p><a href="#" target="_blank">Top 10 Downloads</a></p>
    </div><div class="column">
    <p><a href="#" target="_blank">Sales Report</a></p>
    <p><a href="#" target="_blank">VAT Report</a></p>
    <p><a href="#" target="_blank">Archives Licensed</a></p>
    </div>
    </div>
    
    </body>
    </html>
    Can anyone see where I'm going wrong?

    Thanks in advance!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You need to clear the floats. (See the FAQ on floats.)

    Floats are removed from th flow and in browsers like mozilla they have no impact on their parent because the float is removed from the flow and the parent doesn't know its there. This is by design and allows floats to float in and out of their parent eleemnts.

    To contain the float you simply need to use a clearing mechanism before the closing tag of the parent element.

    e.g.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>LightWorks User Site - Admin Area</title>
    <style type="text/css">
     html, body{ 
     font: 8pt/12pt verdana;
     background-color: #ccc;
     text-align: center;}
     
    .section {
     background-color: #fff;
     border: thin solid #7D74AB;
     text-align: left;
     width: 80%; 
     padding: 10px;
     margin: 5px 8% 5px 8%;
     clear: both;
    }
    .section .column {
     width: 50%;
     float:left;
    }
    .clearer{
     height:1px;
     overflow:hidden;
     clear:both;
     margin-top:-1px;
    }
    </style>
    </head>
    <body>
    <h1>LightWorks User Site - Admin Area</h1>
    <div class="section"> 
      <h2>Reports</h2>
      <div class="column"> 
    	<p><a href="#" target="_blank">Registered Users</a></p>
    	<p><a href="#" target="_blank">Users who want news from Suppliers</a></p>
    	<p><a href="#" target="_blank">Top 10 Downloads</a></p>
      </div>
      <div class="column"> 
    	<p><a href="#" target="_blank">Sales Report</a></p>
    	<p><a href="#" target="_blank">VAT Report</a></p>
    	<p><a href="#" target="_blank">Archives Licensed</a></p>
      </div>
    <div class="clearer"></div>
    </div>
    </body>
    </html>
    Hope that helps.

    Paul

  3. #3
    I'm in your computer! Halo-13's Avatar
    Join Date
    Jun 2004
    Location
    Minneapolis, MN
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    2 for 1 PAUL!

    I was just about to post regrading something just like this. It works, Thanks for the tip!

  4. #4
    SitePoint Member
    Join Date
    May 2004
    Location
    London (sometimes Sheffield), UK
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fantastic! Thanks so much! I knew it was the float that was causing the problem but I couldn't work out why.

    Sorry I shoudl have looked in the FAQ. I did a load of searches in the forums on various different keywords but nothing seemed to match.

    Anyway thanks again!


Bookmarks

Posting Permissions

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