Div layout - argh!

[semantics]

Dear all,

Been struggling with this problem for days...the problem page is http://www.green-england.co.uk/site/tips - i've got two 'float left' divs on the left, and the rest are float right...unfortunately, the top float right div 'green england tips' keeps lining up with the second ('tips') div rather than the first ('at work') div. I've tried swapping round the order of the divs, but that results in this: http://www.green-england.co.uk/site/tips2

I'm going mad trying to sort this out....any suggestions!?

Rob

[Lchad]

First thing to do is delete the clearing div here

Code: Select all

<li class="menuitem"><a href="/tips/At_Work">At Work</a></li></ul>
</div>
    <div class="clear"></div>    
        <div id="leftbarnews">
            <h4 class="newstitle"><a href="/site/tips"
class="newstitlelnk">How to be Green Tips</a></h4>

That is pushing the Green box tips down.

I would make that a two column layout. Everything you want on the left goes in ONE div. Don't try to stack the div's. Use one div as your column left and then nest all the div's inside it.
Then have one right column div and nest things inside that.

That will solve your issue.

[semantics]

Lchad, thanks so much for your very quick response. I've got rid of the div clear but now it's more messed up (http://www.green-england.co.uk/site/tips) - I will try creating a single div for the left hand column (there already is one for the right). Should that div just be a #leftcolumn float:left; ?

Thanks again,

Rob

[Lchad]

Yes use that left div and float it left. Then the big right column can also be floated left.
Just space them with margins.

If you need more help, let me know, I'll have time later to make a mock up.

[semantics]

No need - what you suggested worked perfectly! Thanks Lchad, you're a star.

Rob

[Lchad]

You're welcome

[ifizzypop]

hey i cant really help you sorry, im really crap at HTML you could say i know nothin about it, i just wanted to ask ya for the code you used in your site but ownly the part you used for navigation that says At Work Recycling At home Take Action
and how you made the links contorl your iframe. as i said before im really new to html so sorry if you dont understand