Stop elements from moving when resizing webpage

B

Bryanp

New Member
Hey I am trying to create a basic page with currently just two images. The problem is no matter how i set the two elements whenever I resize my webpage they end up meeting each other and overlapping. All I want to do is keep them in one position no matter what resizing is done. Kinda like in every other webpage on the internet. Here is my code.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<title>Dual Shooter</title>

<style type="text/css">
body
{
margin: 25px;
}
div#container
{
margin: 25px;
width: 800px;
position:fixed;
}
div#cod
{
position:fixed;
top:16%;
left:25%;
right:37.5%;
}
div#halo
{
position:fixed;
top:16%;
right:25%;
}
</style>

</head>

<body>

<div id="container">

<div id="cod">
<a href="cod.html">
<img src="modernwarfare3.png" alt="Call Of Duty Modern Warfare 3"/>
</a>
</div>

<div id="halo">
<a href="halo4.html">
<img src="halo4.png" alt="Halo 4"/>
</a>
</div>

<div id="footer">
</div>

</div>

</body>

</html>



Thank you
 
Phreaddee

Phreaddee

Super Moderator
Staff member
see position fixed fixes to the viewport and takes it out of the document flow, much like absolute, and as such, using % means that it is positioned 16%top and 25%left/right of the browser window, of course as your browser window gets smaller they will overlap, and your "wrapper" is essentially redundant.
place them within the wrapper using margins, so for instance (and of course you will need to modify to suit)
HTML: 
<div id="wrapper">
<div id="section1"></div>
<div id="section2"></div>
</div>

Code: 
#wrapper {
width:800px;
margin:0 auto;
overflow:hidden;
}

#section1 {
float:left;
width:350px;
margin:25px;
}

#section2 {
float:left;
width:350px;
margin:25px;
}

will give you 2 divs equally positioned within the wrapper, which will also be centered within the browser.

its really that simple.
 
B

Bryanp

New Member
Thanks, that makes a lot more sense. I know it may seem like something so simple to both of you but I just started making webpages so I'm trying to get the basics down. And even after reading over tutorials some things don't make sense
 
PixelPusher

PixelPusher

Super Moderator
Staff member
@Bryanp, please search for answers to these questions prior to starting a new thread. Your problem has been solved a few times this last month in similar threads.

Glad to hear Phraeddee help you out :)
 
You must log in or register to reply here.
Top