Can't get my floats in a row...

[cosmo_canuck]

Hi all!

I'm still learning the CSS ropes but am getting more ambitious by the
day, and more confident. However a seemingly simple problem has me
stumped. It concerns this page, from a site still in progress but
near completion.

http://adamabrams.com/spaprofits/media/02.html

And the CSS is here:

http://adamabrams.com/spaprofits/vok_07.css

On the page in question, I thought it would be a simple matter to have
the three elements - the menu, magazine cover and article text - line
up side by side. The text area is floated right, and I thought the
other two would just slide up alongside it.

Instead though, I've ended up (for the moment) having to give the
image a negative margin on the left and top to force it, kicking and
screaming, into place. It's a terribly kludgy and inflexible way to
achieve this, I know; I don't really want to do it this way... but
hey, it works for now, and I have to show it tomorrow!

I'm hoping someone can point out what I'm doing wrong - I'd like to
code this correctly... and I suspect it's something simple...

Many thanks,
adam

[Andy Dingley]

On 3 Oct, 10:54, cosmo_canuck <[e-mail]:

I'm still learning the CSS ropes

Read http://brainjar.com/css/positioning/ yet?

http://adamabrams.com/spaprofits/media/02.html

Markups all over the place. Get a validator, fix that before even
beginning to worry about CSS details. Trying to tweak invalid code is
a mug's game.

* Use a HTML 4.01 Strict doctype

* No XML-like markup <br />

* No IE conditional crud <!--[if IE 5]>

* If you're going to use a WYSIWYG, don't expect it to work perfectly
<meta name="generator" content="Adobe GoLive 6">

* Don't use media=screen (You don't need it)

* Don't put fake comments inside the CSS stylesheet. Why?

* Don't link to an index page when you can simply link to the
directory <a href="../projects/index.html">

* WTF are ’ and — ?

* Use <div class="bodyWrapper"rather than <div id="bodyWrapper">
(it makes CSS selection easier)

[cosmo_canuck]

On Oct 3, 3:17 am, Andy Dingley <[e-mail]:

On 3 Oct, 10:54, cosmo_canuck <[e-mail]:

I'm still learning the CSS ropes

Readhttp://brainjar.com/css/positioning/yet?

http://adamabrams.com/spaprofits/media/02.html

Markups all over the place. Get a validator, fix that before even
beginning to worry about CSS details. Trying to tweak invalid code is
a mug's game.

* Use a HTML 4.01 Strict doctype

* No XML-like markup <br />

* No IE conditional crud <!--[if IE 5]>

* If you're going to use a WYSIWYG, don't expect it to work perfectly
<meta name="generator" content="Adobe GoLive 6">

* Don't use media=screen (You don't need it)

* Don't put fake comments inside the CSS stylesheet. Why?

* Don't link to an index page when you can simply link to the
directory <a href="../projects/index.html">

* WTF are ’ and — ?

* Use <div class="bodyWrapper"rather than <div id="bodyWrapper">
(it makes CSS selection easier)

[cosmo_canuck]

Thanks for the reply Andy, and your thorough comments on the site.

Readhttp://brainjar.com/css/positioning/yet?

I will now! 8^)

* No XML-like markup <br />

I somehow got the notion that this was superior but can't recall
why... happy to ditch it.

* If you're going to use a WYSIWYG, don't expect it to work perfectly
<meta name="generator" content="Adobe GoLive 6">

Still using GoLive on this project just for its global find-and-
change, and uploading capabilities. As a WYSIWYG editor for CSS-based
layouts, though, it's useless. I'm just previewing in a browser to see
what things look like.

* Don't put fake comments inside the CSS stylesheet. Why?

Not sure what you mean, there's just some comments serving as headers
to keep my sections organized... and maybe one or two from a bit of
borrowed code... ?

* WTF are ’ and — ?

HTML code for the single quote mark, and the long dash, respectively.

* Use <div class="bodyWrapper"rather than <div id="bodyWrapper">
(it makes CSS selection easier)

Hmmm, how? I assumed that these "one use only" div's should be ID's
and that the code would be pretty similar either way... am I wrong?

Thanks again!
adam

[cosmo_canuck]

Thanks for pointing me in the right direction, and for the very clear
breakdown of float behaviour. My hope is restored!