two column layout problem

[gmall]

Hello friends, i am trying to set up a two column layout with a static left column-menu and a right column fluid scrolable. Here is an example:

http://codepen.io/gmall/pen/cdItG

The layout looks good when viewing it in 900px + width browser, but if you try resize the browser and make it smaller the content breaks.

Any help would be appreciated

[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.

[gmall]

Hello paulob,

Thanx for the reply! margin-left solved the problem. I will use classes for styling section element etc this is just a draft.
I want the design to be exactly as viewed. I have tried to float the menu column but it scrolls with the content at the same time. I need the menu to be static in its position. Can you please give me a quick layout with floats?

Thanx

[gmall]

I forgot to mention that finally the layout will be full responsive

[paulob]

Hi,

If you want the menu to be static while you scroll the other column then you may as well use absolute positioning as you have done. Especially if you just have that small left column. (There would be issues if you didn’t control the height and the left column was taller than the right.)

I was assuming that it would be a normal page where everything scrolls.

You may still want to set the height in ems and not px so that if users zoom the text then everything grows together.

[gmall]

Ok mate thanx for your time and suggestions! cheers!

[Author]

Posts