Centering page on a wide screen

niche · September 15, 2010

I need to display a vertical filler box in the left and right margin of this script: http://www.lincolnsrealdeals.com/temp1.html so the page is centered on regular screens (without the filler boxes displayed) and so the page is centered on wide screens (with the filler boxes displayed).I can image how to do this using positioning. How do I insert the fillers using float in the http://www.lincolnsrealdeals.com/temp1.html script?

ShadowMage · September 15, 2010

Depends on what these "filler boxes" are. You could just set a repeating background on the body and have a content div with margin: 0px auto; set on it. Then if the screen size is less than or equal to the content width, the "fillers" wouldn't be visible.EDIT: If you have images, though, it might be a little more complicated.

niche · September 15, 2010

I went with this background image: http://www.lincolnsrealdeals.com/temp1.html. Obviously, I need something for the divs to push against.Suppose I had an image called vertstrip.jpg how would I insert it into just my left margin space so my divs could push against it AND how do I get vertstrip.jpg to reduce in width as someone adjusts their screen to a smaller size (keeping my content centered)?Script:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="description" content="Save money" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><title>savebop </title><script type="text/javascript" src="bop2.js"></script><style type="text/css">body{font-family:arial;}a.three{display:inline;font-size:50%;text-decoration:none;height:40px;}a.three:visited {color:blue;}a.three:hover {color:red;}span:hover {color:red;}select {color:blue;}div.one {color:blue;font-size:175%;min-width:275px;float:left;overflow:visible;}div.oneb {color:blue;font-size:175%;min-width:175px;float:left;overflow:visible;}div.one4 {color:blue;font-size:175%;min-width:375px;float:left;overflow:visible;}.links {margin: 5px 0 0 -2px;height:30px;padding-top:5px;}.links2 {margin: 18px 0 0 -12px;}div.one2 {visibility:hidden;min-width:200px;}  div.one3 {visibility:hidden;min-width:200px;position:absolute;left:317px;top:32px;}  body {background-image:url('vertstrip2.jpg');background-position:center;background-repeat: repeat-y;background-attachment:scroll;}</style></head><body><div style="clear:both;margin-bottom:20px;"></div><div onmouseover="showmenu('all')" onmouseout="hidemenu('all')"><div style="margin-left:200px;"><div class="one"><span>View All Bops</span></div><div class="one2" id="all"> <div class="oneb links"><a class="three" href="newest1st.php">Newest First</a></div><div class="oneb links"><a class="three" href="newest1st.php">Biggest Percent Off</a></div><div class="oneb links colr"><a class="three" href="newest1st.php">Most Money Off</a></div></div> </div></div></body></html>

dsonesuk · September 15, 2010

why not use a outer container, with margin: 0pt auto; width: 890px; and just zero the left margin on the div that pushed it away from the left edge.

niche · September 15, 2010

I know its not right, but am I thinking about this right?: http://www.lincolnsrealdeals.com/temp1.html How should the outer class read? I'm not understanding your recommendation as well as I need to.

dsonesuk · September 15, 2010

use exactly what had before with background image in the bodywith

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="description" content="Save money" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><title>savebop </title><script type="text/javascript" src="bop2.js"></script><style type="text/css">body{font-family:arial;}a.three{display:inline;font-size:50%;text-decoration:none;height:40px;}a.three:visited {color:blue;}a.three:hover {color:red;}span:hover {color:red;}select {color:blue;}div.one {color:blue;font-size:175%;min-width:275px;float:left;overflow:visible;}div.oneb {color:blue;font-size:175%;min-width:175px;float:left;overflow:visible;}div.one4 {color:blue;font-size:175%;min-width:375px;float:left;overflow:visible;}.links {margin: 5px 0 0 -2px;height:30px;padding-top:5px;}.links2 {margin: 18px 0 0 -12px;}div.one2 {visibility:hidden;min-width:200px;}  div.one3 {visibility:hidden;min-width:200px;position:absolute;left:317px;top:32px;}  body {background-image:url('vertstrip2.jpg');background-position:center;background-repeat: repeat-y;background-attachment:scroll;}</style></head><body><div style="width:890px; margin: 0 auto;"> <!-- start --><div style="clear:both;margin-bottom:20px;"></div><div onmouseover="showmenu('all')" onmouseout="hidemenu('all')"><!-- <div style="margin-left:200px;"> replace with below --><div style="margin-left:0;"> <!-- replacement --><div class="one"><span>View All Bops</span></div><div class="one2" id="all"> <div class="oneb links"><a class="three" href="newest1st.php">Newest First</a></div><div class="oneb links"><a class="three" href="newest1st.php">Biggest Percent Off</a></div><div class="oneb links colr"><a class="three" href="newest1st.php">Most Money Off</a></div></div> </div></div></div><!-- end --></body></html>

dsonesuk · September 15, 2010

or if using this plain image

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="description" content="Save money" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><title>savebop </title><script type="text/javascript" src="bop2.js"></script><style type="text/css">body{font-family:arial;}a.three{display:inline;font-size:50%;text-decoration:none;height:40px;}a.three:visited {color:blue;}a.three:hover {color:red;}span:hover {color:red;}select {color:blue;}div.one {color:blue;font-size:175%;min-width:275px;float:left;overflow:visible;}div.oneb {color:blue;font-size:175%;min-width:175px;float:left;overflow:visible;}div.one4 {color:blue;font-size:175%;min-width:375px;float:left;overflow:visible;}.links {margin: 5px 0 0 -2px;height:30px;padding-top:5px;}.links2 {margin: 18px 0 0 -12px;}div.one2 {visibility:hidden;min-width:200px;}  div.one3 {visibility:hidden;min-width:200px;position:absolute;left:317px;top:32px;} #wrapper{background: url(http://www.lincolnsrealdeals.com/vertblue.jpg); overflow:hidden;} #outer{margin:0pt auto;width: 890px;background-color:#FFFFFF;overflow:hidden;min-height:400px; /*optional*/}</style></head><body><div id="wrapper"><div id="outer"><div style="clear:both;margin-bottom:20px;"></div><div onmouseover="showmenu('all')" onmouseout="hidemenu('all')"><div style="margin-left:0px;"><div class="one"><span>View All Bops</span></div><div class="one2" id="all"> <div class="oneb links"><a class="three" href="newest1st.php">Newest First</a></div><div class="oneb links"><a class="three" href="newest1st.php">Biggest Percent Off</a></div><div class="oneb links colr"><a class="three" href="newest1st.php">Most Money Off</a></div></div> </div></div></div></div></body></html>

niche · September 15, 2010

Great work! Thank-you.I have several questions. I don't understand this line from your first script: <div style="width:890px; margin: 0 auto;">. I don't understand why reducing the width moves the div to the right? also, why does changing to margin: 100 auto; moves the div to the left? Both movements are the opposite I expected. What am I missing? And, what's the reason for <div style="margin-left:0;">? changing the values don't seem to have an effect and deleting it doesn't produce a change.

dsonesuk · September 15, 2010

with your first background image, the middle white area was 910px wide, setting the width of the container to 890px, gave a 10px distance from the edge of the white background, once you use margin: 0 auto to center the containing outer div.the div with margin-left: 200px; set the text 200px from the left edge, now that we were using a centred div container, we no longer needed it to be set away from the edge of the outer container by 200px, so i set it to 0.margin: 0 auto; 0 = top and bottom, auto means add maximum margin left right of equal width to centre element.your original code had some missing closing tags, and this might be why you are getting strange results, the reason the div moved right might be related to the div with margin-left:200px;

niche · September 16, 2010

Again thanks for the explaination on margin: 0 auto;. Understanding the use of that property allowed me to understand. Also thanks to ShadowMage. You got me started and dsonesuk got me finished.Niche

dsonesuk · September 16, 2010

below was your main problemis it class, is it a id, is there a style outer, NO! its super....naa, just incorrect!outer{margin:0pt auto;width: 890px;}</style></head><body><div style="outer">I think I've mention before about validation, if i remember rightly.

niche · September 16, 2010

I wasn't thinking id when I typed style. Thanks for pointing that out.Niche

Centering page on a wide screen

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived