PDA

View Full Version : How do you span an object the entire width of a webpage?


ryanh
15 Jul 2009, 03:14 PM
Hey guys, this is my first post on this forum, so dont flame at me if i sound retarded =0

Anyways, it's common in alot of web pages to see an object, like a menu or something, spanned the entire width of a page. However if i make a .html doc and make a table that is width=100% and make the background green, the green square will not go all the way to the edges, it leaves pixels inbetween.

my question is, how do i get it to span the entire width? can i do it with html? or do i need to use javascript?

I've searched forever on google and havent had any luck. :nana:

dancing banana unrelated
LiteTest
16 Jul 2009, 06:42 PM
I will write this with inline style, however it's recommended to use a stylesheet.

in your body tag, start by removing all padding and margin:
<body style="margin:0; padding:0;">

Instead of a table, use a div.
<div style="background-color:#00ff00;">Put some content here</div>

That will create a div that will cover the entire page with a rather horrid green background colour.

If you get into the habit of using divs instead of tables, I think you will find that it gets easier to do more complex designs as well.

On another note, if you do want to keep tables and don't feel like getting jiggy with the divs:
<body style="margin:0; padding:0;">
<table style="width:100%">
<tr>
<td style="width:100%; background-color:#00ff00;">Put your content here</td>
</tr>
</table>