Html newbie! background-image question

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

Answer 2

Problem is not the background. The problem is the position relative you're giving to the block level elements without defining their width...

The h2 elements like (Ship To:) and (Phone) and all the paragraph elements. You need to give these elements a specific width and it will work fine

Try giving these elements a background-color: yellow; to see how the flow inside the document ( for your debugging purpose ) and you will see what I mean