Div cut off on top in vertical centering resizing browser window

HTML & CSS
1

Hi,

when I reduce the dimensions of the browser window the upper part of the div is cut off.
I have resolved this problem for both sides left and right using “margin-left: auto” and “margin-right: auto” without negatives margins, now they are not cut off, but,
I have no idea how to resolve problems about the vertical center of a div in a page.

this is my html code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
   <link rel="stylesheet" href="include/layout.css" type="text/css">
   <title></title>
   </head>
   <body>
      <div id='outer'>
         <div id='box_main'>
         </div>
      </div>
   </body>
</html>

this is my css code:

body {
   background: url(../include/bg.gif) 0 0 repeat-x;
   margin: 0;
   padding: 0;
   text-align: center; /* ie5 */
}

#outer {
   position: absolute;
   height: 100%;
   width: 100%;
}

#box_main {
   position: relative;
   margin-left: auto;
   margin-right: auto;
   width: 780px;
   height: 580px;
   background: url(../include/main.gif) 0 0 no-repeat;
   text-align: left;
   top: 50%;
   margin-top: -290px;
}

I hope you can help me please.
many thanks really.

2

Here is a nice way to do it:


<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<title>Experiment</title>
	
<style type="text/css" media="all">

html,body{
	height:100%;
	margin:0;
	padding:0;
}
body {
   background: #e5e5e5 url(../include/bg.gif) 0 0 repeat-x;
   text-align: center;
   min-width:780px;
   min-height:580px;
}

#outer {
   position: absolute;
   height: 100%;
   width: 100%;
}

#box_main {
   margin: 0 auto;
   clear: both;
   width: 780px;
   height: 580px;
   overflow: auto;
   background: #d4d4d4 url(../include/main.gif) 0 0 no-repeat;
   text-align: left;
}

div#vertical {
	float: left;
	height:50%;
	margin-top:-290px;
	width:100%;
}




</style>

<script type="text/javascript" src=""> </script>
	
</head>




<body>

<div id="vertical"></div>

 
         <div id='box_main'>
<p>Vivis, et vivis non ad deponendam, sed ad confirmandam audaciam. Cupio, patres conscripti, me esse clementem, cupio in tantis rei publicae periculis me non dissolutum videri, sed iam me ipse inertiae nequitiaeque condemno.</p> 

<p>Castra sunt in Italia contra populum Romanum in Etruriae faucibus conlocata, crescit in dies singulos hostium numerus; eorum autem castrorum imperatorem ducemque hostium intra moenia atque adeo in senatu videmus intestinam aliquam cotidie perniciem rei publicae molientem.</p> 

<p>Si te iam, Catilina, comprehendi, si interfici iussero, credo, erit verendum mihi, ne non potius hoc omnes boni serius a me quam quisquam crudelius factum esse dicat. Verum ego hoc, quod iam pridem factum esse oportuit, certa de causa nondum adducor ut faciam.</p> 

<p>Tum denique interficiere, cum iam nemo tam inprobus, tam perditus, tam tui similis inveniri poterit, qui id non iure factum esse fateatur.</p> 

<p>Quamdiu quisquam erit, qui te defendere audeat, vives, et vives ita, ut nunc vivis. multis meis et firmis praesidiis obsessus, ne commovere te contra rem publicam possis. Multorum te etiam oculi et aures non sentientem, sicut adhuc fecerunt, speculabuntur atque custodient.</p>
         </div>
      

</body>

</html>

I think I got this method from here:

3

Ok thanks. it’s what I’m looking for.
But, I’ve tried to remove the lines “float: left” and “clear: both” in div#vertical and in #box_main. The result is the same. Why?
I have not understand well the reason why the div #box_main hasn’t been cut off.

4

Do you mean from box-main?

5

Hi,
As you discovered it is possible to accomplish this by using a static div instead of a float. As long as you don’t have another static block (such as an h1) above the vertical spacing div then it will be fine.

V-Center Div (static v-gauge)

However, if you read Paul’s entire article (the link that Ralph posted) you will find the reason for using the float. If you will scroll down and read the section under "Why This Works" you will find the explanation. Mainly because floats are removed from the page flow and they behave differently than static blocks when they have negative vertical margins applied to them.

You will see the example code with the green, red, & blue divs. The green div is a static block above the float. It could be that you would want a block above the float, that might be an h1 page heading that you wanted outside of the centered div. If you were using a static vertical div instead of a float the centered div would follow it and lay over the h1 thus hiding it.

By using a float, the centered div will only follow it until it reaches another static div in the normal flow of the page. You would need to calculate the height of that top div into the negative top margin of the floated v-gauge.

V-Center Div (floated v-gauge)

The float just allows the method to work with or without an element above it. :wink: