Text overflowing

HTML & CSS
1

I can’t figure out why the text on this page keeps going down the page.

I tried adjusting the height to 100%, but that doesn’t work. The only way I can get the height to be right is to use a set pixel height, but I need the container to adjust to the height of the content. What am I doing wrong?

thx

http://www.newportsportsclub.com/group-fitness-classes-3/

2

I adjusted the height to 1200px because the site is live, but with the 100% height setting it doesn’t work.

3

For starters , try this:

#Content_Container {
width: 1024px;
[COLOR="#FF0000"]height: 1800px;[/COLOR] /* REMOVE */
background-color: #FFF;
margin: 0 auto;
padding-top: 10px;
padding-bottom: 25px;
[COLOR="#0000FF"]overflow: hidden;[/COLOR]  /* ADD */
}
4

Thx that worked. I don’t fully understand it though…I guess since the height isn’t defined that it just takes up the space that the content fills? And the overflow hidden hides extra white space? That part doesn’t make sense to me, but thx.

5

No, the problem was that the container wasn’t wrapping around the floated elements, which overflow: hidden fixes. Floats hang out of their container by default.

6

Hmm…weird, but okay. So, why is it that the images on the right side of the home page not all showing? http://www.newportsportsclub.com/

7

Hey, Brian. Still don’t believe in validating your HTML, huh?

No, not weird; completely normal; very repeatable/predictable. You can actually look up float behavior and learn about it, if you wish.

Pictures are cut off at the bottom of their container because Wordpress added a fixed height to the #ClassesList box.
(I’m sure that’s not your code in the local stylesheet.)


#ClassesList {
    clear: both;
    float: left;
    [COLOR=red]height: 77px;  /* delete me */[/COLOR]
    width: 270px;
}
8

I’m still a rookie. You mean validate using this http://validator.w3.org/ ??

And it worked so thx.

9

Yes, the w3 validator is a very useful tool. Sometimes, I find it a bit hard to understand, so I rely on the HTML Validator plug-in for Firefox. It uses exactly the same validation rules, but explains the errors in easier-to-understand language. If you have Firefox on your computer, you might give that plug-in a try. Can’t hurt much :slight_smile: . It can be found here: https://addons.mozilla.org/en-US/firefox/addon/html-validator/?src=search . If you are running FF 23, I recommend that you go to the author’s site and download the latest version, 0.9.5.8 .

We always have to remember that perfectly valid code may not work. Even though all of the tags are correctly formed (and the validator smiles), the logic/layout may still be faulty. The validator is a first line of defense troubleshooting and quality control aid. I use it and it keeps me humble. :slight_smile:

Glad to hear that the fix worked. Thanks for the feedback.