CODEWITHSUNDEEP
css
Norse
Norse

Reputation: 5757

CSS Border does not wrap around floated items

I am trying to create a two column layout. Left column is the nav menu, right column is content.

The problem is, the border wrapping all of the content wraps only the right column content, while the left column nav menu visually runs off of the div border.

JSfiddle: http://jsfiddle.net/ekeWz/

Is it possible to get around this?

Upvotes: 1

Views: 1958

Answers (3)

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Hey now give to the #wrapper overflow:hidden; in your css as like this 

#wrapper {
overflow:hidden;}

Live demo

Upvotes: 6

Mutu Yolbulan
Mutu Yolbulan

Reputation: 1052

I think this is what you want:

#wrapper {
    width: 600px;
    float: left;
    border: 1px solid black;}
#left_menu {
    float: left;
    border-right: 1px solid blue;}
    width: 25%;}

once you break the flow of the div with the float left in the left_menu, you have to adjust the flow of the parent div with the same float.

Upvotes: 0

Shailender Arora
Shailender Arora

Reputation: 7778

You can get your desired result through give the overflow:hidden; to your parent div or #wrapper div

http://jsfiddle.net/ekeWz/6/

Upvotes: 1

Related Questions