• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

CSS question about mispositioning of floated elements of webpage


Senior Member
hi all,

I am having a problem on a site im working on where contents of the right side of the page (floated left) move over to the left hand side, when the left hand side's height is not long enough to 'push' the contents of the right column into their correct place (in the right column)

You can see this here:
Getronics UK - Knowledge Share - Video Library
Please look at this correspdoning screenshot where I've highlighted the mispositioned part:

When the content of .column3 .firstcol on that page 'naturally' makes .column3 height big enough to keep those right boxes pushed to the right, all looks ok as in this screenshot:

But when I start adding new boxes to the right or reduce content on the left, I get this mispositioning problem (see first screenshot and Getronics UK - Knowledge Share - Video Library as above.)

For now I have sorted this in a very hacky way by just adding a fixed height to .column3 (1200px in this case) with inline css:

<div style="height: 1200px;" class="column3 firstcol">     <h2>Video Library</h2>     <p>View video case studies on the services we provide to our clien....

you can see this here:
Getronics UK - Knowledge Share - Video Library
And in this screenshot:

Can anyone tell me how to ensure those boxes stay on the right without having to assign a height to .column3 every time??