CSS float help

[Ben Hazelwood]

Hello,

I am working on a webpage, and am having trouble with the alignment
when using CSS. This is my first CSS site, so I have no experience
with this.

Here is the link:

http://www.bellglass.ca

Here is the link to the stylesheeet:

http://www.bellglass.ca/StyleSheets/main.css

I'm sure there are many things wrong, but one thing in particular is
giving me trouble. I have the main top bar with the logo etc., then
the "apartments" picture, and then 3 columns, with titles, and texts.
These columns are fine on my computer, but are not aligned perfectly
(ie, the last column heading wraps around to the bottom) when viewed
on another computer. I have a float:left; in the declaration of the
stylesheet, and when i remove this, it does the same thing, so it
might be the source of the problem, I'm not sure.

If anyone has any comments, or ideas on how i can fix this, it would
be much appreciated.

Thanks,
Ben

[kchayka]

Ben Hazelwood wrote:

This is my first CSS site
http://www.bellglass.ca
http://www.bellglass.ca/StyleSheets/main.css

I'm sure there are many things wrong,
These columns are fine on my computer, but are not aligned perfectly

Yes, indeed, there are many things wrong, but I think the positioning of
the floated columns should be the least of your worries.

What you have here is div-soup. There is virtually no semantic or
structural markup - not a single heading, paragraph or list, just a
bunch of divs and spans. It degrades poorly in many browsing environments.

The HTML also appears to be organized by how you want it rendered in a
graphical browser, not necessarily by how the content logically goes
together. For example, what looks like heading elements for the floated
boxes are completely disassociated from their content. It can make less
than perfect sense when the page is viewed sans stylesheets.

As for the CSS itself, you are relying on IE's broken box model and
other bad behaviors to get the desired effect. This doesn't work in
non-iE browsers, nor in IE6 if you happen to trigger standards mode.

Other aspects of the design don't work so well, either.
- Fixed width: doesn't adjust to the myriad of browser window or canvas
sizes used by your visitors.
- Absolute font-sizes: not resizable by default in IE nor do they adjust
to the visitor's browsing environment, which may be quite different from
your own.
- Low contrasting text and background colors: rather hard to read on
screen, especially at your specified small text size.
- Stylized scrollbars: can cause usability problems for your visitors.
- Invalid code: may render unpredictably. The duplicated "id" values
within a page caught my eye right away, but running the code through a
validator should point out all the errors.

I suggest you start over using semantic, structured markup, resorting to
generic div and span elements only when nothing else is more suitable.
See also
<URL:http://www.htmlhelp.com/reference/html40/olist.html>
<URL:http://www.allmyfaqs.com/faq.pl?AnySizeDesign>
<URL:http://www.allmyfaqs.com/faq.pl?Tableless_layouts>
<URL:http://www.htmlhelp.com/tools/>

HTH & HAND

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.