Mon, 2005-05-23 22:26
So here's my page as of now. http://www.aapc.com/localchapternewsletter.html
And I am having some difficulty floating the right column, It's all nested within one div which displays the purple border, for some reason that's not displaying right now. Any help you can give with this layout would be great. Thanks
Here's what I want to emulate
http://www.aapc.com/images/page%20layout.jpg
Mon, 2005-05-23 23:05
#1
Dual Column Layout problem
Hi
Your page doesn't validate and you are missing important code such as <head> and <body>.
Your right column isn't floated because you havn't floated anything.
#LeftColumn {
float: left;
width: 225px;
border: 2px solid #7F42F8;
padding: 0 0 0 5px;
text-align: left;
}
Some pointers.
Don't use uppercase.
Close tags correctly.
<p></p>
Self close tags
meta
img
<br />
Mon, 2005-05-23 23:07
#2
Dual Column Layout problem
I uploaded an older page, I have tried floating it. And it sends the right column underneath the purple border. Anyone know why it would do that? I wasn't going to use xhtml. I will change that doctype declaration.
Mon, 2005-05-23 23:28
#3
Dual Column Layout problem
Try floating the right column right aswell as the left column left.
Mon, 2005-05-23 23:31
#4
Dual Column Layout problem
When I try that the left column stays intact, but the right column still floats underneath the border.
Mon, 2005-05-23 23:36
#5
Dual Column Layout problem
you're still missing your <html> <head> and <body> tags. add those, then validate it at
but even then it won't validate, because you're using a strict XHTML 1.0 DTD, which means lines like
<link href="stylesheets/LocalChapter.css" rel="stylesheet" type="text/css">
is invalid.
you need to close your tags like
<link href="stylesheets/LocalChapter.css" rel="stylesheet" type="text/css" />
if you're going to use an XHTML strict DTD. any tags that don't have a </tag> at the end need to be closed like the above statement.
your CSS still doesn't have anything that floats left.
Mon, 2005-05-23 23:39
#6
Dual Column Layout problem
To clarify, I am making these changes locally.
Mon, 2005-05-23 23:53
#7
Dual Column Layout problem
Soz can't help you tonight as I would have to start from scratch and I'm tired.
Look on google and find a two column template and go from there. Best way of learning.
Mon, 2005-05-23 23:58
#8
Dual Column Layout problem
Westboarder wrote:
To clarify, I am making these changes locally.
gotcha. however, if you could update the online version as you come back with more questions, so we can see what progress you've made.
put both boxes you want to be next to each other in a div together, then make one float: left and the other float: right. that should work, i think...
Tue, 2005-05-24 01:47
#9
how to float a goat in a boat
Once you've figured out what a doctype is, do this:
create a 'wrapper' div that will enclose both divs, then..
decide which content you want to appear first in terms of search engine reachability - make this the floated div - either float it left or right, but make sure it has a specified width
..now, if your floated div is on the left, for the other div do this:
margin-left: (whatever value you gave as the width on the float);
or if your floated div is on the right you don't need to specify a margin for the left div.
but whatever route you take you must remember this or the sky will fall on your head...
clear your floats
like this: add this underneath both floats <br style="clear:both;" />
and that should wrap it up.
Tue, 2005-05-24 20:49
#10
Dual Column Layout problem
cherryblossomtree wrote:
Once you've figured out what a doctype is, do this:
create a 'wrapper' div that will enclose both divs, then..
decide which content you want to appear first in terms of search engine reachability - make this the floated div - either float it left or right, but make sure it has a specified width
..now, if your floated div is on the left, for the other div do this:
margin-left: (whatever value you gave as the width on the float);
or if your floated div is on the right you don't need to specify a margin for the left div.
but whatever route you take you must remember this or the sky will fall on your head...
clear your floats
like this: add this underneath both floats <br style="clear:both;" />
and that should wrap it up.
so right beneath, float: clear;
I write <br style="clear:both;" /> ?
Or did you mean in the html page? do you have a page where I can see as an example? Also, what exactly does "clearing your floats" do? Thanks!
P.S. couldn't you do this in the css page and just say
<style type="text/css">
br { clear:both; }
</style>
Tue, 2005-05-24 21:35
#11
Dual Column Layout problem
Westboarder wrote:
P.S. couldn't you do this in the css page and just say
<style type="text/css">
br { clear:both; }
</style>Seems like a great idea to me. 
Wed, 2005-05-25 22:04
#12
Dual Column Layout problem
Ok, for some reason the layout falls apart in mozilla and not in IE.
Thu, 2005-05-26 08:31
#13
Dual Column Layout problem
ID and class names are case sensitive. #Header ≠ #header.
cheers,
gary
Thu, 2005-05-26 10:04
#14
Dual Column Layout problem
Also, consider compressing your topimage - it weighs in at just under a megabyte.
Ideally, get it compressed to around 50-100k.
Thu, 2005-05-26 18:40
#15
Dual Column Layout problem
Thanks guys. I made the changes to the case, but it still falls apart in Mozilla. For Some reason the right column won't float right and stay inside it's div.
Fri, 2005-05-27 00:30
#16
Dual Column Layout problem
any ideas?
Fri, 2005-05-27 02:55
#17
Dual Column Layout problem
Why the #rightcolumn {clear: both;}? That wasn't there before. Lose it.
Edit #header and br as follows;
#header {
width: 577px;
margin-left: 95px;
border: 2px solid #7F42F8;
margin-top: 70px;
}
br {}And add this bit toward the bottom of the style sheet;
/*** see http://www.positioniseverything.net/easyclearing.html
for explanation of Tony Aslett's elegant hack ***/
.clearing:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearing {
display: inline-block;
}
/* hides from IE/Mac \*/
* html .clearing {
height: 1%;
}
.clearing {
display: block;
}
/* end hide from IE-Mac */
/*** end clearing hack ***/ And, edit the following line of code
<div id="header"> to read <div id="header" class="clearing">It's not nice to use <br>s to create blank lines. The <p> is the proper tag for um, paragraphs.
That should do it.
cheers,
gary
Tue, 2005-05-31 21:07
#18
Dual Column Layout problem
Thanks a lot Gary! I really owe you for that. 