CODEWITHSUNDEEP
htmlcss
kwichz
kwichz

Reputation: 2453

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

And how can I fix this trouble?

Upvotes: 0

Views: 5796

Answers (4)

Grooveek
Grooveek

Reputation: 10094

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

float:left should stick them together

Upvotes: 1

Caleb Irie
Caleb Irie

Reputation: 358

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.

Upvotes: 1

Karl Nicoll
Karl Nicoll

Reputation: 16429

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.

Upvotes: 3

kei
kei

Reputation: 20511

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

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

Upvotes: 3

Related Questions