1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

css layout technique

Discussion in 'CSS' started by mikee.jk, Dec 17, 2008.

  1. #1
    Css Layout Technique
    hi gurus,


    I have a question regarding a layout for my new design..

    its a kind of half elastic and half fixed width

    my maximum width is 960px for (1024*768 or more resolution)

    my minimum width to be 745px


    the problem is with resolutions greater than 1024*768 - the layout grows-

    it should not grow than 960px otherthan header which is 100%



    at the same time it should fit for 800*600

    so that the layout doesnt collapse


    can anyone gelp me out this


    
    <!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" xml:lang="en">
    <head>
    <title></title>
    <style type="text/css">
    #header{
    border:1px solid #000;
    width:100%;
    }
    #left{
    width:160px;
    border:1px solid #000;
    float:left;
    }
    #container{
    border:1px solid #000;
    padding-right:160px;
    width:57%; /*my desired width is like 65%*/
    float:left;
    }
    #content{
    border:1px solid red;
    float:left;
    margin:0 20px;
    }
    #right{
    border:1px solid blue;
    float:left;
    width:160px;
    margin-right:-162px;
    }
    </style>
    </head>
    <body>
    	<div id="header">
    		<h1>header</h1>
    	</div>
    	<div id="left">
    		<p>left</p>
    	</div>
    	<div id="container">
    		<div id="content">
    			Content		</div>
    		<div id="right">
    			<p>right</p>
    		</div>
    	</div>
    
    </body>
    </html>
    
    
    Code (markup):
     
    mikee.jk, Dec 17, 2008 IP
  2. abcdefGARY

    abcdefGARY Well-Known Member

    Messages:
    665
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    110
    #2
    I'll try and help on this one. I'm not a "guru" so here is my version of it. I don't quite understand which area you wanted for the elastic part (container?) but I attempted to do what I think you were asking.

    <!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" xml:lang="en">
    <head>
    	<title></title>
    <style type="text/css">
    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	text-align: center;
    }
    
    #header, #container {
    	text-align: left;
    }
    
    #header {
    	width: 100%;
    }
    
    #container {
    	margin: auto;
    	width: 100%;
    	min-width: 745px;
    	max-width: 960px;
    }
    
    	#left {
    		width: 160px;
    		float: left;
    	}
    	
    	#right {
    		background: blue;
    		padding: 0 0 0 160px;
    	}
    	
    		#sidebar {
    			width: 160px;
    			float: right;
    			background: red;
    		}
    		
    		#content {
    			padding: 0 160px 0 0;
    		}
    </style>
    </head>
    <body>
    	<div id="header">
    		<h1>header</h1>
    	</div>
    	<div id="container">
    		<div id="left">
    			<p>left</p>
    		</div>
    		<div id="right">	
    			<div id="sidebar">
    				sidebar
    			</div>		
    			<div id="content">
    				content content content content content content content content content content content content content content content content 
    			</div>
    		</div>
    	</div>
    </body>
    </html>
    Code (markup):
    However, I only tested this in Firefox. I am very sure that it probably will need some tweaking in other browsers (example: IE) because I don't think IE understands "max-width" and "min-width". But it was my attempt. I hope it helps.

    :eek:
     
    abcdefGARY, Dec 17, 2008 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I'd do what abcdfGARY did, except I wouldn't waste a line saying "width: 100%" because that's going to get overridden by the min and max widths (unless that's sitting in there for IE or something).

    IE6 can't see min and max width so the safe easy thing is, with gary's code:
    
    #container {
    	margin:0  auto;
    	min-width: 745px;
    	max-width: 960px;
    }
    * html #container {width: 745px;}
    
    Code (markup):
    So, IE6 wouldn't stretch, but it would get a width declaration for Haslayout or whatever. Leaving the width: 100% in the top part would likely do the same, except you may not want IE6 to be 100% wide.

    There's also a CSS trick for min-width in IE6, and a CSS Expression (javascript in the CSS for IE only) you could use.
     
    Stomme poes, Dec 18, 2008 IP
  4. mikee.jk

    mikee.jk Peon

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    thank you guys

    for your solutions

    you guys rock
     
    mikee.jk, Dec 23, 2008 IP