ARGH!! CSS is killing me!!

Mike · Jul 4, 2009

All I want is for the CSS to expand vertically to accommodate the content yet at a bare minimum fill the screen top to bottom. This is going on 4 hours trying to figure it out, and I'm at my wit's end.

Yes, I'm sure it's very easy for a CSS coding god, but that's not me. So, now I'm praying to the CSS god's: help me out please!

Code:

/** Container CSS **/

.container {
    width: 960px;
    height:auto;
    position: absolute;
    top: 0px;
    margin-left: -480px;
    border: thin solid #CCCCCC;
    left: 50%;
    background-color: #FFFFFF;
}
.container .header {
    background-color:#000000;
    width: 960px;
}
.container .menu {
    height: 40px;
    width: 960px;
    background-color: #554722;
    z-index: 1;
}
.container .header h1 {
    display: none; 
}
.container .sidebar {
    float: left;
    width: 200px;
    overflow:visible;
    position: relative;
    left: 50%;
    margin-left: -480px;
    top: -15px;
}
.container .content {
    width: 750px;
    min-height: 800px;
    overflow:hidden;
    position: absolute;
    left: 200px;
    top: 262px;
    padding-top: 0px;
    padding-right: 5px;
    padding-bottom: 0px;
    padding-left: 5px;
}
.container .sidebar h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #FFFFFF;
    background-color: #A08E4C;
    height: 25px;
    width: 200px;
}
.container .content h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    position: absolute;
}

/** TOP Horizontal Menu **/

ul{
    margin: 0 auto;
}
ul.horizontal_list li{
    text-align: left;
    float: left;
    list-style: none;
    padding: 3px 10px 3px 10px;
    margin: 5px;
    border: 1px solid #CCC;
    background-color: #D6CCA8;
    font-family: Arial, Helvetica, sans-serif;
}
.container .menu .horizontal_list a {
    color: #000000;
    text-decoration: none;
}
.container .menu .horizontal_list a:hover {
    color: #0000FF;
    text-decoration: none;
}
.container .menu .horizontal_list a:visited {
    color: #FF0000;
    text-decoration: none;
}


/** Misc **/

body {
    background-color: #1F1F1F;
}
#footer {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #FFFFFF;
    text-align: center;
    position:absolute;
    bottom:0;
    width:100%;
    height:50px;   /* Height of the footer */
    background-color: #000000;
    vertical-align: bottom;
}
#footer a {
    color: #999999;
    text-decoration: none;
}
#footer a:hover {
    color: #0000FF;
    text-decoration: none;
}
#footer a:visited {
    color: #FF0000;
    text-decoration: none;
}


/** SIDEBAR Vertical Menu **/

#vertmenu {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    width: 195px;
    padding: 0px;
    margin: 0px;
    top: 17px;
    position: relative;
}
#vertmenu h1 {
    display: block;
    background-color:#000000;
    font-size: 90%;
    color:#FFFFFF;
    padding: 3px 0 5px 3px;
    border: 1px solid #000000;
    margin: 0px;
    width:195px;
}

#vertmenu ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    border: none;
}
#vertmenu ul li {
margin: 0px;
padding: 0px;
}
#vertmenu ul li a {
font-size: 80%;
display: block;
border-bottom: 1px dashed #C39C4E;
padding: 5px 0 2px 4px;
text-decoration: none;
color: #5E4B21;
width:195px;
}

#vertmenu ul li a:hover, #vertmenu ul li a:focus {
color: #000000;
background-color: #eeeeee;
}

seosly · Jul 4, 2009

Can you be more clear on the problem you're having?

Is the container currently expanding vertically to accommodate the content but NOT filling the screen when the content isn't there? If this is the case I believe you're looking for the "min-height" property.

ie:

Code:

.container {
    width: 960px;
    min-height:768px;
    position: absolute;
    top: 0px;
    margin-left: -480px;
    border: thin solid #CCCCCC;
    left: 50%;
    background-color: #FFFFFF;
}

ps. I'm also 99% certain you can use a percentage value for the property.

ie.

Code:

.container {
    min-height:100%;
}

chatmasta · Jul 4, 2009

Try posting on the SitePoint CSS forum (am I allowed to say that, lol?). There's a guy there who is a fucking CSS genius and responds to practically every thread.

Mike · Jul 4, 2009

Okay, I had the .container set to 100% on height alone and it filled the screen, but wouldn't expand to contain additional content. So, I have this nice, neat page until you start to scroll down, then you get just background color and black text, the container disappears.

Here's a copy of what I'm trying to do. The images have been changed and I just grabbed a ToS from a webhost (because it was long):

My fucked up CSS

The images work on my site (like I said they're different) so don't worry about that, it's just the text that overflows outside the container.

chatmasta said:
Try posting on the SitePoint CSS forum (am I allowed to say that, lol?). There's a guy there who is a fucking CSS genius and responds to practically every thread.

Took your advice and did that as well. Just posting the link to the thread so I can find it again. http://www.sitepoint.com/forums/showthread.php?p=4309060

I haven't been on SP since sometime in 2008.

WritingSolution · Jul 4, 2009

I absolutely love that header. They better teach me how to do that shit next semester in web design. So far it's been a waste of money.

chatmasta · Jul 4, 2009

WritingSolution said:
I absolutely love that header. They better teach me how to do that shit next semester in web design. So far it's been a waste of money.

It's a popular MooTools effect. Just copy the JS from Mike's site.

Jvuonger · Jul 4, 2009

Replace:

Code:

.container .content {
    width: 750px;
    min-height: 800px;
    overflow:hidden;
    position: absolute;
    left: 200px;
    top: 262px;
    padding-top: 0px;
    padding-right: 5px;
    padding-bottom: 0px;
    padding-left: 5px;
}

with:

Code:

.container .content {
float:right;
padding:0 5px;
width:750px;
}

There's a lot of other issues with your code and CSS, but I think this is what you're looking for. lol

Mike · Jul 4, 2009

Jvuonger said:
Replace:

Code:

.container .content { width: 750px; min-height: 800px; overflow:hidden; position: absolute; left: 200px; top: 262px; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; }

with:

Code:

.container .content { float:right; padding:0 5px; width:750px; }

There's a lot of other issues with your code and CSS, but I think this is what you're looking for. lol

Ummm...look at the site now. That made it worse. There may be problems with my code, but it sort of worked before...

seosly · Jul 4, 2009

SEO_Mike said:
Okay, I had the .container set to 100% on height alone and it filled the screen, but wouldn't expand to contain ....

height or "min-height"?

you also need to make sure you have all of your floats cleared. (I'm not sure if this is the issue, but based on what I'm reading it could be?)

Easy float clearing:

Code:

[FONT=monospace]
[/FONT]div.container {
[B]         overflow: auto;[B][FONT=monospace]
[/FONT]         width: 100%[/B][/B];
}

If the container needs to be a specific width you can put the width:100% declaration BEFORE a set width declaration and it will still clear all of the contained floats.

Hope this helps.

Jokerr · Jul 5, 2009

Hey Mike, PM me if you still need heelp. I'll redo your CSS for free.

Tim

Jizzlobber · Jul 5, 2009

This seemed to work for me by adjusting your css on your test page. Bascially added font attributes to the content container and adjusted the padding (OK in FF, may need adjusting in IE). Also tweaked the footer settings with the major change being a negative value on the 'bottom' attribute of -2260px. Quick hack, shit and get.

Code:

/** Container CSS **/
.container .content
{
    float: right;
    padding: 0 5px;
    width: 750px;
}
.container .header
{
    background-color: #000000;
    width: 960px;
}
.container .menu
{
    height: 40px;
    width: 960px;
    background-color: #554722;
    z-index: 1;
}
.container .header H1
{
    display: none;
}
.container .sidebar
{
    float: left;
    width: 200px;
    overflow: visible;
    position: relative;
    left: 50%;
    margin-left: -480px;
    top: -15px;
}
.container .content
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    width: 750px;
    min-height: 800px;
    overflow: hidden;
    position: absolute;
    left: 220px;
    top: 284px;
    padding-top: 20px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 20px;
}
.container .sidebar H3
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #FFFFFF;
    background-color: #A08E4C;
    height: 25px;
    width: 200px;
}
.container .content H1
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    position: absolute;
}
/** TOP Horizontal Menu **/
UL
{
    margin: 0 auto;
}
UL.horizontal_list LI
{
    text-align: left;
    float: left;
    list-style: none;
    padding: 3px 10px;
    margin: 5px;
    border: 1px solid #CCC;
    background-color: #D6CCA8;
    font-family: Arial, Helvetica, sans-serif;
}
.container .menu .horizontal_list A
{
    color: #000000;
    text-decoration: none;
}
.container .menu .horizontal_list A:hover
{
    color: #0000FF;
    text-decoration: none;
}
.container .menu .horizontal_list A:visited
{
    color: #FF0000;
    text-decoration: none;
}
/** Misc **/
BODY
{
    background-color: #1F1F1F;
}
#footer
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #FFFFFF;
    text-align: center;
    position: absolute;
    bottom: -2260px;
    width: 100%;
    height: 50px;   /*Height of the footer*/
    background-color: #000000;
    vertical-align: bottom;
}
#footer A
{
    color: #999999;
    text-decoration: none;
}
#footer A:hover
{
    color: #0000FF;
    text-decoration: none;
}
#footer A:visited
{
    color: #FF0000;
    text-decoration: none;
}
/** SIDEBAR Vertical Menu **/
#vertmenu
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    width: 195px;
    padding: 0px;
    margin: 0px;
    top: 17px;
    position: relative;
}
#vertmenu H1
{
    display: block;
    background-color: #000000;
    font-size: 90%;
    color: #FFFFFF;
    padding: 3px 0 5px 3px;
    border: 1px solid #000000;
    margin: 0px;
    width: 195px;
}
#vertmenu UL
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    border: none;
}
#vertmenu UL LI
{
    margin: 0px;
    padding: 0px;
}
#vertmenu UL LI A
{
    font-size: 80%;
    display: block;
    border-bottom: 1px dashed #C39C4E;
    padding: 5px 0 2px 4px;
    text-decoration: none;
    color: #5E4B21;
    width: 195px;
}
#vertmenu UL LI A:hover, #vertmenu UL LI A:focus
{
    color: #000000;
    background-color: #EEEEEE;
}

Edwin · Jul 5, 2009

Mike, Your CSS code:

Code:

/** Container CSS **/

.container .content {
float:right;
padding:0 5px;
width:750px;
}
.container .header {
    background-color:#000000;
    width: 960px;
}
.container .menu {
    height: 40px;
    width: 960px;
    background-color: #554722;
    z-index: 1;
}
.container .header h1 {
    display: none; 
}
.container .sidebar {
    float: left;
    width: 200px;
    position: relative;
    margin-left: 0px;
    top: 15px;
}
.container .content {
    width: 750px;
    min-height: 800px;
    position: relative;;
    margin-right: 430px;
    margin-top: 30px;
    margin-bottom:50px;
    float:right;
}
.container .sidebar h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #FFFFFF;
    background-color: #A08E4C;
    height: 25px;
    width: 200px;
}
.container .content h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    position: absolute;
}

/** TOP Horizontal Menu **/

ul{
    margin: 0 auto;
}
ul.horizontal_list li{
    text-align: left;
    float: left;
    list-style: none;
    padding: 3px 10px 3px 10px;
    margin: 5px;
    border: 1px solid #CCC;
    background-color: #D6CCA8;
    font-family: Arial, Helvetica, sans-serif;
}
.container .menu .horizontal_list a {
    color: #000000;
    text-decoration: none;
}
.container .menu .horizontal_list a:hover {
    color: #0000FF;
    text-decoration: none;
}
.container .menu .horizontal_list a:visited {
    color: #FF0000;
    text-decoration: none;
}


/** Misc **/

body {
    background-color: #1F1F1F;
}
#footer {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #FFFFFF;
    text-align: center;
    position:relative;
    bottom:0;
    width:100%;
    height:50px;   /* Height of the footer */
    background-color: #000000;
    vertical-align: bottom;
float:left;

}
#footer a {
    color: #999999;
    text-decoration: none;
}
#footer a:hover {
    color: #0000FF;
    text-decoration: none;
}
#footer a:visited {
    color: #FF0000;
    text-decoration: none;
}


/** SIDEBAR Vertical Menu **/

#vertmenu {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    width: 195px;
    padding: 0px;
    margin: 0px;
    top: 17px;
    position: relative;
}
#vertmenu h1 {
    display: block;
    background-color:#000000;
    font-size: 90%;
    color:#FFFFFF;
    padding: 3px 0 5px 3px;
    border: 1px solid #000000;
    margin: 0px;
    width:195px;
}

#vertmenu ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    border: none;
}
#vertmenu ul li {
margin: 0px;
padding: 0px;
}
#vertmenu ul li a {
font-size: 80%;
display: block;
border-bottom: 1px dashed #C39C4E;
padding: 5px 0 2px 4px;
text-decoration: none;
color: #5E4B21;
width:195px;
}

#vertmenu ul li a:hover, #vertmenu ul li a:focus {
color: #000000;
background-color: #eeeeee;
}

Change your min height value to what you want it to be.

Code:

.container .content {
    width: 750px;
    [COLOR=Green][B]min-height: 800px;[/B][/COLOR]
    position: relative;;
    margin-right: 430px;
    margin-top: 30px;
    margin-bottom:50px;
    float:right;
}

That should get you back on track.

...I hope. :cool2:

Fatbat · Jul 5, 2009

This is what you do to make the content 100% high and expandable for additional content. This is a 960px wide and centered layout. Of course you can change this to whatever suits you...

Code:

html, body {
    height: 100%;
}

body {
    background: #000;
}

#outerwrapper {
    width: 960px;
    position: relative;
    margin: 0 auto;
    min-height: 100%;
    background: #fff;
}

*html #outerwrapper {
    height: 100%;
}

That's it. Nothing more. You can then add on things like a header, sticky footer, etc.

Mike · Jul 5, 2009

Okay, thanks for all the help guys! I'm still struggling (CSS has never been my strong suit, obviously).

Take a look at the page now. I used FatBat's code and Edwin's and it's closer, but now the content is pushed far left. The sidebar sat right where it should...

I'll mess with the code on my real site, and leave this one alone until you can see it.

Mike · Jul 5, 2009

YAY! Fixed! Good enough anyhow. There was a margin-right:430px that was pushing it over. Took that out and viola'! Iz all goot.

Thanks for all the help guys! I'm off to Barnes and Noble to pick up one of the O'reilly CSS books.

Edwin · Jul 5, 2009

:thumbsup:

By the way, you could have left it in and changed the value to for example 20px
That way your content has a bit more spacing from the right edge.

Supergeek · Jul 6, 2009

Make sure you test in different browsers. Min height and height are inconsistent between FF and IE. One of the things I hate about web design.

Fatbat · Jul 6, 2009

Supergeek said:
Make sure you test in different browsers. Min height and height are inconsistent between FF and IE. One of the things I hate about web design.

The solution I gave him works 100% in FF and IE6+.

Search

Search

ARGH!! CSS is killing me!!

Mike

New member

seosly

yay for interwebs!

chatmasta

Well-known member

Mike

New member

WritingSolution

New member

chatmasta

Well-known member

Jvuonger

New member

Mike

New member

seosly

yay for interwebs!

Jokerr

Mucho Macho Muchacho

Jizzlobber

Moist

Edwin

New member

Fatbat

Advertise Here

Mike

New member

Mike

New member

Edwin

New member

Supergeek

The Uberest Nerd

Fatbat

Advertise Here