PDA

View Full Version : How to Fix These Columns?


KingCreole
05-04-2008, 06:35 PM
Hello.

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.

domedia
05-04-2008, 07: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 {
float:left;
clear: left;
}

KingCreole
05-05-2008, 03: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!

KingCreole
05-05-2008, 08:18 PM
WhOOPs.

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?

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

KingCreole
05-05-2008, 09: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>

domedia
05-05-2008, 10:01 PM
ah yes, it's from your CSS:
basic.css (line 8 )
.float2 {
float:right;
width:200px;
}

KingCreole
05-06-2008, 02: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.

domedia
05-06-2008, 03: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.