Safari not aligning left and right columns

[Tickle]

Hi,

I'm having trouble with Safari showing the right column directly under the left column rather than side by side.

I've searched all over for a solution to this. If anyone has an easy answer it would be most appreciated.

As you know, the basic contemporary layout has a left nav column and a larger right column side by side using CSS float left & float right respectively.

It looks fine in IE 6, 7 and Firefox but it seems that Safari has a problem with float. I've seen mention of this on the internet but no solutions so far other than back to tables.

Has anyone else had this problem?

Cheers

John

[leehack]

My first reaction is why float it to the right? I often see problems with this approach. Give the left area the space it needs and just float the main column left also, it will just nest against the left column then.

If you ever get a part of your site wrapping underneath instead of sitting next to, it is 99.99% of the time due to one of two reasons.

1 - You have a clear style applied to it

2 - Most commonly the layout that is wrapping underneath is too wide to fit into the space left for it. The quick and easy test is to reduce the width of the wrapping part of the code OR increase the overall size.

Once you do this quick fix and confirm that it is a "space" issue, you can then take a look at the size problem you have.

If i gave you a 400px wide table and gave you an image of 100px wide and another of 302px wide and asked you to put them next to each other, you could never do it. This basic principle is the fundamental problem on 99.99% of errors of this sort.

[Tickle]

Hi Lee,

It's good to see I'm not alone at 4am.

The float right is the way Actinic have coded the CSS for this style. They've coded the left nav as a div float left and the right column as a div float right. These sit within a main body div which sets the overall width.

There's no clear associated with these - although other things in the CSS do have clear:both;

I've tried the test you suggested in narrowing the right column to 400 and everything inside it as well. It still sits under the left column. Also tried extending the overall size to 900 to no avail.

It's tricky to see what the problem is for Safari not being able to use the sort of extensions like DOM inspect in Firefox. I just found "webkit nightly builds" at http://nightly.webkit.org/ which actually has a DOM inspect for Safari. However it seems to use a modifed Safari as a seperate app. Frustratingly this actually displays the website perfectly as does Opera, Firefox and IE6, 7

[leehack]

I've tried the test you suggested in narrowing the right column to 400 and everything inside it as well. It still sits under the left column. Also tried extending the overall size to 900 to no avail.

If you try and narrow the column to 400px, but it contains an image that is 450px wide, it won't work.

Give the outer layout a 1200 size or something big, if it still fails then i'd suggest it's a styling issue.

[Tickle]

Yeah, I compressed everything down so it wouls all fit inside the boxes. I also tried expanding out to over 1200 as you suggested. I even ended up with nothing other than the two columns and a few characters in each with no images to narrow it down.

I've spent hours on the column sizes and also looking into whether "clear" was the culprit. Safari has many web comments about the stacking div sections and many solutions are as you've already explained. However, there also seems to be a specific issue around floats just for Safari.

I found something that now resolves the problem for me. It's probably not the best solution for Actinic in general as my CSS is very novice level but maybe the Devs can suggest a better way to do it.

I used <div id="container"> to replace
<div class="contemporary_body_content">

and <div id="left"> to replace <div class="contemporary_left_column">

and <div id="right"> to replace <div class="contemporary_right_column">

Having done that it now works perfectly for all the ones I've tried (IE 6 and 7, Safari 2, Opera 9, Firefox 2.)


Here's the code (with headings just to show where stuff goes for others like me):

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#container { border: 0px; }
#left { background: #ffffff; width: 145px; float: left; }
#right { background: #ffffff; width: 600px; float: right; }
</style>
</head>
<body>
<div id="container">
<div id="left">
LEFT COLUMN IMAGES & TEXT
</div>
<div id="right">
RIGHT COLUMN IMAGES & TEXT
</div>
</div>
</body>

[leehack]

Strange one, whats the styles included in the actinic css styles?

Must be some inheritance or global setting, can't think of anything else.

You can take your site to 770px wide btw and still be ok.