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 'HTML & Website Design' started by mikee.jk, Dec 17, 2008.

0
  1. #1
    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. nowares

    nowares Active Member

    Messages:
    115
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    80
    #2
    I guess you have tried min-width: and max:width rules for the relevant rules?

    A great trick from the old days, which isn't used much anymore:
    Use a picture spacer. Make a 1px transparent gif and then use width and height to set how big the container should be.

    Regular pictures are also great for creating a minimum width ;)

    You could also just enclose what you have now in another div and space that accordingly.

    You should also consider people using other screen resolutions (I, for example, use 1440 x 900px).
    So setting 100% is not always the best option. I prefer to set one div as a fixed px width, then set the rest from that.
     
    nowares, Dec 17, 2008 IP