View Full Version : CSS Positioning images with text beside them in a column format -help

27-05-2008, 01:20 PM
Ok Heres the problem (http://nigel.geek.nz/css-again.php)

In IE6 and IE7 the layout works (yeah I was shocked to), however in firefox 2 and Opera it doesn't

The coloured text should be next to the coloured image, eg blue text next to blue image, etc

But in FF, Opera, Safari, this isn't happening and i don't know why, I think it should work, but it doesn't seem to

27-05-2008, 02:15 PM
This is the appearance that you want? Attached file: achieve.JPG (http://www.imagef1.net.nz/files/achieve.JPG) (50 KB)

It looks kind of same on Firefox? Attached file: kindasame.JPG (http://www.imagef1.net.nz/files/kindasame.JPG) (71 KB)

27-05-2008, 02:43 PM
err no

I'm guessing you have a screen size greater than 1024?

Attached file: burgle-1.jpg (http://www.imagef1.net.nz/files/burgle-1.jpg) (35 KB)

heres what it looks like for me

But yes that is a problem i also have to fix

27-05-2008, 05:44 PM
If Bletch does not reply to this thread within the next 24 hours, I will take a look at your source code.

Ta. :)

27-05-2008, 05:51 PM
I would just say clearing in same way by briefly glancing at it, will check back later (currently at work).

27-05-2008, 08:48 PM
Hi there

A couple of issues here, the main one being that when you float a division without specifying a width, it will grow to accomodate the text it contains. So, you either need to add line breaks into those addresses, or specify a width for the map-text divisions.

Other issue is that the <div>s have ids instead of classes -- you should only have one element with a particular id in the whole HTML document.

Yet another thing is that you've (correctly!) put the clearing divs with a class ... but then used "#" in the CSS file; this should have a "." to denote a class rather than an ID.

Fixing these, I managed to get your layout working :)

27-05-2008, 08:49 PM
Ok I think i have fixed it, the original link now shows the corrected version

anyone with a larg monitor want to test it

The images should be aligned vertically with the relevant coloured text next to them

I would try on this monitor but I think 1024 by 768 is as high as it supports

edit yep thats as high as this monitor goes

27-05-2008, 09:25 PM
Thanks Dave

A lot of the CSS in the file is not mine, I am trying to fix a page on a site thats not laying out correctly and i am not allowed to change their CSS definitions (as most of the site works), however i am allowed to write my own CSS

The css ones on the layout page are mine, I always get mixed up between classes and ids, I just don't get CSS, It's one of those things that my brain just doesn't grasp no matter how many times i read it

27-05-2008, 09:51 PM
Slight off: 1280 x 800: Attached file: slightoff.JPG (http://www.imagef1.net.nz/files/slightoff.JPG) (77 KB)

27-05-2008, 09:54 PM

OK, a bit of a primer then:

IDs are used to identify one element on a page, and one element alone. This is usually something like a banner, footer, sidebar, ... anything where there will only ever be one of them. To style the element, use the "#" notation in your CSS file.
Classes are used when there'll be more than one element you want styled the same way. This time, use the "." notation in the CSS file

Not being able to change the other CSS file's not a biggie, as you can redefine any CSS rule on your page by putting your CSS definitions in a separate CSS file, and putting the link to your CSS as the last one in your <head>. This will override any others that have been "pre-set".

As I said above, the main reasons for the layout not working originally was that (a) the "#" notation was used for the clearing div style in the CSS instead of a ".", and (b) the width of floating divs will grow to accomodate the text (and thus float down below other elements) if you don't set it and/or manually limit the line length with <br>s.

28-05-2008, 10:08 AM
Not very helpful but my two cents (http://nz.neopages.org/help/nigel-css/).

28-05-2008, 12:07 PM
Thanks everyone,

Dave I have in the past redefined the rules the way you mentioned, and will probably do so again

In the actual page I am not using the clears, I have replaced them with breaks as for some weird reason the first clear creates a huge amount of whitespace

Sal, I'll save your page, as it has actually given me a few ideas for hopefully cleaning some code elsewhere, the images are not supposed to be a single colour (they are actually maps, I just added the colours as I thought it would make it easier for people to understand the layout), thats a very cunning way of doing things though, I had to disable each element in turn (in firebug) to see exactly how it all worked together

01-07-2008, 11:48 AM
Thanks everyone,

In the actual page I am not using the clears, I have replaced them with breaks as for some weird reason the first clear creates a huge amount of whitespace

Ok I'm back the actual page is not laying out correctly on monitors with a greater resolution than 1024 x 768, (however the test page does)
So I have re-added the clears however the first clear causes about a 100px gap between the two paragraphs, and i am stumped as to why

any ideas?

01-07-2008, 12:15 PM
Can you provide a link to the current version of the page, so I can investigate the source?

01-07-2008, 12:49 PM
Ok I am 99% sure i know what the problem is

on the actual page there is a sidebar which is floated this runs to near the bottom of the page,

when i do a "clear: both" it clears all floats down to the bottom of the sidebar and the next floated section appears after this

what i want to do is apply the clear only to the floats within the content section, is this possible

I have updated the test page and it now shows the error


Hi Bletch, I missed your answer as i have been half way through a new post for the last 20 mins (I keep having not so brilliant ideas)

01-07-2008, 01:56 PM
I should also add I can't touch any of the layout css above the level of the content section, (so i can't make the content section float)

I am seriously starting to think tables and text flow might be the best option

01-07-2008, 02:10 PM
Can you provide a link to the actual page please? All your test pages seem to work perfectly, and I can't reproduce the problem. The test pages also don't contain the real page structure.

Why can't you make the content section float? There is nothing stopping you adding an overriding rule to make the content section float anyway, regardless of the css above it.

On a related note, why would you even want to float the content section? If I understand your description correctly it's the navbar that needs to float, in order to allow the content section to sit next to it.

Edit: Note also that this is tabular data - there is no reason why you shouldn't use a table to display it, and to be honest it would make the page a fair bit simpler in this case.

01-07-2008, 02:31 PM
Take a look at this (http://osiris.erayd.net/pressf1/bletch/nigel-test1.html) - is that the kind of thing you're after? The layout is done entirely with css - no tables were harmed in the making thereof :rolleyes:.

Note that I've only tested it in Opera 9.5 and FF IE should be happy with it, but note that there is some weird (hopefully non-visible) behavior involved in the way IE will process the page.

01-07-2008, 02:52 PM
Thanks Bletch

I think i may have it working using a different technique (actually i got this an hour or two ago, but was uploading the css file to the wrong server and wondering why the heck nothing was changing, on the testing page)


Bugger it doesn't like IE

01-07-2008, 03:03 PM
Bugger it doesn't like IECan you describe the problem, or take a screenshot? I don't have a copy of IE handy to test with. Also, which version[s] are you testing with?

01-07-2008, 03:20 PM
with both ie6 & ie7

The content section begins below the level of the sidebar


The image may give you a Forbidden error, just press refresh and it should appear

Anyway I've got to go grab kids so I probably won't be able to answer any more questions till after 5-ish (just so no-one thinks I'm ignoring them)