Results 1 to 10 of 10
-
09-26-2006, 08:11 AM #1Web Hosting Evangelist
- Join Date
- Aug 2005
- Location
- EIB Network
- Posts
- 474
Centered fixed div in fixed container?
Hey guys, I am having one heck of a time trying to find a solution for seemingly an easy layout question of mine.
I have a layout that has a fixed container (the <body> tag) of 990px, but I am interested in having a 600px fixed-width box within the body dimensions that is centered to the viewing window (the browser). How can I make this "inner" fixed-width div of 600px not only be centered based on the viewing window, but also just simply center itself in the 990px body box when someone viewing a super wide resolutions views the screen? I hope this makes sense... if it doesn't I'd be glad to help clarify. Thanks.People train run out of Stubville.
-
09-26-2006, 08:18 AM #2WHT Addict
- Join Date
- Nov 2002
- Location
- Space Coast, FL
- Posts
- 160
From what I can tell you simply need to let your outer div know it should center it's content, correct?
Transitional: align="center" - this can be applied directly to the div.
Strict: text-align: center; - in the css would work, although there are other ways.
FYI a 600px div inside a 990px div would still create horizontal scroll bars on 800x600 res.
-
09-26-2006, 08:33 AM #3Web Hosting Evangelist
- Join Date
- Aug 2005
- Location
- EIB Network
- Posts
- 474
If the screen res is wider than 990px... I simply want that inner div to center within the 990px body element. However, if someone is using a smaller screen res of say 800px, I want that inner div to center to their viewing port as opposed to the 990px body tag. That way the inner div won't be off center on smaller resolutions.
Last edited by seodevhead; 09-26-2006 at 08:48 AM.
People train run out of Stubville.
-
09-26-2006, 09:00 AM #4WHT Addict
- Join Date
- Nov 2002
- Location
- Space Coast, FL
- Posts
- 160
Yes I see what you're saying, just use my above either directly on the div or via css.
-
09-26-2006, 09:07 AM #5Web Hosting Evangelist
- Join Date
- Aug 2005
- Location
- EIB Network
- Posts
- 474
Can't get it working????
HTML 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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Test</title> <style type="text/css"> #content1 { width: 500px; border: 1px solid #000; height: 900px; text-align: center; } #content2 { width: 200px; border: 1px solid #000; height: 800px; } </style> </head> <body> <div id="content1"> <div id="content2">asd</div> </div> </body> </html>
People train run out of Stubville.
-
09-26-2006, 09:22 AM #6Hail Eris !
- Join Date
- Oct 2002
- Location
- Canada
- Posts
- 3,103
Add this in #content2 style
Code:margin:0px auto;
-
09-26-2006, 09:50 AM #7Web Hosting Evangelist
- Join Date
- Aug 2005
- Location
- EIB Network
- Posts
- 474
Originally Posted by sashaPeople train run out of Stubville.
-
09-26-2006, 09:52 AM #8Web Hosting Master
- Join Date
- Dec 2004
- Posts
- 729
Originally Posted by seodevhead
I don't think what you are asking is possible without javascript.
Content1 is 500px in your example, meaning even if my screen is only 400 px wide it's still 500px and since content2 is inside of content1 it will only be affected by changes made to content1 not to the size of the browser. In other words, resizing the browser will never have an effect on content2.Last edited by Teh_Winnar; 09-26-2006 at 09:55 AM.
Who is General Fault, and why is he reading my disk?
-
09-26-2006, 11:10 AM #9Hail Eris !
- Join Date
- Oct 2002
- Location
- Canada
- Posts
- 3,103
I get it. You want inner div always centered to the screen and centered to the outter div when screen size allows. There are two ways to go about that and none of them is too nice.
One way is to have inner div outside of outer div :
<div id="content1"></div>
<div id="content2"></div>
and then set margin auto to each div and position top for content2.
The other way would be checking offsetLeft on window load and window resize and using JS to scroll window to the right until your div is in the screen center.
-
09-26-2006, 01:58 PM #10Web Hosting Master
- Join Date
- Dec 2004
- Posts
- 729
Originally Posted by sasha
yes, you could do this
<!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
html, body {
height:800px;
}
#content1 { width: 900px; border: 1px solid #000; height: 900px; text-align: center; margin:auto; }
#content2 { position:relative; top:-900px; width: 600px; border: 1px solid #000; height: 800px; margin:0px auto; margin-top:50px; }
</style>
</head>
<body>
<div id="content1"> </div>
<div id="content2">asd</div>
</body>
</html>
This does accomplish what you want, I am not a big fan of using negative margins top margins because now you have 800 px of blank space at the bottom... You can fix this in firefox by adding a height the the html or body element however the problem still exists in IE. This works, but Javascript would be the best solution.Who is General Fault, and why is he reading my disk?