View Full Version : How to Fix These Columns?

05-04-2008, 05:35 PM

I can't seem to get my columns right on this page: http://mattelmore.org/links_esl_resources.php

Could somebody please explain to me the basic concept of sorting the code so that I actually get two columns. No matter how I switch up the order, they get all jumbled up on me.

Also, they look different in Firefox and IE.

Thanks in advance.

05-04-2008, 06:27 PM
Your second 'float1' list is empty, nothing in it. Also add one CSS rule to your float1 to make it all work:

.float1 {
clear: left;

05-05-2008, 02:38 PM
Thanks, that seems to have done it. That and tweaking a couple of other details. Though, jperhaps it's just serendipity and when I add more, maybe I'll come up against the same problem.

I appreciate the help!

05-05-2008, 07:18 PM

The change worked for the columns. But now a photo has stretched itself sideways.

Check it out: http://mattelmore.org/esl.php

What do I need to tweak to make that right?

05-05-2008, 08:24 PM
Set the correct width and height for the picture. Looks like the width is supposed the be the height and vice versa

05-05-2008, 08:49 PM
It says 100 width X 120 height. Here's the code:

<div id="wrapper">
<div id="pagetitle">ESL Qualifications</div>
<div id="header"><h1><?php include("input/header.html"); ?></h1></div>
<div id="main">
<div id="content" class="details">

<img class="float2" src="images/cavalcada_blue100x120.gif" alt="Matt Elmore photograph" width="100" height="120" />

<h2>Matt Elmore, Teacher</h2>
<p align="center">(<a href="esl_castellano.php">Castellano</a>/<a href="esl.php">English</a>) </p>

05-05-2008, 09:01 PM
ah yes, it's from your CSS:
basic.css (line 8 )
.float2 {

05-06-2008, 01:39 PM
Okay, well, I changed the float2 width to 100px and that worked. But oddly enough, it didn't change the columns in the links page. So, everything appears to be copacetic. Thanks.

05-06-2008, 02:49 PM
Don't set the width at all. You're applying that style to an image, and it already has width/height attributes :) You're overriding it with CSS.
If you're applying this same CSS rule to other DIV's (not images), you should make 2 separate rules instead.