Stop elements from moving when resizing webpage

Bryanp · 11-18-2011, 11:00 PM

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 · 11-18-2011, 11:43 PM

Stop using position fixed will be a good start.

Phreaddee · 11-19-2011, 12:43 AM

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 Code:

<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.

Bryanp · 11-19-2011, 08:34 PM

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 · 11-22-2011, 06:59 PM

@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

11-18-2011, 11:00 PM	#1
Bryanp New Member Join Date: Nov 2011 Posts: 2	Stop elements from moving when resizing webpage 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

11-18-2011, 11:43 PM	#2
Phreaddee Diamond Member Join Date: Feb 2011 Location: Newcastle, Australia Posts: 1,137	Stop using position fixed will be a good start. __________________ if (headhurts == "possibly") { alert ("keep going!"); } else if (headhurts == "yes") { alert ("go to sleep"); } else if (headhurts == "damn !@#$ mofo scripts...") { alert ("give up and have a beer!"); } else { alert ("watch TV"); }

11-19-2011, 12:43 AM	#3
Phreaddee Diamond Member Join Date: Feb 2011 Location: Newcastle, Australia Posts: 1,137	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 Code: <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. __________________ if (headhurts == "possibly") { alert ("keep going!"); } else if (headhurts == "yes") { alert ("go to sleep"); } else if (headhurts == "damn !@#$ mofo scripts...") { alert ("give up and have a beer!"); } else { alert ("watch TV"); }

11-22-2011, 06:59 PM	#5
PixelPusher Super Moderator Join Date: Oct 2008 Location: Arizona, USA Posts: 1,053	@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 __________________ John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

11-19-2011, 08:34 PM	#4
Bryanp New Member Join Date: Nov 2011 Posts: 2	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