We are trying to create a new design for our non profit site and are having trouble with getting the content portion of our css div to expand appropriately in Firefox or Safari. Works fine in IE though. Can someone take a peek and make a recommendation?
Site is at: http://www.prominentyouth.com/new/page.php and the css is at http://www.prominentyouth.com/new/styles.css
Any help / suggestion would be greatly appreciated.
Rubik's Cube
At a look... I'd guess either you have used "height:" or are using "float:" and not clearing it.
Hmmm, you also haev a big issue with resizing text in MozFF.
Okay... as it stands you have a Container.
Inside the Container, you have 2 independant Columns, (meaing they are not nested).
As they are not nested they have no relation to each other (so no matter the size of the Left, the right will not stretch, and vice versa).
Instead... you either want to re-order things a little...
<div id="container">
<div id="content">
<div id="leftcol">
</div>
</div>
</div>
#container
{
float: left;
clear: both;
#zoom:1; /*IE Bug Fix */
}
#contents
{
margin-left: 200px;
}
#leftcol
{
margin: 0 -1px 0 -200px;
width: 200px;
float: left;
position: relative; /* IE Bug Fix */
#display: inline; /* IE Bug Fix */
}
All of this means that basically, you hae a parent block... containg a child and grandchild.
The child is pushed from the left exactly the same distance as the width of the grandchild.
the grandchild is then pulled to the left, almost completely leaving the child, bar 1px.
You use the float: on both Parent and Grandchild interact.
(NOTE: You may want to apply Float to the Parent as well (so you float container, content and leftcol).
Also, helps if you test in other browsers as build!
Further, you may want to validate it ( though I am impressed with the coding standard and the CSS!).
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.