March 12, 2012

Aligning these three containers evenly

Question by Evan

I would like this layout to look as follows:

__________________________
|  |                      |
|  ------------------------
|__|______________________|

That is how I want the header to look. However, as you can see at the below link, the two div’s on the right side are dropping off:
http://jsfiddle.net/A5YDJ/3/

Any ideas?

Answer by Filype

You forgot to add float:left to the #left-box

#left-box{
 width:190px;
 height:90px;
 background-color:blue; 
 float:left;
}

Have a look at this: http://jsfiddle.net/puCrJ/

Answer by Starx

Use

float:left;

Check you updated fiddle here

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!