Beginner - Why does my website get messed up when I squish it in the browser?


I’m struggling to build my first website and I’m wondering why all the borders and everything get hacked together when I squish the browser window. It looks quite ugly and I guess it would look like this on smaller screens, which isn’t too good. I thought maybe it had to do with some kind of measurement unit I’m using. I have the header width set to 100% and for the rest of the div measurements I’m using px.

Thanks for any insight you can give me!

Hi, MogDoc, welcome to the forums.

Have you read any tutorials about writing web pages that explain how HTML and CSS code should be written so it works together?

For us to offer any useful help, we need to see the code whose output you are describing. We need to see what you see :slight_smile:

You can post a working page that renders the problem or you can post a link to your site, if your code is on a server.

If you wish to post code, please click the link at the bottom of my post and read our posting guidelines.

Hi there ronpat,

Thank you for replying. I am currently working through Codecademy and Treehouse, but am finding the positioning to be quite difficult to understand. I think I fixed the problem, however - it seems to have been fixed by changing the width of the body tag from 100% and just giving it a smaller pixelated size so my website doesn’t span the entire screen like it did before.

Hi, MogDoc.

The body tag doesn’t usually require a width assignment, and most tags do not require a width assignment of 100%. Block tags, such as divs, extend to the full width of their parent container by default. Usually page width limitations are assigned to the first box inside of the body tag. Usually.

Anyway, if you wish to ask questions, please do follow the posting guidelines and post a working page that demonstrates the problem. A working page starts with <!doctype>, ends with </html>, and contains all of the code. We’re glad to help.

Best of luck! :slight_smile: