Hi all, I want to have a simple layout like <!-- w --><a class="postlink" href="http://www.tizag.com">www.tizag.com</a><!-- w -->. Three cloumns, two smaller ones on the sides and content in the middle. I want all three columns to fit in a 800 px wide area that is centered in the page. It might sound like I'm lazy and just want some else to do it for me but thte thing is I tried already and to avail, now I'm just wanting to know if anyone has any experience withthis. Thank you.hi,
You can't make column using div tag, becuse div tag takes 100% width by default. so you have to use <table> tag.
if you want to use table tag then code is here
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="100%" height="100%">
<TR>
<TD width="33%"></TD>
<TD width="33%"></TD>
<TD width="33%"></TD>
</TR>
</TABLE>
Now you can use the div tag in <td></td> tag
best regards
deep dhyanihi,
You can't make column using div tag, becuse div tag takes 100% width by default. so you have to use <table> tag.
if you want to use table tag then code is here
Maybe by default, but CSS allows us to change those defaults:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Page title</title>
<style type="text/css">
<!--
body {
font: medium arial, sans-serif;
background-color: #abc;
}
#container {
width: 800px;
margin: 0 auto;
padding: 0;
}
h1 {
text-align: center;
margin: 0;
padding: 10px;
}
#left, #middle, #right {
float: left;
margin: 0;
padding: 10px;
}
#left, #right {
font-size: small;
width: 150px;
padding-top: 0;
}
#middle {
width: 436px;
background-color: #def;
border: solid 2px black;
}
-->
</style>
</head>
<body>
<div id='container'>
<h1>This Is The Top Heading</h1>
<div id='left'>
<h3>Left Column</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div> <!-- left -->
<div id='middle'>
<h3>Left Column</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div> <!-- middle -->
<div id='right'>
<h3>Right Column</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div> <!-- right -->
</div> <!-- container -->
</body>
</html>
You can't make column using div tag, becuse div tag takes 100% width by default. so you have to use <table> tag.
if you want to use table tag then code is here
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="100%" height="100%">
<TR>
<TD width="33%"></TD>
<TD width="33%"></TD>
<TD width="33%"></TD>
</TR>
</TABLE>
Now you can use the div tag in <td></td> tag
best regards
deep dhyanihi,
You can't make column using div tag, becuse div tag takes 100% width by default. so you have to use <table> tag.
if you want to use table tag then code is here
Maybe by default, but CSS allows us to change those defaults:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Page title</title>
<style type="text/css">
<!--
body {
font: medium arial, sans-serif;
background-color: #abc;
}
#container {
width: 800px;
margin: 0 auto;
padding: 0;
}
h1 {
text-align: center;
margin: 0;
padding: 10px;
}
#left, #middle, #right {
float: left;
margin: 0;
padding: 10px;
}
#left, #right {
font-size: small;
width: 150px;
padding-top: 0;
}
#middle {
width: 436px;
background-color: #def;
border: solid 2px black;
}
-->
</style>
</head>
<body>
<div id='container'>
<h1>This Is The Top Heading</h1>
<div id='left'>
<h3>Left Column</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div> <!-- left -->
<div id='middle'>
<h3>Left Column</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div> <!-- middle -->
<div id='right'>
<h3>Right Column</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div> <!-- right -->
</div> <!-- container -->
</body>
</html>