Text containment question

HTML & CSS
1

been working off & on on css coding. I have a problem containing the text w/in the #main or #wrapper tags. At the url below you can see that the typing next to a pics overflows and keeps on going off the page. But I did use Float & followed the other instructions.
Any advice please?

http://www.danielamorescalchi.com/dlmWeb/footbagFreaks/footbagFreaks.htm


```html
body{
margin: 0;
padding: 0;
background-color: #050845;
color: #ffffff;
background-image: url(images/blueMarble.jpg);
background-repeat: repeat-x;
font: small Arial, Helvetica, Verdana, sans-serif;
}


#wrapper{
background-color: #fdf8f2;
color: #000000;
margin: 30px 40px 30px 40px;
}

#header-bottom{
border-top: 1px solid #b9d2e3;
border-bottom: 1px solid #b9d2e3;
}

#header-bottom ul{
margin: 0;
padding: 0 30px 0 0;
text-align: right;
}

#header-bottom li{
display: inline;
background-color: #fdf8f2;
color: #050845;
}

#header-bottom a: link, #header-bottom a:visited{
text-decoration: none;
background-color: #fdf8f2;
color: #050845;
}

#tagline{
font-weight: bold;
font-size: medium;
background-color: #fdf8f2;
color: #050845;
font-style: italic;
margin: 0;
padding: 0 0 0 20px;
width: 300px
float: left;
}


#ball{
position: absolute;
top: 110px;
right: 55px;
}

#main{
position: relative;
top: 0;
left: 0;
width: 100%;
margin-top: 10 px;
}

#pageContent{
margin: 0px 240px 10px 160px;
border: 3px solid #ff0000;
background-color: #c0c0c0;
color: #000000;
}


#mainFeature{
background-image: url(images/blueMarble.jpg);
background-repeat: no-repeat;
background-color: #ffffff;
color: #000000;
padding: 2em 2em 1 em 200px;
}

#mainFeature h2{
margin: 0;
font-weight: medium;
font-size: 140;
}

#mainFeature p{
font-size: 110%;
}

#mainFeature p.more{
margin-top: 0;
text-align: right;
}

#mainFeature p.more a:link, #mainFeature p.more a:visited {
color: #ffffff;
background-image: url (images/ball.gif);
background-repeat: no-repeat;
background-position: center left;
padding-left: 14px;
}


#pageContent .inner{
margin: 10px 20px 10px 40px;
}


#pageContent .inner h2{
color: #245185;
padding-bottom: 0.2em;
border-bottom: 10px solid #b9d2e3;
font-size: 110;
}



#pageContent .inner ul features{
margin: 0;
padding: 0;
list-style: none;
}

#pageContent .inner h3{
font-size: 130%;
}

#pageContent .inner h3 a:link, #pageContent .inner h3 a:visited{
font-size: 130%;
}

#pageContent .inner p{
color: #666666;
font-size: 90%
}

#pageContent .inner .features li img{
float: left;
margin: 0 10px 10px 0;
border-top: 3px solid #b9d2e3;
border-bottom: 3px solid #b9d2e3;
}


#pageContent .inner p.author{
font-weight: bold;
color: #ff0000;
}

#pageContent .inner p .more{
margin-top: 0;
text-align: right;
}

#pageContent .inner p .more a:link, #pageContent .inner p .more 

a:visited{
color: #000000;
background-image: url(images/ball.gif);
background-repeat: no-repeat;
background-position: center left;
padding-left: 14px;
font-size: 90%;
color: #1e4c82;
}


#sidebar{
position: absolute;
top: 0;
right: 0;
width: 220px;
background-color: #696969;
color: #ffffff;
margin: 0;
padding: 0;
}


#sidebar2 {
position: absolute;
top: 0;
left: 0;
border: 3px solid #b9d2e3;
width: 159px;
background-color: #696969;
color: #ffffff;
margin: 0px 0px 10px 0px;
padding: 0;
}


#sidebar2 .inner{
margin: 5px;
}


#sidebar2 .p{
font-size: 90%;
color: #ff0000;
}

#sidebar2 a:link, #sidebar2 a:visited{
color: #ffffff;
font-weight: bold;
}

#sidebar2 h3{
color: #245185
padding-bottom: 0.2em;
border-bottom: 3px solid #00ffff;
font-size: 110%;
}

#nav{
list-style: none;
margin: 0;
padding: 0;
}


#nav .li{
padding: 0.4em 0 0.2em 0;
border-bottom: 3px solid #00ffff;
font-size: 90%;
}

#footer{
clear: both;
border: 3px solid #0000ff;
background-color: #000000:
color: #ffffff;
}
2

Do you get the same problem when you use normal words with spaces between them? Browsers generally don’t put a line break in the middle of words unless you tell them to.

3

Hi Stevie. Didn’t think of that…but I also have the same prob w/tables. I thought that if the text or table was contained w/in the div it wouldn’t overflow and the text would just wrap.
Not sure…things are improving. But nowhere near as easy as I thought .
Thx
Daniela

4

The w3c validator spits out 59 errors in your html markup.

You have lots of typos and some structural problems.

Fix those first and I think most if not all your problems will disappear.

You might have to change the charset to utf-8.

5

will take a look I have not found the validator to be crazy helpful so far

6

Hi,
The problem is that you are testing with an unbroken string of text that does not resemble real words.

adslfkjdsa;lkfja;sdlkfj;sadlkfj;ldksafj;lsakdfj;laksdjf;lskadjf

That will happen if you use a long word in any fixed width div.

Use legitimate Lorem Ipsum dummy text to test with and you will be fine :slight_smile:

Lorem ipsum dolor sit amet consectetuer justo
7

I first had to change the charset to utf-8 in your <head> meta tag.

The validator then spat out 59 errors and 2 warnings.

Most of the errors are very obvious typos and a few structural errors.

I would recommend fixing those first after which most, if not all, your problems should go away.

8

Thank you! Looking forward to try it out!

9

will take a look I have not found the validator to be crazy helpful so far

It speaks its own cryptic language, yeah, but use it anyway. When you get an error message you don’t understand, ASK US because you can learn to read it and then you’ll see why your code is bad and can easily fix it.

Since you never know when a typo or accident will totally destroy your page, you’ll need the validator to find your bugs for you… which is why it’s there, for YOU.

10

I solemnly promise that henceforth before posting I will check the validator! thank you all for your help.:slight_smile:

D

11

I solemnly promise that henceforth before posting I will check the validator!

and again, ask us to interpret it! We speak validatorese.