IE7 problems aligning wrap

Why are you positioning things 'Absolute' don't! Describe your wrap parent and auto centre, describe your parent div for the three graphics with a width to suit graphics and then margin auto it to centre.

Thanks Hugo.

Could you please suggest the code I need to use to do this?

The graphics are 3 main blocks + 2 slim strips as dividers.

Many thanks
p

Simply remove positioning, you shouldn't need to be using the position property for the layout you have. You are working to set widths anyway so simply employ those widths and margins, add up the three images and their dividers total width and use that to set the width of the parent to those three images then use auto margins to centre it horizontally in it's parent.

In fact can we call a halt to proceedings please. We ask that people validate markup before posting for a reason. Please validate and clear up your markup errors.

IDs may only be used once amongst other issues #space has to be changed to a class.

However I strongly suggest that you get rid of those empty elements you are using, why do you need to use them? what is wrong with the correct approach to spacing which is using margins? you certainly do not need to replicate the background as a graphic for #space.

You should do something like describe a class called 'box' this holds all your rules required for all the three graphics i.e all properties that are shared, then to create the space between them simply set margins on the centre image box using it's ID, the background should then show through.

Thanks Hugo.

The background in #space is necessary because the red stripe at the bottom of the 3 blocks is not a whole object, but it's embed in the 3 block images. This makes necessary to have 2x 9px wide bits of graphic to show the red stripe between the 3 blocks.

Does it make sense?

Do you have by any chances a similar piece of script where I can actually see in practice what you're talking about?

p

You are overcomplicating the layout for no real reason.

(Not sure whether the red border is meant to flow full width uninterrupted or per box as layout has changed?)

You need a new div that holds the three graphics it's this that has the width calculated from the sum of the three images and whatever margins are used. To this new div you add a border-bottom:6px solid red; or if border is per box with a space between then add the border to the bottom of the .bistro, .events {} etc