SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Didgy Div in Firefox

    Hi,

    I am having a go at creating a website in CSS - I havn't really used it before and am having a bit of difficulty. In the webpage i have created there is a div which has 2 other divs in in, one floating left and one right, however in firefox they overflow the container box and look totally wrong. I am just wondering if anyone can tell me why it does it and how to fix it. Also if you see any problems with my css techniques please let me know - as i say its my first css website.

    Here is the code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html>
    
    	<head>
    
    		<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
    		<meta http-equiv="Content-Language" content="en-us"/>
    		<title>Title</title>
    
    		<style type="text/css">
    			<!--
    			
    			a
    			{
    			text-decoration: none;
    			color: #666666;
    			}
    			
    			h1
    			{
    				font-size: 20px;
    				font-weight: 100%;
    				border-bottom: solid 1px #99ccff;
    				padding: 0px 0px 5px;
    				margin: 0px 0px 20px;
    			}
    			
    			div.header
    			{
    				color: white;
    				background-color: #005680;
    				padding: 0px;
    				margin: 0px;
    				height: 61px;
    			}
    
    			img.logo
    			{
    				position: absolute;
    				left: 5px;
    				top: 5px;
    			}
    
    			img.summary
    			{
    				position: absolute;
    				right: 5px;
    				top: 5px;
    			}
    
    			div.menu
    			{
    				color: white;
    				font-weight: bold;
    				font-size: 14px;
    				padding: 1px 4px 1px;
    				text-align: right;
    				border-top-style: solid;
    				border-bottom-style: solid;
    				border-width: 1px;
    				border-color: black;
    				background-color: #00486a;
    				margin: 0px;
    			}
    			
    			div.shadow
    			{
    				background-color: #cdcdcd;
    				font-size: 1px;
    				height: 3px;
    				margin: 0px;
    			}
    
    			div.about
    			{
    				border: solid 1px #e0e0e0;
    				background-color: #eeeeee;
    				font-size: 15px;
    				padding: 10px;
    				margin: 10px auto 10px auto;
    				width: 740px;
    				text-align: justify;
    			}
    
    			div.content
    			{
    				border: solid 1px #cdcdcd;
    				font-weight: bold;
    				font-size: 15px;
    				padding: 10px;
    				margin: 10px auto 10px auto;
    				width: 740px;
    			}
    			
    			div.main
    			{
    				width: 540px;
    				float: left;
    			}
    			
    			div.profile
    			{
    				float:right;
    				width: 170px;
    				border-left: dotted 1px #cdcdcd;
    				display: inline;
    				padding: 0px 0px 0px 10px;
    			}
    			
    			div.cost
    			{
    			border: solid 1px #e0e0e0;
    			background-color: #eeeeee;
    			padding: 5px;
    			text-align: center;
    			font-size: 24pt;
    			}
    			
    			body
    			{
    				margin: 0;
    				padding: 0;
    				font-family: "trebuchet ms", arial, tahoma, verdana, sans-serif;
    				background-color: white;
    				color: black;
    			}
    
    			-->
    		</style>
    	</head>
    
    	<body>
    		<div class="header">
    			<img class="logo" src="images/logo.png" alt="Logo"/>
    			<img class="summary" src="images/summary.png" alt="Summary"/>
    		</div>
    		<div class="menu">
    			History | About | Tell a Friend | Terms | Press | Contact Us
    		</div>
    		<div class="shadow">
    			&nbsp;
    		</div>
    		<div class="about">
    			About
    		</div>
    		<div class="content">
    			<div class="main">
    				<h1>
    					Title
    				</h1>
    				Content
    				</div>
    			<div class="profile">
    				<div class="cost">
    					<img src="images/cost.png" alt="Todays Cost"/><br/>
    					Price
    				</div>
    			</div>
    			
    		</div>
    
    	</body>
    
    </html>
    Thanks

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Hi. The error here is actually on IE's part. Floats should overflow their container.

    HTML:
    Code:
    	<div class="content">
    			<div class="main">
    				<h1>
    					Title
    				</h1>
    				Content
    				</div>
    			<div class="profile">
    				<div class="cost">
    					<img src="images/cost.png" alt="Todays Cost"/><br/>
    					Price
    				</div>
    			</div>
    
    			<div id="footer">Footer</div>			
    
    		</div>
    CSS:
    Code:
    #footer {
    	clear: both;
    }
    What you see above is the easiest way of clearing floats. For more info, including some methods which don't require extra structural mark-up see:

    http://www.positioniseverything.net/easyclearing.html
    http://www.quirksmode.org/css/clearing.html

  3. #3
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thankyou very much!!

    Second link showed it can be sorted using overflow: hidden; which works a treat.

    Thanks a lot for your help.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Second link showed it can be sorted using overflow: hidden
    And guess who's discovered that originally lol (me)

    See the faq on floats for a lot more info on floats and their problems.


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
  •