Reply To: two column layout problem

[paulob]

Hi,

You will rarely use position:relative to move elements structurally as it doesn’t really move the element at all. It just makes the element appear somewhere else but it always preserves the space it previously occupied. That means that all elements on the page react as though the relative element hadn’t been moved at all.

You just need to use margin-left:211px on your section element and not left:211px (also note that globally setting rules for your section element is not a good idea either as that means you can never use another section element without undoing all the styles you have applied. Add a class to the section element and use the class to style it.)

Generally it is not a good idea to use absolute columns either because that means you must forever control the height. Floating the column would be better and then regaining the flow after the float by containing and clearing.

In your case you have triggered a vertical scrollbar so you will probably be ok as you are controlling the height. However scrollbars on inner elements are usually undesirable and its better to let content dictate the height and not fix it in px. Of course there are always exceptions depending on the design.