Why does my DIV sometimes appear below another and sometimes not, seemingly randomly?

Hey there... I have a problem.

On my site's blog (http://www.orangeacid.net/blog, powered by wordpress), I have a problem with the layout.

I have opted for the xHTML/CSS/DIV method as opposed to just HTML and tables, and now, after a quick under-the-hood redesign of my site, sometimes the navigation DIV (on the right) chooses to display itself with the right alignment but directly under my content DIV (on the left).

This only happens on my blog page and only most of the time - after a few refreshes sometimes it works out fine. My structural stylesheet is at http://www.orangeacid.net/stylesheets/structure.css, and there is another one for blog based elements at http://www.orangeacid.net/stylesheets/blog.css, although the blog one is a little empty.

I have tried resizing the navigation DIV to unrealistically narrow widths and it still sometimes happens, so I'm not so sure about it just being that sometimes one of the DIVs is too wide.

I would really, really appriciate some help with this as it is driving me insane.

Thanks,

Dan Foy
orangeacid.net

I can't replicate the problem.

Hmm I have a more annoying bug. The permalinks on the blog homepage all look like they should (i.e. no underlines), but the ones on the permalinks don't, even though they use the same class. Hmm...

Can anyone help me out?

Its like you expect us to know what your permalinks are. Can you be more specific please?

Lol the permalink thing seems to have solved itself. I still have a problem with the divs repositioning seemingly randomly though... any help from anyone would be appriciated...

I had the same problem as this with a few sites that I developed. Never could find anyone who could help.

However, after HOURS of trying various things, i found that the answer was...

<div id="container">
<div id="rightcolumn"></div>
<div id="leftcolumn"></div>
</div>


with the following css


#container{
width: 100%;
height: auto;
}

#rightcolumn{
width: 200px; //or whatever width you need
height: auto;
float: right;
clear: none;
}

#leftcolumn{
width: 450px; //or whatever width you need
height: auto;
float: left;
clear: none;
}

Wow, cheers, you're a lifesaver!

The clear thing does make sense, I'll try it out now. I hav jus realised that its only a IE bug, which is annoying...

Yep, that seems to have done the trick. Add 10 points to your 'I'm really cool and helpful-o-meter' :thumbsup:

Oh, no, it hasn't :p

Any other ideas? Please, I'm getting desperate...

I have deduced that it only affects php pages. The nav bit is a php include if that helps.

#sidenavcontainer {
width: 185px;
height: auto;
margin: 0px;
padding: 0px 0px 20px 0px;
background-color: #efefef;
position: relative;
float: right;
top: 0px;
right: 0px;
text-align: left;
overflow: hidden;
clear: none;
}

I'd get rid of "position: relative; top: 0px; right: 0px;" if I were you, with the float: right, there is no need for them. I don't know what to suggest other than that really i'm afraid. Drop me an email if you ever get it sorted, i'd be interested how it turns out (simon [at] snetty [dot] com).

I removed the float and the site rendered properly sometimes, and other times it apeared underneath but on the left. Kinda like as if it hadn't got enough space.

I am beginning to think more and more that perhaps this is a php-related error. Perhaps before an element has fully loaded PHP tells firefox that the link is the full length of the php code, before changing it? Lag could be responsible for why the page displays correctly sometimes and sometimes not...

Anyone have any ideas how I might get around this then?

Cheers in advance... if you can help...

Yeah, it seems to be a php problem... cause the page laid out the same using SSI is fine... but I need php on those pages and you can't parse php with apache and expect it to work properly.

Or can you?