Hello everyone,
I'm trying to redo my website with CSS and I am having problems with 3 column alignment issue. columnright is not where it's suppose to be and that is on the right side of the page. I've set float to left but it's just not working. I've tried searching but everything that looked similar to my issue does not help. Any ideas?
I forgot to add that the column right is position below columncenter. This should be just simple 3 column format align from left to right.
Code:
<!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=utf-8" />
<title>Multi-column Layouts</title>
<style type="text/css" media="screen"><!--
body {
font-size: 12px;
font-family: arial, helvetica, Geneva, Swiss, sans-serif;
line-height: 16px;
}
#page {
margin: 0 auto;
width: 800px;
}
#columnleft, #columncenter, #columnright {
margin-right: 4px;
float: left;
}
#columnleft {
background-color: #ccc;
width: 160px;
border: solid 2px black;
}
#columncenter {
background-color: #fff;
width: 440px;
border: solid 2px black;
}
#columnright {
background-color: #ccc;
width: 200px;
border: solid 2px black;
}
#header {
background-color: #ccc;
display: block;
margin: 5px 0;
padding: 5px;
width: 800px;
clear: both;
border: solid 2px black;
}
p {
padding: 10px;
}
h1 {
font-size: 1.5em;
padding: 5px;
}
h2 {
font-size: 1.25em;
padding: 5px;
}
.chapter {
margin-top: 0;
margin-bottom: 3px;
font-sixe: 10px;
}
--></style>
</head>
<body>
<div id="page">
<div id="header">
<h1>BeadWare Designs</h1>
</div>
<div id="columnleft">
<h2>Chapters</h2>
<p class="chapter"><b>Chapter I</b></p>
<p class="chapter"><b>Chapter II</b></p>
<p class="chapter"><b>>> Chapter III</b></p>
<p class="chapter"><b>Chapter IV</b></p>
<p class="chapter"><b>Chapter V</b></p>
<p class="chapter"><b>Chapter VI</b></p>
<p class="chapter"><b>Chapter VIII</b></p>
<p class="chapter"><b>Chapter iX</b></p>
<p class="chapter"><b>Chapter X</b></p>
</div>
<div id="columncenter">
<h2>CHAPTER III</h2>
<h2>A Caucus-Race and a Long Tale</h2>
<p>This is main content.This is main content.This is main content.This is main content.This
is main content.This is main content.This is main content.This is main content.This is main content.This is main content.
This is main content.This is main content.This is main content.This is main content.This is main content.This is main
content.This is main content.This is main content.This is main content.This is main content.This is main content.This is
main content.This is main content.This is main content.This is main content.This is main content.This is main content.This
is main content.This is main content.This is main content.This is main content.This is main content.This is main content.
This is main content.This is main content.This is main content.This is main content.This is main content.This is main
content.This is main content.This is main content.This is main content.This is main content.This is main content.This is
main content.This is main content.This is main content.</p>
</div>
<div id="columnright">
<h2>This is text to fill up this column.</h2>
</div>
</div>
</body>
</html>
Thanks..
EugeneHow wide is your browser window. The sizes that you have set would require a screen resolution of 1024 or greater for them all to fit.My screen resolution is set to 1024x768. Browser is maximize so it should fit the browser. The top header is set to 800px and so is #page.
EugeneWell I figured it out. I didn't realize that margin space also counts towards the total 800 px size. When I changed the column sizes or rather reduced them, it fixed the problem. Thanks Felgall for pointing me to that.
Eugene
I'm trying to redo my website with CSS and I am having problems with 3 column alignment issue. columnright is not where it's suppose to be and that is on the right side of the page. I've set float to left but it's just not working. I've tried searching but everything that looked similar to my issue does not help. Any ideas?
I forgot to add that the column right is position below columncenter. This should be just simple 3 column format align from left to right.
Code:
<!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=utf-8" />
<title>Multi-column Layouts</title>
<style type="text/css" media="screen"><!--
body {
font-size: 12px;
font-family: arial, helvetica, Geneva, Swiss, sans-serif;
line-height: 16px;
}
#page {
margin: 0 auto;
width: 800px;
}
#columnleft, #columncenter, #columnright {
margin-right: 4px;
float: left;
}
#columnleft {
background-color: #ccc;
width: 160px;
border: solid 2px black;
}
#columncenter {
background-color: #fff;
width: 440px;
border: solid 2px black;
}
#columnright {
background-color: #ccc;
width: 200px;
border: solid 2px black;
}
#header {
background-color: #ccc;
display: block;
margin: 5px 0;
padding: 5px;
width: 800px;
clear: both;
border: solid 2px black;
}
p {
padding: 10px;
}
h1 {
font-size: 1.5em;
padding: 5px;
}
h2 {
font-size: 1.25em;
padding: 5px;
}
.chapter {
margin-top: 0;
margin-bottom: 3px;
font-sixe: 10px;
}
--></style>
</head>
<body>
<div id="page">
<div id="header">
<h1>BeadWare Designs</h1>
</div>
<div id="columnleft">
<h2>Chapters</h2>
<p class="chapter"><b>Chapter I</b></p>
<p class="chapter"><b>Chapter II</b></p>
<p class="chapter"><b>>> Chapter III</b></p>
<p class="chapter"><b>Chapter IV</b></p>
<p class="chapter"><b>Chapter V</b></p>
<p class="chapter"><b>Chapter VI</b></p>
<p class="chapter"><b>Chapter VIII</b></p>
<p class="chapter"><b>Chapter iX</b></p>
<p class="chapter"><b>Chapter X</b></p>
</div>
<div id="columncenter">
<h2>CHAPTER III</h2>
<h2>A Caucus-Race and a Long Tale</h2>
<p>This is main content.This is main content.This is main content.This is main content.This
is main content.This is main content.This is main content.This is main content.This is main content.This is main content.
This is main content.This is main content.This is main content.This is main content.This is main content.This is main
content.This is main content.This is main content.This is main content.This is main content.This is main content.This is
main content.This is main content.This is main content.This is main content.This is main content.This is main content.This
is main content.This is main content.This is main content.This is main content.This is main content.This is main content.
This is main content.This is main content.This is main content.This is main content.This is main content.This is main
content.This is main content.This is main content.This is main content.This is main content.This is main content.This is
main content.This is main content.This is main content.</p>
</div>
<div id="columnright">
<h2>This is text to fill up this column.</h2>
</div>
</div>
</body>
</html>
Thanks..
EugeneHow wide is your browser window. The sizes that you have set would require a screen resolution of 1024 or greater for them all to fit.My screen resolution is set to 1024x768. Browser is maximize so it should fit the browser. The top header is set to 800px and so is #page.
EugeneWell I figured it out. I didn't realize that margin space also counts towards the total 800 px size. When I changed the column sizes or rather reduced them, it fixed the problem. Thanks Felgall for pointing me to that.
Eugene