CSS - Recommended Max Width For Liquid (fluid) Layout

Hi Guys,

I have a layout which is currently setup to be liquid. Aka it spreads out depending on how big the browser window is.

I'm trying to get it to be a set width. I can't quite get it figured out.

Here is the link to the current layout (made to be generic).

It's a layout I got from a CCS class.

http://65.175.116.253/design/demo.html

The css is here

http://65.175.116.253/design/css.css

The entire package can be downloaded here

http://65.175.116.253/design/design.rar

Now, to explain how I want it to look, I took my browser and made it just wide enough to show how wide I want the layout to be, and took a screenshot. But I can't get my css to make the whole layout that wide.. I'm scracthing my head here because it's probably really easy.

http://65.175.116.253/design/demo.jpg

Let's not worry about the exact width, but I want to define in the css the pixel width, so that can be changed whenever.

Here is the CSS



Code:

/*--- Generic Styles ---*/

body 
	{
	background: #e3edc2; color: #333;
	font: .8em,  Arial, verdana, sans-serif;
	margin: 0; 
	padding:0px;

	}
	
	#main {width:840px; margin:18px auto 0 auto; _text-align:left;}

a
	{
	color: #686397;
	}

a img
	{
	border: 0px none;
	}

p
	{
	margin: 0 0 1em;
	}
	
	
.smallboldtext 	
	{ 
	font-family: verdana, helvetica, sans-serif;
   	color: #686397;
   	font-size: .7em;
	font-weight: bold;
	}
	

.mediumtext 
	{ 
	font-family: verdana, helvetica, sans-serif;
  	color: #686397;
  	font-size: .9em;
	}
	
.mediumboldtext 
	{ 
	font-family: verdana, helvetica, sans-serif;
  	color: #686397;
  	font-size: .9em;
	font-weight: bold;
	}
	
.largetext 
	{
	font-family: verdana, helvetica, sans-serif;
   	color: #686397;
   	font-size: 1.5em;
	}
	

	/*--- Header Styles ---*/
	
	
#header 
	{
	margin-bottom: 1.75em; 
	padding-top: 1px;
	background: #abd240;
	}
	
	
#navbar 
	{	
	margin: 0; 
	padding: 0.5em 3em;
	background: #686397; 
	color: #fff;
	}
	

#navbar li
	{
	display: inline;
	margin-right: 0.5em; padding-right: 0.75em;
	border-right: 1px solid #99c;
	font-weight: bold;
	
	}


#navbar li.last 
	{
	border: 0px none;
	}
	

#navbar a
	{
	color: #d4ec84;
	text-decoration: none;
	}
	

#today
	{
	text-align: right;
	margin-top: -1.66em; padding: 0 2em 0 0;
	color: #fff;
	line-height: 1;
	}
	
	
	/*--- Content Styles ---*/
	
#content 
	{
	float: left;
	padding: 0 20em 4em 3em;
	
	}
	

#content h1
	{
	background: #fff; color: #686397;
	font-size: 1.5em;
	margin: 0 33% 1.25em -2em; padding: 0.4em 2em;
	}

	
#content h1 b
	{
	color: #b0d742;
	}
	
	
#content h2
	{
	margin: 0.5em 0; padding-bottom: 0.25em;
	border-bottom: 1px solid #b0d742;
	font-size: 1.5em;
	}
	
	
	/*--- Content Styles ---*/
	
table.basic
	{
	border: 0px;
	width: 100%;
	border-collapse: collapse; 
	}
	
table.basicborder
	{
	border: 2px solid #b0d742;
	width: 505px;
	border-collapse: collapse; 
	}

table.mainsearch 
	{
	border: 2px solid #b0d742;
	width: 415px;
	border-collapse: collapse; 
	}
	


/*--- Sidebar Styles ---*/



#sidebar 
	{
	float: right;
	width: 17em;
	margin: 0 1em 4em -18em; /* this creates a mathematical layout width of -1 */
	}
	
#sidebar div h3{
	background: #9b96ca;
}
#sidebar form_div 
	{
		margin: 0; padding: 0.8em;
	}
	
#sidebar div{
	background: #3a3c2d; color: #fff;
	padding: 0 1em 1em;
	margin-top: 0.75em;
}
#sidebar div h3{
	font-size: 1.25em;
	margin: 0 -0.8em; padding: 0.4em 0.8em;
	text-transform: lowercase;
}
	
	
#whatiscompany h4{
	margin: 0 0 0.5em; padding: 0.5em 0;
	border-bottom: 1px solid #fff;
	font-weight: normal;
}
#whatiscompany p:first-line{
	font-style: italic;
}
	
	

/*--- Footer Styles ---*/

#footer 
	{
	clear: both;
	padding: 1.5em 3em;
	background: #a0c63a;
	height: 15px;
	}

#footer p 
	{
	margin: .1em;
	}

#footer a 
	{
	color: #333;
	text-decoration: underline;
	}

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 http://www.jamesfarrell.eu/fixhtml/search.htm

HTML as follows:
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 as follows:
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;
}

Hi,

I have a background image that I want to incorporate into the header div of a fixed width layout. The header is of a gradient style - on the left it is a solid color and as you move along towards the right it fades to white.

The image is 981x76. If I bring it into Gimp, I can scale it to 1920 x 76 and it looks the same. I would like to be able to do that in a div tag, with the image as a background. I would like the image to scale horizontally just like I can do using Gimp.

Is this possible?

Basically, I want the browser to manage the scaling of the image.

Link he rpisolution dot com/test/

Ok, the fixed-fluid-fixed part of the layout seems to work ok in the latest firefox and IE7 but it's broken in IE6 and possibly other versions. Could you guys take a look at the css? rpisolution dot com/test/css/style.css and see if you see what is breaking it in IE6, i thought I had put a hack that was supposed to fix the issues.

btw, i know the CSS is probably ugly. sorry about that.

thanks

Running into some issues with a design.

I have provided a link to show what is happening. at the end, with some code, css, etc

The design calls for using up as much space width wise as possible, so that if the resolution gets bigger, the content in the main content section will expand.

There is a left side nav, which is a fixed width, and then the main content section, which I do not know the width. both are floated left.

The problem is, when the content in the main section expands to get bigger, in Firefox, will expand the size of the main section div to 100% of the screen before the text will flow to the next line, and thus, throws the div (which is floated) down to the next line.

Without setting a width of the main content div, and wanting to keep the left side nav a specific width, I am not sure how to avoid this problem. I just happened check in IE7, and it seems to do what I want (I haven't checked IE6).

I have posted a screenshot of what happens.

On the left side, is IE7, at a bigger resolution also (1280)
right side of screenshot is firefox, at a smaller resolution (1024)

http://ricebox.whiteazn.com/liquid.png

here is some code.

Also, the CSS will seem to be declared more than once, but that is because they are split up between structure.css, text.css, and theme.css. I also only put in the CSS for the main body part.

Any help would be appreciated.

=======================

html4strict Code:
Original - html4strict 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> <title>Control Panel: Company Name</title> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <link href="css/global.css" rel="stylesheet" type="text/css" /> <link href="scripts/p3p.xml" rel="P3Pv1" /> </head> <body> <div id="header"> <div class="logo"> <img src="images/header/logo.jpg" width="197" height="67" alt="alt" title="title" /> </div> <div class="nav"> <div class="parent-drill"> </div> <div class="manage-nav"> <ul id="main-nav"> <li><a href="?ebxid=221" class="inventory">Inventory</a></li> <li class="selected"><a href="?ebxid=700" class="leads">Leads</a></li> <li><a href="?ebxid=500" class="analytics">Analytics</a></li> </ul> </div> </div> <div class="details"> <div class="account-info"> Company Name <span class="rep">First Name</span> </div> <div class="account-details"> <ul id="account-nav"> <li><a href="?ebxid=725">Settings</a></li> <li><a href="?ebxid=244">Account</a></li> <li class="logout"><a href="?logout">Logout</a></li> </ul> </div> </div> </div> <div id="header-seperator"> </div> <div id="main-body"> <div class="top"></div> <div class="bot"></div> <div id="section-nav-narrow"> <div class="title-hdr"><h3>Leads</h3></div> </div> <div id="body-content">main page<br />main page<br />main page<br />main page<br />main page<br />main page<br /> main page<br />main page<br />main page<br />main page<br />main page<br />main page<br /> main page<br />main page<br />main page<br />main page<br />main page<br />main page<br /> main page<br />main page<br />main page<br />main page<br />main page<br />main page<br /> main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page </div> </div> </body> </html>

  

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


  


     <title>Control Panel: Company Name</title>


     <meta http-equiv="Content-Language" content="en-us" />


     <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />


     


     


     


     


     


     


     <link href="css/global.css" rel="stylesheet" type="text/css" />


     


     <link href="scripts/p3p.xml" rel="P3Pv1" />


  


 </head>


  


 <body>


  


  


     


     


     


     


  


     


     


     


  


  


         


 <div id="header">


  


 <div class="logo">


 <img src="images/header/logo.jpg" width="197" height="67" alt="alt" title="title" />


 </div>


  


 <div class="nav">


     <div class="parent-drill">


         


     </div>


     <div class="manage-nav">


         <ul id="main-nav">


             


             <li><a href="?ebxid=221" class="inventory">Inventory</a></li>


             <li class="selected"><a href="?ebxid=700" class="leads">Leads</a></li>


             <li><a href="?ebxid=500" class="analytics">Analytics</a></li>


         </ul>


     </div>


 </div>


  


 <div class="details">


     <div class="account-info">


     Company Name


     <span class="rep">First Name</span>


     </div>


     <div class="account-details">


         <ul id="account-nav">


             <li><a href="?ebxid=725">Settings</a></li>


             <li><a href="?ebxid=244">Account</a></li>


             <li class="logout"><a href="?logout">Logout</a></li>


         </ul>


     </div>


 </div>


  


 </div>


  


 <div id="header-seperator">


 </div>


     


     


     <div id="main-body">


         <div class="top"></div>


         <div class="bot"></div>


         <div id="section-nav-narrow">


             <div class="title-hdr"><h3>Leads</h3></div>


         </div>


         <div id="body-content">main page<br />main page<br />main page<br />main page<br />main page<br />main page<br />


             main page<br />main page<br />main page<br />main page<br />main page<br />main page<br />


             main page<br />main page<br />main page<br />main page<br />main page<br />main page<br />


             main page<br />main page<br />main page<br />main page<br />main page<br />main page<br />


             main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page 


         </div>


     </div>


 </body>


 </html> 

CSS Code:
Original - CSS Code #main-body { overflow: hidden; margin-left: 10px; position: relative; } #main-body #section-nav-narrow { float: left; width: 133px; } #main-body .title-hdr { margin: 6px 3px 0 3px; padding: 0 0 6px 9px; } #main-body #section-nav-narrow .title-hdr { width: 118px; } #main-body .top { position: absolute; top: 0; left: 0; width: 133px; height: 8px; } #main-body .bot { position: absolute; bottom: 0; left: 0; width: 133px; height: 1px; } #main-body #body-content { float: left; min-width: 860px; } #main-body { background: #fff url(../images/cp_template/left_nav.gif) left top repeat-y; } #main-body #section-nav-narrow { } #main-body .top { background: #fff url(../images/cp_template/left_nav_top.jpg) left top no-repeat; } #main-body .bot { background: #fff url(../images/cp_template/left_nav_bot.gif) left top no-repeat; } #main-body .title-hdr { background-color: #fff; color: #1b5094; } #main-body #section-nav-narrow h3 { } #main-body .title-hdr h3 { font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-size: 11px; }

  

  


 #main-body {


     overflow: hidden;


     margin-left: 10px;


     position: relative;


 }


 #main-body #section-nav-narrow {


     float: left;


     width: 133px;


 }


 #main-body .title-hdr {


     margin: 6px 3px 0 3px;


     padding: 0 0 6px 9px;


 }


 #main-body #section-nav-narrow .title-hdr {


     width: 118px;


 }


 #main-body .top {


     position: absolute;


     top: 0;


     left: 0;


     width: 133px;


     height: 8px;


 }


 #main-body .bot {


     position: absolute;


     bottom: 0;


     left: 0;


     width: 133px;


     height: 1px;


 }


 #main-body #body-content {


     float: left;


     min-width: 860px;


 }


 #main-body {


     background: #fff url(../images/cp_template/left_nav.gif) left top repeat-y;


 }


 #main-body #section-nav-narrow {


 }


 #main-body .top {


     background: #fff url(../images/cp_template/left_nav_top.jpg) left top no-repeat;


 }


 #main-body .bot {


     background: #fff url(../images/cp_template/left_nav_bot.gif) left top no-repeat;


 }


 #main-body .title-hdr {


     background-color: #fff;


     color: #1b5094;


 }


 #main-body #section-nav-narrow h3 {


 }


 #main-body .title-hdr h3 {


     font-weight: bold;


     font-family: Arial, Helvetica, sans-serif;


     font-size: 11px;


 }