Jump to content

[SOLVED] centering a <div> in the absolute middle ofthe screen


M.O.S. Studios

Recommended Posts

i would like to get the div.content to always show in the middle of the screen,

 

any one know the css for that?

 

here is my code:

 

<html>
<head>
<style type="text/css">
div.wrapper { 
width:99%; 
} 
div.left_column { 

float:left; 
text-align:right; 
vertical-align:middle; 
} 
div.content { 
width:800; 
height:700;
float:left;

text-align:right;
background-color: #ff9a9a;
background-IMAGE: url(images/content_bg1.gif);
background-repeat: no-repeat;
background-position: top left;
border-width: .2em; 
border-style: solid; 
border-color: #504e4f; 

} 
div.right_column { 

float:right; 
text-align:center; 
vertical-align:middle; 
} 
hr { 
clear:both; 
display:block; 
visibility:hidden;} 


</style>
</head>

<body bgcolor='#000000' text='#ffffff'>
<center><img src='logo.gif'></center>
<div class="wrapper"> 
<div class="left_column"> 
left 
</div> 
<div class="content"> 

</div> 
<div class="right_column"> 
</div> 

</div> 

 

thanks in advance

found the answer

 

change the css to:


<style type="text/css">

div.wrapper { 
width:100%; 
} 


div.left_column { 
float:left; 
text-align:right; 
vertical-align:middle; 
}

div.content {
Position:absolute;
left: 25%;
width:800; 
height:700;
float:left;
text-align:right;
background-color: #ff9a9a;
background-IMAGE: url(images/content_bg1.gif);
background-repeat: no-repeat;
background-position: top left;
border-width: .2em; 
border-style: solid; 
border-color: #504e4f; 

}


div.right_column { 
float:right; 
text-align:center; 
vertical-align:middle;
} 
hr { 
clear:both; 
display:block; 
visibility:hidden;} 


</style>

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.