• Registered: 2006-05-21
  • Posts: 2

Topic: Floating DIV and the CLEAR property.

Hello,

I have a two column website, the left column has a vertical menu and the right column has the main content. I have integrated PunBB into the site's layout so that the forum occupies the right column while my navigation menu, etc., occupies the left column. Everything looks fine, except that after a person logs in to the forums there suddenly appears a large gap of space inside the top box of the forums (just under the forum name and description).

I believe this is a CSS issue so I hope someone familiar with CSS can help me out here.

The left DIV that contains my navigation menu has the following style:
float: left;

In the right DIV, where the forums are displayed, there is a CSS class called .clearer which has the following style:
clear: both;

I believe this is what is causing the problem, the 'clear' property is causing this large gap because it doesn't allow floating elements on either side. The problem is that this *has* to be there for the forum layout to work, otherwise the layout looks like it just fell off a 30 story building.

Anyway, has anyone else dealt with this issue? Thanks in advance for any help.

2 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Floating DIV and the CLEAR property.

http://punbb.org/forums/viewtopic.php?id=7781
Read the whole thread, the solution starts about half way down. As an alternative, you could source order your site and then use a negative margin layout.

  • Registered: 2006-05-21
  • Posts: 2

Re: Floating DIV and the CLEAR property.

Thank you, perfect.