Problem with new site style's text area

[ShaunMAc]

Hi all,

First post for me here. :D

OK, I'm having an issue with a website of mine that I'm redesigning - <snip> - and I can't seem to work out a solution to it so I'm hoping that one of the bright sparks that frequent here can help! ;)

Basically, the main text area is supposed to occupy a fixed portion of the screen - BUT instead if will adjust to fit the text/photo content placed in this text area.

Now, I've done all the styling/positioning/defining of the text area using CSS positioning, etc.

Is there any way to achieve what I'm looking to achieve using CSS or do I have to go away and rethink the way I've approached this?

This is the CSS file I've used to style the site:-

body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
color: #FFFFFF;
background-color: #000066;
}
td,th {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
color: black;
background-color: #CCCCCC;
}
#header {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
background-image: url(/Images/RoofFascia.gif);
background-repeat: repeat-x;
}
#navlist {
color: white;
background-color: #000066;
padding: 5px;
list-style-type: none;
margin-top: 180px;
margin-left: 0px;
}
#navlist a {
display: block;
color: white;
background-color: black;
text-decoration: none;
padding-left: 7px;
border-bottom: 1px solid #000066;
border-top: 1px solid #000066;
width: 198px;
}
#navlist a:hover {
color: white;
background-color: gray;
}
#navlist a:active {
color: red;
background-color: gray;
}
#maintextarea {
color: #000066;
background-color: white;
/*background-image: url(../Images/HeaderNew.GIF);*/
background-repeat: no-repeat;
background-position: center;
padding: 5px;
position: absolute;
top: 190px;
left: 225px;
margin-right: 15px;
}
#footer {
background-color: #000066;
text-align: center;
color: white;
font-size: x-small;
line-height: 4em;
margin: -5px -5px -15px -5px;
}
.ImagePlacingRight {
float: right;
padding: 5px;
width: 260px;
text-align: center;
color: #993300;
}
.ImagePlacingLeft {
float: left;
padding: 5px;
width: 260px;
text-align: center;
color: #993300;
}
.mainlink a {
text-decoration: none;
font-size: small;
font-weight:bold;
color: red;
}
.mainlink a:hover {
color: #00CC00;
}
.mainlinkTop a {
text-decoration: none;
font-size: medium;
font-weight:bold;
color: red;
}
.mainlinkTop a:hover {
color: #00CC00;
}
.navlistImages {
color: white;
background-color: #000066;
padding: 5px;
list-style-type: none;
margin-top: 10px;
margin-left: 0px;
}
.navlistImages a {
display: block;
color: white;
background-color: #000066;
text-decoration: none;
padding-left: 7px;
border-bottom: 3px solid #000066;
border-top: 3px solid #000066;
width: 150px;
}
.mainNavbar {
text-decoration: none;
color: #00FF00;
}
.mainNavbar a {
text-decoration: none;
color: #FF00FF;
}

Any help that anyone can provide in solving this conundrum will be greatly appreciated.

Many thanks

[edited by: SuzyUK at 8:44 am (utc) on May 3, 2007]
[edit reason] Please no URI's per TOS #13 [WebmasterWorld.com] [/edit]

[Setek]

Welcome to Webmaster World :)

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

About your problem though, it's because you've set

position: absolute;

to your

#maintextarea

. This stops it from taking up all available space, to only taking up the necessary space.

You'll have to remove it--which creates problems with your entire layout, since it's based around that--so I suggest another approach... you can absolutely position the menu system instead, as it is fixed-width... you can float the menu system and restack the HTML elements (if you float the menu left you'll need it to be sequentially before the content area)... you can float the content area as well as the menu system (which might require some restacking of HTML structure anyway)... it all depends on how much you want to write :)