CODEWITHSUNDEEP
csshtml
RobinLovelace
RobinLovelace

Reputation: 4987

Prevent dividing box overflow

I have tried all the solutions I can find to this problem, but the damn thing keeps overflowing. To be specific, when I add anything more than an extra word to the "Watch the space" text to the right here http://robinlovelace.net/ , it disappears from where it should be an moves to the bottom of the page, below the 'comments' link.

I've tried adding overflow: auto; and word-wrap: break-word; in the CSS #home_right area, (as recommended here) but this fails also. It's such a simple problem I think I must be missing something that may be of use to others.

Upvotes: 1

Views: 52

Answers (3)

Josh Crozier
Josh Crozier

Reputation: 240938

You need to set a width on it.. try the following:

#home_right {
    width: 220px;
}

This is what it currently is:

#home_right {
    overflow: auto width: 10 em; /* Syntax is incorrect, you forgot the ; */
}

In this case, there is actually no need for overflow.. all you needed was a width!

enter image description here

Upvotes: 1

Jakub Kotrs
Jakub Kotrs

Reputation: 6229

What you have:

overflow: auto width: 10 em;

What you should have:

overflow: auto;
width: 10em;

Spaces and semi-colons, be careful!

Upvotes: 1

George Yates
George Yates

Reputation: 1247

This is because the div is floated and when you add content to it the width is extended by the text and becomes larger than the available area and so it floats to the nearest available space. To prevent the text from widening the div, you need to set a width on the sidebar. Using firebug I figured out that in your case you need to add this in your CSS for #home_right:

width: 224px;

Upvotes: 1

Related Questions