18 replies [Last post]
Westboarder
Offline
Regular
Last seen: 15 years 11 weeks ago
Joined: 2005-05-23
Posts: 36
Points: 0

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

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 7 years 13 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

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 />

Westboarder
Offline
Regular
Last seen: 15 years 11 weeks ago
Joined: 2005-05-23
Posts: 36
Points: 0

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.

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 7 years 13 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

Dual Column Layout problem

Try floating the right column right aswell as the left column left.

Westboarder
Offline
Regular
Last seen: 15 years 11 weeks ago
Joined: 2005-05-23
Posts: 36
Points: 0

Dual Column Layout problem

When I try that the left column stays intact, but the right column still floats underneath the border.

vynsane
vynsane's picture
Offline
Regular
Last seen: 13 years 39 weeks ago
Joined: 2005-05-15
Posts: 45
Points: 0

Dual Column Layout problem

you're still missing your <html> <head> and <body> tags. add those, then validate it at

http://validator.w3.org/

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.

The technology is three months old. Only suckers buy out of date machines. You're not a sucker, are you sir? Because if you were I'd have to ask you to leave the store.

www.vynsane.com

Westboarder
Offline
Regular
Last seen: 15 years 11 weeks ago
Joined: 2005-05-23
Posts: 36
Points: 0

Dual Column Layout problem

To clarify, I am making these changes locally.

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 7 years 13 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

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.

vynsane
vynsane's picture
Offline
Regular
Last seen: 13 years 39 weeks ago
Joined: 2005-05-15
Posts: 45
Points: 0

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...

The technology is three months old. Only suckers buy out of date machines. You're not a sucker, are you sir? Because if you were I'd have to ask you to leave the store.

www.vynsane.com

cherryblossomtree
Offline
newbie
Last seen: 16 years 27 weeks ago
Joined: 2005-05-21
Posts: 5
Points: 0

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.

Westboarder
Offline
Regular
Last seen: 15 years 11 weeks ago
Joined: 2005-05-23
Posts: 36
Points: 0

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>

Anonymous
Anonymous's picture
Guru

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. Smile

Westboarder
Offline
Regular
Last seen: 15 years 11 weeks ago
Joined: 2005-05-23
Posts: 36
Points: 0

Dual Column Layout problem

Ok, for some reason the layout falls apart in mozilla and not in IE.

aapc.com/localchapternewsletter.html

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 38 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Dual Column Layout problem

ID and class names are case sensitive. #Header ≠ #header.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 9 weeks 1 day ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

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.

Verschwindende wrote:
  • CSS doesn't make pies

Westboarder
Offline
Regular
Last seen: 15 years 11 weeks ago
Joined: 2005-05-23
Posts: 36
Points: 0

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.

Westboarder
Offline
Regular
Last seen: 15 years 11 weeks ago
Joined: 2005-05-23
Posts: 36
Points: 0

Dual Column Layout problem

any ideas?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 38 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Westboarder
Offline
Regular
Last seen: 15 years 11 weeks ago
Joined: 2005-05-23
Posts: 36
Points: 0

Dual Column Layout problem

Thanks a lot Gary! I really owe you for that. Laughing out loud