SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Liquid layout 100 percent width problem

    Hi,

    I'm having a problem a liquid layout using 100 percent width. The inner box peeks out side to the right of the containing box (which is 100% width).

    I am viewing with firefox. At a resolution of 1024 width. With IE 6 it's very nasty looking (extremely wide).

    Can anyone tell me what I need to do or what I'm doing wrong please

    I have simplified the page to highlight the problem I'm having a problem on this page

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    	<head>
    		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    		
    		<link href="fixlayout.css" rel="stylesheet" type="text/css"/>
    		
    		
    	</head>
    	<body>
    
    		
    		
    		<div id='wrap'>			
    			<div id="content">
    				<div class="searchresult1">
    					<h3><a href='info.php?id=486'>rent in france</a> (222.00) per week)</h3><a href=info.php?id=486><img src='images/no_image.gif' width='130' height='127' border=0  /></a><p>1 Bedrooms, 0 Bathrooms, House</p><p>s..</p>
    					<a href='info.php?id=486'>More details</a>
    				</div>
    			</div>
    		</div>
    			
    		
    		<!-- <div id="goToTop" class="sNav"><p><a href="#content">^ Top</a></p></div> -->
    
    		
    		
    	</body>
    </html>
    CSS:
    Code:
    body {
    	color: #333333;
    	background-color: white;
    	font-size: 12px;
    	line-height: 1.3em;
    	margin: 0;
    	padding: 0;
    	border:1px solid black;
    	width:100%;
    	}
    	#wrap {
    	background: white;
    	margin: 0 0 2em 22%;
    	
    }
    #content {
    	padding:0;
    	border-right: 1px solid #ccc;
    	margin-right: 4em; 
    	width:97%;
    	margin-left:2.75%;
    }
    div.searchresult1 {
    	
    
    	width:800px;
    	width: expression(this.width > 400 ? 400: true);
    	
    	margin-top:20px;
    	margin-right:40%;
    	border:1px solid #9eceeb;	
    
    }
    div.searchresult1:after {
    content:".";
    display:block;
    clear:both;
    height: 0; 
    visibility: hidden;
    }
    div.searchresult1{display: inline-block;} 
    /* Hides from IE Mac \*/ 
    * html 
    div.searchresult1{height: 1%;} 
    div.searchresult1{display:block;}
     /* End Hack */ 	
     div.searchresult1 h3{
    	background: #c0ddea;
    	margin:0;
    	padding:4px;
    	
    }
    div.searchresult1 h4{
    	background: #c0ddea;
    	margin:0;
    	padding:4px;
    	border:1px solid black;
    }
    div.searchresult1 img {
    	margin: 10px;
    	float:left;
    	border:1px solid black;
    }

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remove the width settings from .searchresult1 div, which will allow it to fill the width as available.


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
  •