CSS - Is This A Good Way To Horizontally Center An Absolutely Positioned Div.

I'm using a relative-positioned div as a container for an image, which is absolute-positioned. I'm doing this so that the image will automatically scale down to fit inside the containing div (nothing else I've tried has done this for me- so if there is another way to achieve this, please fill me in). This part works fine, but the image isn't as wide as the containing div, so I would like to center the image inside the div- but I can't seem to get it to work.
I tried the obvious text-align:center in the div. That actually worked... kinda. The image's left-side was in the center of the div, but obviously isn't the 'centering' that I'm looking for. I then tried setting margin-left and margin-right on the image to auto, and that did nothing.
I suspect that the fact that I have my image absolute-positioned is the culprit here, but I don't know how to get around it- or IF I can get around it without drastically changing my approach.

Admittedly, the container div resides inside a table cell. I know that isn't the best practice, but I spent so much time trying a div-only approach only to waste time and become frustrated that I went back to what I know works- at least for now. I tried removing the container div from the table and inserting the image directly to the table cell- but encountered more issues with the sizing of the image.

Essentially, my code is something like this:

CSS:
Code:

td#CONTENTDISPLAY
{
  width: 100%;
  height: 100%;
  text-align: left;
  vertical-align: top;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}

div#CONTENTBANNER
{
  position: relative;
  height: 100%;
  padding: 0 0 0 0;
}

img.CONTENTIMG
{
  position: absolute;
  height: 100%;
}

HTML:
Code:

...
  <td id="CONTENTDISPLAY">
    <div id="CONTENTBANNER">
      <img class="CONTENTIMG" />
    </div>
  </td>
...

Nothing flashy, I know. One thing I should mention, however, is that the image is ALWAYS placed inside the container div using a Javascript function (it's a dynamic image). I doubt that makes a difference, but I figure it's worth mentioning.

Can anyone help point me in the right direction?

Thanks!

- skubik

I have an absolutely positioned <div> containing a block of text. I have not specified a width for this <div>.

This <div> is nested within another <div> for which I have specified a width of 200px.

So something like:
html4strict Code:
Original - html4strict Code <div style="position: relative; width: 200px;"> <div style="position: absolute; top: 10px; left: 20px; z-index: 100;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris. </div> </div>

  

 <div style="position: relative; width: 200px;">


     <div style="position: absolute; top: 10px; left: 20px; z-index: 100;">


         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris.


     </div>


 </div> 

Since the absolutely positioned <div> is not part of the page's normal flow, I would expect that its width would expand according to its contents (and the browser window's boundries).

Instead, in Firefox only, the width of the absolutely positioned <div> expands only to the width of its parent - in this case 200px.

Am I doing something wrong? or is there a workaround for this?

I know vertical-align works great on one line of text, but I can't get this script to vertically (and horizontally) center two lines of text. What do I need to do change without changing the size of the div?

Code:

echo '<div style="float:left;width:171px;height:96px;text-align:center;display:table-cell;vertical-align:text-middle;background-color:yellow;">';
echo '<h1 >1/35 Scale House</h1>';
echo '</div>';

I have a problem with my background image. I need to centre the background image and center the container div on top of that. I have used the below CSS which has the desired effect in Mozilla but for some reason in ie, the background moves depending on browser size when it needs to stay put! Any ideas?

body {
font-size: 0.70em;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
background:#ffffff url('../images/content_bg.gif') top center no-repeat;
color: #303030;
height:100%;
min-height:100%;
}

#container {
width: 900px;
text-align:left;
position: absolute;
margin-left:-450px;
left:50%;
z-index: 100;
}

I'm trying to position the image below vertically center and horizontally left to no avail. Its horizontally left but centers the top of the image in the center of the page. What am I doing wrong?

<DIV style="position: absolute; top: 50%; left: 0px; border: none"><img src="images/right.jpg"></img></DIV>

I have been reading alot about how much trouble we get into with IE when trying to center a div. I had a lot of trouble with it and mainly just wanted to have a fixed width site (760px or so) with a thin border all the way around it.

Is the following code a good way to accomplish this?
Code:

<head>
<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
	}

div {
	border: 1px solid #666666;
	height: 100%;
	width: 100%;
	}
</style>
</head>

<body>
<table width="770" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><div></div></td>
  </tr>
</table>

</body>

I am planning on having this as my index page and just using an "include" for the different header/body/footer elements.
Would love some advice/opinions.

Hi,

I'm using XHTML & CSS (strict dtd) and using one large table to format my pages.

Within the table I have different alignments and any other sort of thing that you would find in a table.

W3.org says my XHTML --AND-- CSS are VALID, so why does the main table render off to the left of the page in Netscape??

Everything within the table is great, but the table itself is not centered.

I'm using CSS in the following manner to try to center it currently

Code:

<!-- All the doctype stuff and head tags go here...-->

<body style="text-align:center">

<!-- Rest of the document -->

It works greate in IE (but what doesen't), so is this the wrong attribute to use to center the documents content in Netscape.

As you may know "<center>" is not defined in the XHTML strict dtd so that options out.


Thanks for any help or suggestions,

Kalan

Does anyone have any idea what could be happening to my main menu - it dissappears in Safari!

Hobo

I have a section of my application where I need a menu containing forms in a box aligned to the left. When one of these form names are clicked, I need it to unhide the div and display the proper form to the right of the menu.

This works fine in Internet Explorer, but when the forms become visible in Firefox they completely cover up the menu.

Here's what I've got:

CSS
Code:

#forms .form { display: none; position: absolute; left: 0; top: 0; }
#forms { position: relative; }

#adminbar { float: left; border: 1px solid #000; padding: 5px; position: relative; }

HTML
Code:

<div id="adminbar">
         <a href="javascript:void(0);" onclick="hide(getElementsByClassName('form')); show('software');">Software</a>
      </div>
      <div id="forms">
         <div id="software" class="form">
            <h1>Software Administration</h1>
            <form class="ttcform">
            <fieldset>
               <legend>New Software Item</legend>
               <ol>
                  <li>
                     <label>Software Name</label>
                     <input type="text" size="30" name="name"/>
                  </li>
               </ol>
            </fieldset>
            <fieldset class="submit" align="center">
               <input type="submit" name="submit" value="Create Software"/>
            </fieldset>
            </form>
            <hr>
            <form class="ttcform">
            <fieldset>
               <legend>Edit Software Item</legend>
               <ol>
                  <li>
                     <label>Software Name</label>
                     <input type="text" size="30" name="name"/>
                  </li>
               </ol>
            </fieldset>
            <fieldset class="submit" align="center">
               <input type="submit" name="submit" value="Create Software"/>
            </fieldset>
            </form>
         </div>
      </div>   

Javascript (In case you need it):
Code:

function show(el) {
   if(typeof el == 'string') {
      document.getElementById(el).style.display = 'block';
      return true;
   }
   else if(typeof el == 'object') {
      for(var i = 0; i < el.length; i++) {
         if(typeof el == 'object') {
            hide(el[i].id);
         }
         else {
            hide(el[i]);
         }
      }
      return true;
   }
   return false;
}

function hide(el) {
   if(typeof el == 'string') {
      document.getElementById(el).style.display = 'none';
      return true;
   }
   else if(typeof el == 'object') {
      for(var i = 0; i < el.length; i++) {
         if(typeof el == 'object') {
            hide(el[i].id);
         }
         else {
            hide(el[i]);
         }
      }
      return true;
   }
   return false;
}

function getElementsByClassName(className) {  
   var retEls = [];
   var els = document.getElementsByTagName('*');
   for(var i = 0; i < els.length; i++) {
      if(els[i].className == className) {
         retEls.push(els[i]);
      }
   }
   return retEls
}

Hey everyone,

I remember once reading an article on positioning everything relative when doing a float site using CSS. The problem is, if I do something like:
css Code:
Original - css Code html *{ position:relative; }

  

  


 html *{


 position:relative;


 } 

It seems to only apply relative positioning to absolutely nothing. Then if I do something like:
css Code:
Original - css Code html * *{ position:relative; }

  

  


 html * *{


 position:relative;


 } 

It seems to apply anything that is an immediate child of <body> Now the real problem is, if I do something like:
css Code:
Original - css Code html * * *{ position:relative; }

  

  


 html * * *{


 position:relative;


 } 

It seems to only apply the relative positioning to grandchildren of <body>. That is to say children of children of <body>. IE:
html4strict Code:
Original - html4strict Code <body> <div><!-- not relative --> <p><!-- is relative --> </div> </body>

  

  


 <body>


 <div><!-- not relative -->


 <p><!-- is relative -->


 </div>


 </body> 

Is there way to easily set it up so that everything is relatively positioned?

Hello

I have a DIV (let's call it "the parent") which contains three child DIVs. Each of the children has some text in it. Neither the parent nor any of the three children have any special positioning attributes applied to them, and so the parent sizes just so that it wraps the children. So far so good.

Now I want another DIV child, which when visible will completly fill the parent (using the size the parent now has because of its other three children, not stretching the parent in any way).

I tried giving the parent "position:relative", and giving this fourth child "position:absolute; top:0; left:0; width:100%; height:100%", which works fine in FF but doesn't work in IE. I tried also "bottom:0; right:0" instead of the "width:100%; height:100%", still to no avail.

Is there a way to make this work in IE?

Is there maybe another way to make this without absolutely-positioning the fourth DIV?

Cheers,
Calius

Sample code follows:
Code:

<html>
<body>

This is a test<br />
<div style="width:400px; position:relative; border:1px solid red;">
	<div style="position:absolute; background-color:green; height:100%; left:0; top:0; width:100%;">COVER ALL</div>
	<div style="border:1px solid blue; margin-bottom:16px;">1</div>
	<div style="border:1px solid blue; margin-bottom:16px;">2</div>
	<div style="border:1px solid blue;">3</div>

</div>
This is a test<br />
</body>
</html>

Hey,

I've been doing a fair amount of research on centering a page vertically and horizontally with CSS, and before I begin constructing my page, I thought I'd get some input from you guys.

Basically, the page is going to look like this


Any advice would be greatly appreciated.

Thanks!

is it possible to center something vertically inside a container without the use of tables?

I know you use text-align to center horizontally, but what is used for vertical alignment? vertical-align doesn't work.


PHP Code:
<div style="width:100% height:100%; text-align:center;">

    <!-- code goes here -->

</div> 





thanks

goran.

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>

I need help aligning the flash block to the right of my site to the one on the left so that they are both on the same line.

gpostal.net is the website so you can see the flash blocks. See how one is at the bottom right? I'm trying to get that to the top right and closer to the one on the left.