PDA

Click to See Complete Forum and Search --> : div positioning

Cassius
10-16-2006, 09:33 AM
Is it possible to put a div in the middle of a page (using position/top/left) and set it to a specific height ... eventually if the contents does not fit inside this specified height of the width, i would like to set the div with a vertical scrollbar, instead of let it expand automatically.

Is this possible please ?

Thanks in advance
House of Haus
10-16-2006, 10:13 AM
Sure. What you want to do is set the overflow:auto property for the div. That way, if the content is small enough to fit inside, it will look like a normal div, but if the content is too big, then scrollbars will appear.
sae
10-16-2006, 10:09 PM
positioning a DIV in the center of page vertically is a challenge though. could you provide me with specifics on how to do this?
Welshsteve
10-17-2006, 04:14 AM
Hi Cassius, try 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" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="" />
<meta name="description" content="" />

<title>Vertically and Horizontally Centered Div Container</title>

<style type="text/css">

body
{
width: 100%;
height: 100%
margin: 0;
padding: 0;
}

#container
{
position: absolute;
top: 50%;
left: 40%;
right: 40%;
margin-top: -50px; /* This should be set as half the height of the container */
overflow: auto;
}


</style>

</head>
<body>

<div id="container">
This text appears in the middle of the page.
This text appears in the middle of the page.
This text appears in the middle of the page.
This text appears in the middle of the page.
This text appears in the middle of the page.
This text appears in the middle of the page.
This text appears in the middle of the page.
This text appears in the middle of the page.
This text appears in the middle of the page.
This text appears in the middle of the page.
This text appears in the middle of the page.
This text appears in the middle of the page.
This text appears in the middle of the page.
This text appears in the middle of the page.
This text appears in the middle of the page.
</div>

</body>
</html>
Kor
10-17-2006, 04:34 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="txt/javascript">
<style type="text/css">
body
{
margin: 0;
padding: 0;
}
#container
{
position:absolute;
background:#CCCCCC;
width:200px;
height:200px;
left:50%;
margin-left:-100px;/* half of width */
top: 50%;
margin-top:-100px;/* half of height */
overflow: auto;
}
</style>
</head>
<body>
<div id="container">
This text appears in the middle of the page.
This text appears in the middle of the page.
This text appears in the middle of the page.
This text appears in the middle of the page.
This text appears in the middle of the page.
This text appears in the middle of the page.
This text appears in the middle of the page.
This text appears in the middle of the page.
This text appears in the middle of the page.
This text appears in the middle of the page.
This text appears in the middle of the page.
This text appears in the middle of the page.
This text appears in the middle of the page.
This text appears in the middle of the page.
This text appears in the middle of the page.
</div>
</body>
</html>
sae
10-17-2006, 09:59 AM
That fine, but what if your container changes height based on content?
Welshsteve
10-17-2006, 10:07 AM
That's not what Cassius asked for. See original question below.

... eventually if the contents does not fit inside this specified height of the width, i would like to set the div with a vertical scrollbar, instead of let it expand automatically.
.
Kor
10-17-2006, 10:13 AM
That's not what Cassius asked for. See original question below.

eeer, nor your code is very bright, Welshsteve, you should be more attentive on the semicolons, see the red missed one. Hev u tested it on IE and Moz as well? :rolleyes:

body
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}


On the other hand, if your div has no size, how would you expect to use an overflow?
Cassius
10-17-2006, 10:20 AM
Thanks all for your replies. Actually the overflow: auto has solved my problem.
Welshsteve
10-17-2006, 10:20 AM
I simple typo error on the semi colon issue.

The container issue I hold my hands up to. I was using some code I did for centering an image on a page, which didn't require a height and width set for the container. ;)
Kor
10-17-2006, 10:25 AM
anyway, Welshsteve, in your code giving the body a height 100% is of no help. Unfortunately, the vertical align is not so simple as a horizontal align (i guess is a weakness of CSS in present version).

To align a container only horizontally center is simple. Give the body margins/padding 0 and the weight 100%, then give your container margin-left and margin-right auto. This trick woun't work on vertical alignment, this is why I used the 1/2 height margins together with the position absolute and 50% top positiong.
Welshsteve
10-17-2006, 10:34 AM
I got you. This is the code I used for centering an image in a page. I guess adapting it to a DIV container is not as easy as adding overflow and removing the img tag HEHE I'll pay more attention to what I'm typing in future LOL

<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="" />
<meta name="description" content="" />

<title>Vertically and Horizontally Centred Image</title>

<style type="text/css">

body
{
width: 100%;
height: 100%
margin: 0;
padding: 0;
}

#container
{
position: absolute;
top: 50%;
left: 50%;
margin-top: -38px; /* This should be set as half the height of the image */
margin-left: -58px; /* This should be set as half the width of the image */
}


</style>

</head>
<body>

<div id="container">
<img src="image1.jpg" style="width:116px;height:76px;" alt="pic" />
</div>

</body>
</html>
Taschen
10-17-2006, 10:39 AM
Here's my two pennies,
#content{margin-top: 5%;margin-bottom: 25%;margin-left: auto;margin-right: auto;width: 50%;height: auto;}
this won't place the content container on the centre of the verticle axis (and scrollbars auto needs to be added), but really you don't want to place anything centre-verticle as artistically this is wrong. Think of a picture in a frame, a well hung picture always has asymmetric margins top (less) and bottom (approx. double top margin). Why? Simple it is visually pleasing. Try it and see!