My Webpage Won't Retain It's Width When Narrowed

and thanks for checking or helping me out with the issue! I'm currently trying to create a simple webpage for the http://www.code.org Computer Science week! I'm trying to create an

Solution 1:

What you need is a wrapper div that holds all of the elements in your page and add a min-width. That will prevent the page from getting too small when the window is minimized.

<divid="wrap"><divclass="h3setup"><ul><li><ahref=""><h3id="GI">General Information</h3></a></li><li><ahref=""><h3id="BC">Benefits to Coding</h3></a></li><li><ahref=""><h3id="CT">Coding Types</h3></a></li></div><div><imgsrc="siteMapButton.png"id="siteMapButton"/></div>
</div<!--end wrap-->

#wrap{
width:100%;
min-width:900px;
margin:0 auto;
}

As far as the rest of your page is concerned, instead of having an img element as your background image, you should use background:url('img.png'); to have the image as a background in that particular element.

For example:

.h3setup{
background:url('img.png') no-repeat;
height:200px;
width: 100%;
}

SEE DEMO HERE