Why div are not side by side?

Check it out my actual code

Why the divs with text Links and Content are not side by side? With normal flux it should be. Again, the margin top is not take in consi开发者_Python百科deration.

And how can I fix this trouble?

Easy Fix, change your CSS to this:

.container { width: 910px; margin-left: auto; margin-right: auto; }

.head { padding:40px; }

.content { background-color:#3C2B1B; overflow:auto; }
.menu1 { float:left; width:200px; background-color:#E2DED2; margin:10px; padding-top:50px;}
.menu2 { float:left; width:270px; background-color:#E2DED2; margin:10px;}

.foot { padding:40px; }

Fiddle: http://jsfiddle.net/SaxNy/1/

Both .menu1 and .menu2 now use float:left; to make them sit side by side, and I've set overflow:auto on the content to make it wrap around the floated elements. "Block" style elements (such as Divs) cannot sit next to each other, but they will if you make them float.

http://jsfiddle.net/ZVMYd/5/

The key point is the float:left on the inside divs and a clear:both div after that.

You can move them side by side by floating them, like so.

http://jsfiddle.net/ZVMYd/

Be sure to float .content as well, or it will collapse (because when you float something, it moves out of the flow of content.

err because they are div's so they have a display:block on them

float:left should stick them together