Window Sizing CSS HTML

Question

I'm going to try and explain this as simply as I can, it's most probaly not a hard thing to fix but i'm struggling with it.

This is my html:

<div id="nav">
<div id="logo">Jack Thomson</div>
<a href=".." class="active">Home</a>
<a href=".." class="nav">About</a>
<a href="/contact" class="nav">Contact</a>
</div>

<div id="content">

<p> 

Information here

</p>

</div>

and this is my CSS:

#nav {
margin : 70px 110px;
width : 1100px;
}
#content {
opacity : 0.5;
background : #fff;
width : 1020px;
margin : 10px;
margin-left : 100px;
padding : 10px;
border-radius : 5px 0;
}

So theres some snippets of my code. I want the #content to resize when the window is resized. When I do resize the window the content box just stays the same size. I have tried adding wrappers with a width and margin but it doesn't work. If anyone knows how to resolve this problem please let me know.

-Thank you in advance for any suggestions

Answer 1

Try working with percentages.

So for example:

width: 60%;
height: 60%;

No matter how big or small your screen is, the content will be 60%.

Answer 2

The key is to use percentages for the width and height of #content. If you have an outer container that stretches with the window, then you will need to set the outer container's position to relative. That will make #content's width and height a percentage of the outer container. In this case, you would usually set #content's width and height to 100%.

Of course, seeing a larger portion of your html and css would make this answer less vague.