Menu
Community /Pin to ProfileBookmark
@NogDogAug 03.2005 — #
Maybe by default, but CSS allows us to change those defaults:
Want to center 3 columns using div
Hi all, I want to have a simple layout like [url]www.tizag.com
Sign in
to post a comment2 Comments(s) ↴
0
@NogDogAug 03.2005 — #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
[/QUOTE]
Maybe by default, but CSS allows us to change those defaults:
[code=html]
<!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>
[/code]