Width not working

[agrolsy]

I can't get the text to stay within the set area (white). Some tables become very wide and I get a horizontal scrollbar that I don't want. How do I fix this?

The problem is clearly visble here [ooops]

CSS
* {
margin: 0;
padding: 0
}
body {
padding: 0;
background-image: url(bgr.gif);
background-color: #000000;
font: 12px "Lucida Sans Unicode", Verdana, sans-serif;
color: #202020;
text-align: left;
margin-top: 20px;
margin-bottom: 20px;
}
#contentbody {
margin: 0px auto!important;
width: 800px;
background: url(contentbody.gif) repeat-y;
}
#headerStormvarning
{
padding-top: 0px;
background-image: url(header.jpg);
background-repeat: no-repeat;
height: 276px;
text-align: center;
}
#menu
{
padding-top: 230px;
color: #FFFFFF;
text-align: left;
padding-left: 20px;
}
#related {
float: right;
width: 200px;
padding-right: 30px;
}
#contentStormvarning {
float: left;
margin: 10px;
padding: 0px 5px 0px 5px;
text-align: left;
}
#contentStormvarning p, h1, h2, h4, h3, table,td,tr,.post-title {
width: 490px;
text-align: left;
margin: 0px 0px 5px 20px;
padding: 3px;
font-size: 12px;
}

#footerStormvarning {
background-image: url(footer.gif);
background-repeat: no-repeat;
height: 80px;
clear: both;
}
#footerStormvarning p {
text-align: center;
padding: 35px;
font: 10px "Lucida Sans Unicode", Verdana, sans-serif;
color: #101010;
}

[edited by: SuzyUK at 8:53 am (utc) on Feb. 5, 2007]
[edit reason] Please no URLs : see TOS #13 [WebmasterWorld.com] [/edit]

[Setek]

Please remember you're not allowed to drop URIs like that - please see the Webmaster World Terms of Service [webmasterworld.com] and the CSS Forum Charter [webmasterworld.com].

About your problem though... hmm... there's not all that much you can do.

You could set overflow to hidden (so there's no horizontal scrollbar) but it means you'll clip off content.

You could set a width on all tables to never exceed a certain width, but even if you do, it still will (if the minimum width of each cell totalled together still exceeds the fixed width, the table will expand to fit (minimum width of each cell is the width of the longest word - browsers do not break a word for you.)

You could possibly set a fixed width to all tables and then set overflow to auto on them.

However, in having a peek at your website, it's not the tables that are causing a horizontal scrollbar on your entire page - it's the fact that your specificity is incorrect.

#contentStormvarning p, h1, h2, h4, h3, table,td,tr,.post-title {
width: 490px;
text-align: left;
margin: 0px 0px 5px 20px;
padding: 3px;
font-size: 12px;
}

This rule here is saying "find me all paragraphs within

#contentStormvarning

, as well as any

h1

s,

h2

s,

h3

s,

h4

s, any tables, any rows, and any cells, as well as this class."

I assume you wanted to find the headings, cells et al within

#contentStormvarning

, but you're grabbing every single one on the page.

Which means your

#related

that's 200px now becomes 490px, due to the

h4

that is residing inside it.

To find the headings, cells et al within

#contentStormvarning

, you need to do this:

#contentStormvarning p,
#contentStormvarning h1,
#contentStormvarning h2,
#contentStormvarning h3,
#contentStormvarning h4,
#contentStormvarning table,
#contentStormvarning tr,
#contentStormvarning td,
#contentStormvarning .post-title { ... }

So that the rule only affects those elements within

#contentStormvarning

.

[edit]

P.S.: your tables causing a horizontal spillout will still occur, by the way (it just isn't right at this second) - and, as I mentioned at the start of this post before changing track, there's not all that much you can do besides what I already said.

[/edit]

[edited by: Setek at 3:08 am (utc) on Feb. 5, 2007]