Resulted to tables in frustration (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

GolfMad -> Resulted to tables in frustration (4/1/2008 6:10:44)

I hate to admit this but I tried for a long time with various css for 3 float left and 1 float right, div width size, inline or inline-block, clear both after...... but I could not get the 4 pictures to butt up to one another and fill exactly a wrap container of 760 pixels.

So I have put my table version (just the header part on a page, the wrap also contains menu and content divs) up on the link below and wonder if anyone would be kind enough to show me the css code that will do the same darn thing as my table code did in under a minute!- I am determined to learn this but after many hours and Googling css related to it have given up in frustration.

Thanks to anyone willing to help:

http://sitesoon.co.uk/test/header-pictures.htm

Regards
Phil



Tailslide -> RE: Resulted to tables in frustration (4/1/2008 6:47:21)

was THIS what you were after?

The only problem being that 195px x 4 = 780px so obviously you'll either have to widen the div (which is what I did) or re-size the images.

If you want a border around it then you'll need to allow more space for that (if it's a 1px wide border then you'll need an extra 2px width of the div).

edit: forgot to add the Tan Hack for IE5.5 and under if you care about them - now added.



GolfMad -> RE: Resulted to tables in frustration (4/1/2008 7:36:46)

Tailslide - I cannot thank you enough - it was 'doing my head in' and I would never have got the wrap img tag in all I was trying to do.

Sorry about the typo is should have been 780px as you say and not 760 px.

Is is just so darn difficult to master all this ccs layout stuff. Just when you think you have a reasonably grip of it some other positioning problem bites you - well me not you I mean!

Thanks again for your time and trouble.

Regards
Phil



Tailslide -> RE: Resulted to tables in frustration (4/1/2008 7:45:24)

It's no problem Phil - don't drive yourself mad next time - if you can't figure it out in a couple of hours then try asking in here.

The biggest problem is figuring out what the problem is. Once you can properly describe the problem (e.g. IE5.5 adding space on floated images - which it was here) then you can google more effectively. Otherwise there's just too much stuff out there! If you think you've run into a bug then this site: http://www.positioniseverything.net/ is a great place to look for solutions.




Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125