CSS Forum

**Skeddles** · 12-17-2008, 10:12 PM

I can't seem to get css to work at all, it just doesn't do what I want it to.

I need my web site to stretch vertically and horizontally.

Here's the one I'm trying to do right now: http://skeddles.com/v4/css.htm
and the stylesheet: http://skeddles.com/v4/style/layout.css

the footer wont stay on it's own line
I can't get the two divs in on the sides to stretch vertically
if I put an image in the middle, nothing stretches

Here's my first CSS one: http://skeddles.com/v4/index.htm

doesn't stretch

Here's the one made with HTML tables: http://skeddles.com/v4/first.html

stretches nearly perfectly

I guess I want to know if anyone can help, or give me tips on how to fix my site. And I still don't get why I shouldn't use tables, they seem to be the only thing that works.

**stevej** · 02:05 AM

I think you would find it a good deal simpler to fix if you tried to condense the layout into as few images as possible.

Quote:

I guess I want to know if anyone can help, or give me tips on how to fix my site. And I still don't get why I shouldn't use tables, they seem to be the only thing that works.

I think that this link explains it pretty well.

Let me know if the problem persists!
- Steve

**Andy Pugh** · 12-18-2008, 07:00 AM

Hi there, you really don't want to be using tables, trust me, it really brings down your layout.

I'll give you the basis for a simple header footer / 2 column layout, the header and footer will stretch to the size of your page.

Here is your main page code... you'll need to obviously do your own styling and move your design in to this..

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>your title</title>

<link rel="stylesheet" href="yourstyle.css" type="text/css" media="screen" />

</head>

<!-- background for expandable header -->
<div id="headerbg">
<h1>your header text</h1>
</div>

<!-- CENTER CONTENT -->
<div id="container">

<div class="left">
    <p>This is the left content</p>
</div>

<div class="right">
    <p>oh, and here is the right</p>
</div>

</div>
    
    <div class="clear"></div>
<div id="footer"><p>put all your footer stuff in here!!</p></div>

And here is your CSS file..

HTML Code:

h1, p, body, html {
    margin:0;
    padding:0;}


body {
    background:#000;
    font:12px verdana, sans-serif;
    color:#000;
    }


#headerbg {
    background:#cccc66;
    text-align:center;
    padding:20px;
    }


#container {
    position:relative;
    margin:0 auto;
    width:800px;
    }


#footer {
    background:#cccc66;
    padding:10px;
    text-align:center;
    }


.left {
    float:left;
    width:500px;
    background:#ccff66;
    }

.right {
    float:left;
    width:200px;
    clear:right;
    background:#66ff33;
    }

.left p, .right p {
    padding:10px;
    }

.clear {clear:both;}

Hopefully that is what you're looking for, spend a little time getting to know CSS, I assure you it's worth it.

Thanks,
Andy

**LadynRed** · 11:06 AM

#1 rule if you want CSS to work properly - USE A PROPER DOCTYPE - you have NONE on your pages.
#2 rule - if you float an element (except images), you MUST define a WIDTH, something you have not done.

It's not 'working' for you because you haven't mastered it yet.

Best not to put your navigation in divs.. use an unordered list instead, that is, after all, what the nav is - a list.

Your #wrapper is not 'containing' anything because you have not CLEARED your floats. You can add overflow: auto to #wrapper to clear the floats. I would also recommend setting #wrapper to position: relative.

You might also want to read thru this: www.cssslicingguide.com

Your method or creating the boxes with the glow is overly complicated too. Create a vertically narrow repeating background that is the width of your box, including the glow, and then put the rounded top and bottom on as part of the header and footer - much simpler and it WILL stretch vertically.