2 replies [Last post]
bouncelot
Offline
newbie
Last seen: 14 years 1 week ago
Joined: 2006-10-14
Posts: 2
Points: 0

I've been playing around with switching my website from a table-based layout to a css layout, and I've run into a problem with internet explorer. Basically, I want my homepage to have a three-column layout (which I've done, and works), but I want to be able to split some of the text within my centre column into two columns - so there's some introductory text, then two sub-columns, then go back to the full centre column.

link to image of how it's supposet to look

I've tried various modifications of float styling to create the sub-columns, but IE renders none of them correctly. Either one sub-column drops below the other, or they render at completely the wrong width.

The page I'm using to experiment with can be found here.

The relevant css file can be found here.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Don't use position absolute.

Don't use position absolute. Always work in pairs of columns, float one left and the other right[*]. Then if necessary break do the same within one or both of those columns.

e.g.

/* css */
#left, #centre, #inner_left { float: left; }
#outer, #right, #inner_right { float: right; }

Give each pair a width to add up to almost the width of their parent container.

You can keep nesting floated pairs as deep as you want and have any number of columns.

[*] Its not absolutely necessary, but it is easier to work in pairs. You can do three columns at the same level by floating them all left, or two left and one right. You need to be careful of some browser bugs in doing so - IE 3px jog, IE double margin bug.

bouncelot
Offline
newbie
Last seen: 14 years 1 week ago
Joined: 2006-10-14
Posts: 2
Points: 0

That worked. Thanks. I guess

That worked. Thanks. I guess I was looking so much at the bit that wasn't displaying correctly that I didn't think it might be the rest of the page that made IE get it wrong.