Nabin Nepal (Starx) css css-float flowlayout
December 31, 2011

How to use the float:left property in CSS without having the trouble I have?

Question by Prateek

PrateekPrateek

i’m trying to create a flow layout and i’m having some trouble using float:left property in css.

I have one parent container which has 100% width and 100% height. It contains three containers:
The header, the menu container, and the content container.
The menu is a vertical menu,not a horizontal menu. It comes below the header and then the content container floats left on the menu container.
Now the problem is i want to make it flowlayout. When i reduce the resolution,the floating content container comes below the menu container. I want the content to float with a flowlayout without coming below the menu container.Please provide a solution to this.
Thanks!

Here is the link to the code.

http://jsfiddle.net/VdE7Y/

Answer by Scott

ScottScott

Remove the width and float from the #content css.

Set the background color of #wrapper to be whatever color you want the background of #content to be.

add display: inline-block; to the #content css.

Updated fiddle —-> HERE

Answer by Starx

StarxStarx

The problem is the min-width you have for #menu-cont

The layout you are trying to have is very hard to maintain.

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!