By demon326@drupal.org on

Hello everybody, i just made my own drupal layout but i'm having some troubles with it.., see the screen below for the problem:

http://img170.imageshack.us/img170/3890/prob2lw5.jpg

like you can see the content is being pushed downwards when i create a node...

i hope that somebody can help

⋅ Categories: Drupal 5.x

Comments

Szklana’s picture

Szklana commented

read about css`s floats, positions etc :S

demon326@drupal.org’s picture

demon326@drupal.org commented

i already know that stuff, but i want to know what dive causes this problem...

Hueij’s picture

Hueij commented

With just an image to go by it's hard to say but I think Szklana is right. You should read up on floats...

From what I see you have your right sidebar and content in a container with a fixed width and that the sidebar has a left float. The total width of the sidebar plus the the content is greater than the width of the containet, thereby pushing the content down.

www.opstijgendenevel.nl

eric-t-cruiser’s picture

eric-t-cruiser commented

Hi there.

I've had this issue a number of times with sites I've worked on that use floats to structure the columns.

There are two possible causes (without seeing the HTML source):

  1. (the most likely) the central <div> is a fraction too wide to be accommodated between the left and right <div>
    or
  2. the central div has a CSS style of clear:both; clear:left; or clear:right; assigned to it and that would cause it to be pushed down.

A solution we use (but isn't always ideal) is to set the margin left and right for the central <div> at a bit more than the left and right sidebars but NOT float the central <div>. This causes the central content to be constrained by the margins and allows the left and right columns to fit within the margins of the central div.

This solution will work if the cause is the div not fitting but won't fix the issue if you've got a clear set for the central div.
Also in IE if any of the central <div>'s children have a width set to 100% it may also cause the whole div to drop below the left or right column