width:100% + padding

Hi,

I have a problem with an element of 100% width and a left paddig. The
effect I try to achieve is easy, take a look at:
http://swing-tanzen-verboten.de/test.html

My Problem is, the width of the element h1 is 100%+20px and causes
therefore an horizontal scrollbar. Looks not nice.

Any ideas how to get the element to a width of 100% with a padding?

Thanks

Chris

Chris Leipold wrote:

Hi,

I have a problem with an element of 100% width and a left paddig. The
effect I try to achieve is easy, take a look at:
http://swing-tanzen-verboten.de/test.html

My Problem is, the width of the element h1 is 100%+20px and causes
therefore an horizontal scrollbar. Looks not nice.

Any ideas how to get the element to a width of 100% with a padding?

You need to nest it. Create a container of 100% width, then put the
element inside it with 20px left margin.

--
Mark.
http://tranchant.plus.com/

Chris Leipold wrote:

Hi,

I have a problem with an element of 100% width and a left paddig. The
effect I try to achieve is easy, take a look at:
http://swing-tanzen-verboten.de/test.html

My Problem is, the width of the element h1 is 100%+20px and causes
therefore an horizontal scrollbar. Looks not nice.

Any ideas how to get the element to a width of 100% with a padding?

Thanks

Chris
It's not the padding that is giving the problem.

Add left:0; to the style.

On Fri, 12 Nov 2004 16:35:02 +0000 (UTC), 2metre
<2metre (AT) xxxhersham (DOT) net> wrote:

Chris Leipold wrote:

I have a problem with an element of 100% width and a left paddig. The
effect I try to achieve is easy, take a look at:
http://swing-tanzen-verboten.de/test.html

My Problem is, the width of the element h1 is 100%+20px and causes
therefore an horizontal scrollbar. Looks not nice.

Any ideas how to get the element to a width of 100% with a padding?


It's not the padding that is giving the problem.

Yes it is.
100% + 20px is greater than 100% therefore scrolling is produced.

Add left:0; to the style.

That moves the blue all the way to the left, but (except in IE5 with
its broken box model) still produces horizontal scroling.

Steve

Steve Pugh <steve (AT) pugh (DOT) net> wrote

On Fri, 12 Nov 2004 16:35:02 +0000 (UTC), 2metre
2metre (AT) xxxhersham (DOT) net> wrote:
Chris Leipold wrote:

I have a problem with an element of 100% width and a left paddig. The
effect I try to achieve is easy, take a look at:
http://swing-tanzen-verboten.de/test.html

My Problem is, the width of the element h1 is 100%+20px and causes
therefore an horizontal scrollbar. Looks not nice.

Any ideas how to get the element to a width of 100% with a padding?


It's not the padding that is giving the problem.

Yes it is.
100% + 20px is greater than 100% therefore scrolling is produced.

Add left:0; to the style.

That moves the blue all the way to the left, but (except in IE5 with
its broken box model) still produces horizontal scroling.

Steve

create a table with 100% as width and add the h1 inside it

e.g:
<table style="background-color: blue;" width="100%">
<tr><td>
<h1 style="margin: 0px; padding-left: 20px; color: white;">Foobar</h1>
</td></tr></table>

henman

On 15 Nov 2004 00:47:22 -0800, saisan (AT) gmail (DOT) com (henman) wrote:

create a table with 100% as width and add the h1 inside it

Why? Is it tabular data?

Steve