make website adapt to all display size - HTML

Question

I'm writing a website with HTML and CSS. My problem is that when I for example run my website in my browser, I adjust all the margins with percent. But then when I run my browser in fullscreen or if I adjust the size of the window the websites different parts fall apart and doesn't fit together as they should. Why doesn't the percent unit fix that problem since it's relative to the size of the window?

CSS:

#aboutMeDiv
{
    background-image: url('noisyBlue.png');
    position: absolute;
    width: 100%;
    height: 118px;
    margin-top: 13.6em;
    margin-left: -0.7%;
    opacity: 0.5;
    transition: opacity 0.3s;
}

How can I make it "the same way" even if the window changes? Thanks!

Answer 1

A more precise answer cannot be given without seeing your code, but this issue can probably be solved by adding a min-width and max-width to your container element.

For example, if the structure seems to fall apart when the width is less than 700px and when it is greater than 1500px, you could use this:

.container {
    max-width: 1500px;
    min-width: 700px;
}

Of course, this might inhibit responsive design -- especially for mobile browsers. It may be a good idea to check out some already-made CSS frameworks like Twitter Bootstrap and Gumby Framework .

---

Edit following addition of code to the question:

How can I make it "the same way" even if the window changes? Thanks!

If you want #aboutMeDiv to be "the same way" even if the window size changes, you should use concrete numbers instead of percentages of the div size; ie change width: 100%; to a something like width: 700px; . Then, as noted above, you can use a min-width to make sure the screen shows all the content within the div.