CODEWITHSUNDEEP
htmlcss
shashwat
shashwat

Reputation: 8004

Why there is a never ending line (text does not place to next line when it exceeds its container's div width)

I can't get rid of this. I am using a wrapper to wrap content in a fixed width div. Here is my site. If length of text is too high then remaining text is not displaying in the next line as it should usually.

I am just novice in CSS. I have used overflow:hidden in header div just to remove some extra margin that could not be removed using margin: 0. I tried removing overflow property if it has anything to do but no luck.

I am using ddsmoothmenu from dynamic drive. I have also tried removing this but still nothing good.

Added Later

Another issue here is that If I zoom too much so that browser window falls shorter than width of the wrapper and scrolling horizontally seems like width of wrapper is decreasing too. Same behavior I do see in nuget.

Here is some of the CSS I have writted:

body {
    background-color: #EEEEEE;
    color: #333;
    font-size: .85em;
    font-family: "Open Sans";
    margin:0 0;
    font-family:'Segoe UI';
}

.wrapper, #main-menu {
    width:1000px;
    margin:0 auto;
}
#page {
    background-color:white;
}

#main {
    min-height:200px;
}
#header {
    height: 80px;
    overflow:hidden;
    background: #80b8dd;
    font-weight:bold;
    color:white;
    background: -moz-linear-gradient(top, #80b8dd 0%, #188edd 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#80b8dd), color-stop(100%,#188edd));
    background: -webkit-linear-gradient(top, #80b8dd 0%,#188edd 100%);
    background: -o-linear-gradient(top, #80b8dd 0%,#188edd 100%);
    background: -ms-linear-gradient(top, #80b8dd 0%,#188edd 100%);
    background: linear-gradient(to bottom, #80b8dd 0%,#188edd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80b8dd', endColorstr='#188edd',GradientType=0 );
}

#navigation {
    height:37px;
    background-color:#414141;
}

#logo {
    margin:10px 0 10px 10px;
}

Please help !!!

Upvotes: 0

Views: 171

Answers (2)

user2284052
user2284052

Reputation:

Add this to your CSS:

#page {
    background-color: #fff;
    word-break: break-all;
}

#main {
    min-height: 200px;
    word-break: break-all;
}

Upvotes: 2

Joe Spurling
Joe Spurling

Reputation: 977

You have no spaces in your text. Use lorem ipsum for testing. Here are some generators:

You can use CSS word-break property for breaking words in situations where you do have to deal with gigantic words:

word-break: break-all;

Alternative if you only want to break words at appropriate hyphantion points:

word-break: hyphenate;

Upvotes: 3

Related Questions