Question

I’m learning HTML and I wanted to practice by recreating a invoice sent to me by Electronics Expo.

However, I used the background-image property and repeated it by repeat-x and now, the background stretches across the page so much that it has a horizontal bar to drag.

http://htmlpocketreference.110mb.com/index.html

You can see what I did in my link above.

Also, I would really appreciate some advice on simplifying my CSS coding. It seems really messy and I have to move every element once something changes. -.-

Thanks!

Answer 1

It’s because you have relatively positioned elements that do not have a fixed width – these elements take on the width of their parents, which is the width of your invoice, and stick out of the page, causing the overflow. Give them a background color, and you can see this quite clearly:

Give the elements a fixed width to fix this, or alternatively, look to other methods of laying out your elements, like floating them.

---

In addition to this problem, you’re also repeating the id attribute, which is creating invalid HTML. You should look at using the class attribute for multiple elements sharing the same style, or even better, look at using inheritance and the cascade to not have to give every single element an id.

Further reading:

• CSS Positioning 101
• Inheritance and Cascade from The Web Standards Curriculum