471,598 Members | 1,378 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,598 software developers and data experts.

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

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

Oct 3 '07 #1
4 1407
On 3 Oct, 10:54, cosmo_canuck <adamabr...@shaw.cawrote:
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)

Oct 3 '07 #2
On Oct 3, 3:17 am, Andy Dingley <ding...@codesmiths.comwrote:
On 3 Oct, 10:54, cosmo_canuck <adamabr...@shaw.cawrote:
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)

Oct 3 '07 #3
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

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

Oct 4 '07 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

50 posts views Thread by dataangel | last post: by
8 posts views Thread by Madhusudan Singh | last post: by
6 posts views Thread by sbalko | last post: by
7 posts views Thread by Anton81 | last post: by
6 posts views Thread by godavemon | last post: by
12 posts views Thread by mast2as | last post: by
23 posts views Thread by Arnaud Delobelle | last post: by
1 post views Thread by donpro | last post: by
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.