css problem horizontally centered website

lomokev · 03-08-2005, 06:21 AM

having trouble centering a web site

what i want to precisely position elements in my site and i thought that i could put all the elements in to one div tag and make that centered. i can center it but the problem is when the browser is resized smaller that the content the site remains centered and center starts diserpering off the left edge. what i want it to do once resized smaller is for a horizontal scroll bar to appear and for content not to disappear on the left edge of the screen. i have half achieved this but now my content dose not stay in the main div

check out my example the "center1" div should appear inside the top light gray box but it dose not!
http://www.thehopeandanchor.net/nypd/layertest.htm

the code:

<!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" xml:lang="en" lang="en">
<head>
<title>redeem file</title>
<style type="text/css">

</style>
</head>
<body>

<div id="center1">
<div id="insidebit">center1</div>
</div>

<div id="center2">
<div id="insidebit">center2</div>
</div>

</body>
</html>

03-08-2005, 06:21 AM	#1 (permalink)
lomokev New Member Join Date: Aug 2004 Location: brighton, uk Posts: 18 34.00 NP$ (Donate)	css problem horizontally centered website having trouble centering a web site what i want to precisely position elements in my site and i thought that i could put all the elements in to one div tag and make that centered. i can center it but the problem is when the browser is resized smaller that the content the site remains centered and center starts diserpering off the left edge. what i want it to do once resized smaller is for a horizontal scroll bar to appear and for content not to disappear on the left edge of the screen. i have half achieved this but now my content dose not stay in the main div check out my example the "center1" div should appear inside the top light gray box but it dose not! http://www.thehopeandanchor.net/nypd/layertest.htm the code: <!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" xml:lang="en" lang="en"> <head> <title>redeem file</title> <style type="text/css"> <!-- div#center1 { /position:absolute;/ margin:0px auto; top:10px; width:600px; height:47px; background-color: #cccccc; } div#center2 { position:absolute; left: 50%; margin-left: -300px; top:80px; width:600px; height:47px; background-color: #cccccc; } div#insidebit { position:absolute; left:50px; top:10px; width:64px; height:26px; background-color: #eeeeee; } --> </style> </head> <body> <div id="center1"> <div id="insidebit">center1</div> </div> <div id="center2"> <div id="insidebit">center2</div> </div> </body> </html>

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Anyone wear hip Hop gear?	Jokez Guy	The Break Room	1	10-11-2004 09:46 PM

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)