PDA

View Full Version : how to create 3 column layout


bigcy
September 5th, 2007, 10:14 AM
hi all
I need to create a 3 column layout where there is padding of 50 pixels from both the side (left & right) the middle portion is stretchable according to resolution

plz help me finiding the solution for the same

thanking in advance
DDD
September 5th, 2007, 10:20 AM
www.csstinderbox.com

I could explain it and write out the code for you. But they have some templates you can study plus get you started.
thats all folks
September 5th, 2007, 10:21 AM
I hate to be the one to say this but did you search first? This helped me understand 3 column layouts

http://www.kirupa.com/forum/showthread.php?t=265743&highlight=column+layout

Cheers
bigcy
September 5th, 2007, 10:55 AM
hi all

I look into the code suggested by thats all folks & made changes according to my need, but still im unable to get the required output. The middle area doesn't stretch to its full length

plz help in fixing the same


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body { margin:0; padding:0; }

h1 {
color: #000066;
font: bold 16pt/1.6em Arial, Verdana, Helvetica, sans-serif;
text-align: center;
margin: 1px 0 15px 0;
padding: 0;
}

h2 {
color: #000066;
font: bold 12pt/1.6em Arial, Verdana, Helvetica, sans-serif;
margin: 15px 0 0 0;
padding: 0;
}

h3 {
color: #000;
font-weight: bold;
font-size: 11px;
margin: 15px 0 0 0;
padding: 0;
}

p { margin: 5px 0 10px 0; }

#mainContainer {
width:auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #fff;
color: #000;
}

#leftCol {
float:left;
width:50px;
padding:0;
background-color: #000000;
}

#rightCol{
float:right;
width:50px;
padding:0;
text-align:center;
background-color: #000000;
}

#middleCol {
float:left;
background-color: #003366;
padding-right: 50px;
padding-left: 50px;
clear: none;
width: auto;
}


ul.seriesImgs {
width: 108px;
margin:0 0 0 10px;
padding:0;
list-style:none;
}
ul.seriesImgs img { width: 108px; height: 107px; }
ul.seriesImgs li{
margin:0 0 10px 0;

}
</style>
</head>
<body>
<div id="mainContainer">
<div id="leftCol">
</div>
<div id="middleCol">
</div>
<div id="rightCol">
</div>
</div>
</body>
</html>
bigcy
September 6th, 2007, 04:24 AM
anybody out there to help me ?
sidhu
September 6th, 2007, 08:45 AM
hi
corections:
body{
text-align:center;
}
#mainContainer {
width:800px;
}
#middleCol{

width: 600px
}
u add this for your code;
i hope it solve ur problem

sidhu>G
bigcy
September 6th, 2007, 09:00 PM
hi sidhu

thanks for the solution.

It somehow solve my problem, but not 100%. I want that the middle portion should adjust itself according to resolution. So we need not want to give the width to this middle portion.

thanks
bigcy
September 7th, 2007, 10:10 AM
hi all
cant we make the middle portion of the structure as stretchable so that it will adjust himself according to the resolution ?
thats all folks
September 7th, 2007, 10:12 AM
"adjust himself according to the resolution?" do you mean to a user's screen res?
bigcy
September 7th, 2007, 11:14 AM
ya I mean if we make it 100 % then it should stretch according to the screen resolution
sammix
September 7th, 2007, 11:43 AM
Take a look HERE (http://www.html.net/tutorials/css/lesson13.asp). They use float and percentages. I don't know if that's customisable enough for you though.



#column1 {
float:left;
width: 33%;
}

#column2 {
float:left;
width: 33%;
}

#column3 {
float:left;
width: 33%;
}
bigcy
September 12th, 2007, 06:55 AM
hi all following is the code which made ; but there is 1-2 pixel gap in IE can someone tell me why its coming & how to eliminate it ?


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin:0;
padding:0;
}

#mainContainer {
width:auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
height: auto;
background-color: #000000;
}

#leftCol {
float:left;
width:5%;
padding:0;
background-color: #333333;
height: 100px;
}

#rightCol{
float:right;
width:5%;
padding:0;
text-align:center;
background-color: #333333;
height: 100px;
}

#middleCol {
background-color: #3333CC;
padding-right: 5%;
padding-left: 5%;
width: 80%;
float: left;
height: 100px;
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
clear: none;
}

</style>
</head>
<body>
<div id="mainContainer">
<div id="leftCol">
</div>
<div id="middleCol">
</div>
<div id="rightCol">
</div>
</div>
</body>
</html>


regards
bigcy
September 28th, 2007, 05:39 AM
Anybody out there to help me out ?