CSS - Centering Objects Within A Div Tag?

I used the CSS Tricks dot com guide to make my menu bar items equidistant from one another and it works perfectly in Chrome, Firefox and IE8.... but not IE7 (or IE8 Compatibility Mode). BTW the guide example works fine in IE7 but I'm doing something only ever so slightly different. I really don't have a clue what to do, so would appreciate some help.

Here's the relevant CSS code I'm using:

Quote:
#content {
width:1000px;
margin-left:auto;
margin-right:auto;
margin-top:0;
margin-bottom:0;
padding:0;
padding-top:230px;
}

/* Menu */

#menu {
height:40px;
padding:0;
padding-left:40px;
padding-right:40px;
display:block;
}

#menu a {
margin:0;
padding:0;
display:block;
float:left;
}

#menu a span {
position:relative;
display:block;
z-index:-1;
}

#menu-row {
margin: -40px 0 0 150px;
padding: 0;
height: 40px;
}
#menu-row div {
width: 33.3%;
float: left;
}
#menu-row div a {
float: right;
}

#menu .home {
background: url(images/menu-home.png) 0 0 no-repeat;
display: block;
width: 150px;
height: 40px;
outline: none;
}

#menu .science {
background: url(images/menu-science.png) 0 0 no-repeat;
display: block;
width: 150px;
height: 40px;
outline: none;
}

#menu .radio {
background: url(images/menu-radio.png) 0 0 no-repeat;
display: block;
width: 150px;
height: 40px;
outline: none;
}

#menu .club {
background: url(images/menu-club.png) 0 0 no-repeat;
display: block;
width: 150px;
height: 40px;
outline: none;
}


and HTML

Quote:
<div id="content">
<div id="menu">
<a href="#" class="home"><span>Home</span></a>
<div id="menu-row">
<div><a href="#" class="science"><span>Science</span></a></div>
<div><a href="#" class="radio"><span>Radio</span></a></div>
<div><a href="#" class="club"><span>Club</span></a></div>
</div> <!--/movers-row -->

</div> <!--/menu -->


All the links in the menu-row div are shifted up vertically from the first link in IE7 and I don't know why?

Hello,

In CSS is there a way to tell an object to extend the full height and width of its parameters without specifying height and using absolute positioning?

Thanks,

Andy

Hi, I'm new here and hope someone can help! I wasn't sure whether to post this in the CSS or Flash forum; it's a problem caused by Flash which I suspect needs some clever CSS to resolve.

My new website is carolineofbrunswick (dot) co (dot) uk. As you can see, there's a ton of blank space off to the right of the pages, and I can't figure out how to get rid of it.

It's caused by the Flash objects in the right-hand column. Changing the width attributes on those Flash objects just causes them to not appear at all, though the blank space still exists.

Can anyone help?

Cliff

Hi all, this is my CSS:

Code:

body {
	font-family:arial;
	font-size:14px;
	background-color:#FFFFFF;
	margin: 0;
    padding: 0;
}

.mainbar {

	position:absolute;
	height:100%;
	width:600px;
	display:block;
	background-color:#F2F2F2;
	top:0px;
	bottom:0px;
	z-index:0;
	border-top: 0px solid #000000;
	border-right: 1px solid #000000;
	border-bottom: 0px solid #000000;
	border-left: 1px solid #000000;
}

.contact {
	position:absolute;
	display:block;
	height:40px;
	width:600px;
	background-color:#FFFFFF;
	top:80%;
	bottom:0px;
	z-index:0;
	border-top: 1px solid #000000;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	border-left: 1px solid #000000;
}

.logo { 
	position:absolute;
	display:block;
	height:200px;
	width:600px;
	background-color:#CCCCCC;
	top:10%;
	bottom:10%;
	border:1px solid #000000;
	z-index:2;
}

.logoborder {

	border-top: 0px solid #000000;
	border-right: 1px solid #000000;
	border-bottom: 0px solid #000000;
	border-left: 1px solid #000000;
	
}

Now how do I go about centering all of this? I have put many frustrated hours into this, and have tried everything that could have a possibility of working but have come out with nothing. Any help would be appreciated!

Please, I have read other forum posts and it is not clear what to do, so treat me like i'm 5 years old!!!

Thanks!

Jack.

im trying to center this div but im not to sure on how to do it
Code:

<style type="text/css">
div.img
  {
  margin:2px;
  border:1px solid #0000ff;
  height:auto;
  width:auto;
  float:left;
  text-align:center;
  }
div.img img
  {
  display:inline;
  margin:3px;
  border:1px solid #ffffff;
  }
div.img a:hover img
  {
  border:1px solid #0000ff;
  }
div.desc
  {
  text-align:center;
  font-weight:normal;
  width:120px;
  margin:2px;
  }
</style>
</head>
<body>

<div class="img">
  <a target="_blank" href="klematis_big.htm">
    <img src="klematis_small.jpg" alt="Klematis" width="110" height="90" />
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis2_big.htm">
    <img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" />
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis3_big.htm">
    <img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" />
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis4_big.htm">
    <img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" />
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

Hi,
i am new to CSS and want to know about how to center a div tag
for example i have the following code
Code:

<div style="">


</div>

if i want to place this div in the middle of the browser window that is from equal distance from left right top bottom what will i have to put inside the style attributes.

Please recommend

Regards
ltoso

Hi,

This is my first css only layout and I am trying to centre the navigation. But it wont.

Any suggestions?

http://www.wnv2.com/v9.htm <<link here

CSS File:
Code:

/* CSS Document */
body {
background-image:url(bg.jpg); background-repeat: repeat-x;
background-color:#65B240;
margin:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}

/*---------- Divs ------------*/

#wrapper {
    margin: 0px;
    padding: 0px;
    width: 600px;
}

#header {
    margin: 0px;
    padding: 0px;
    width: 600px;
    height: 85px;
    background-image:url(top.jpg);
}

#navigation {
    margin: auto;
    padding-left: 30px;
	padding-right: 30px;
	padding-top: 0px;
	padding-bottom: 0px;
    width: 540px;
    height: 25px;
	text-align:center;
	
}

#navigation ul {
    margin: 0px;
    padding: 0px;
	list-style-type: none;
	background-color:#DDDDDD;
}

#navigation ul {
	display: block;
	float:left;
}

#navigation li, #navigation li a {
	color:#59933E;
	font-weight:bold;
	letter-spacing:1px;
	height: 25px;
	display: block;
	margin: 0 2 0 2;
	float:left;
}

#navigation .left_nav {
    width: 22px;
    height: 25px;
    display: block;
	background-image:url(nav_left.jpg);
}

#navigation .right_nav {
    width: 22px;
    height: 25px;
    display: block;
	background-image:url(nav_right.jpg);
}

#middle{
background-image:url(middle.jpg);
background-repeat: repeat-y;
width:600px;
}
#navigation .spacer {
    width: 5px;
    height: 5px;
    display: block;
	background-image:url(nav_spacer.gif);
}

#contentswrapper {
    margin: 0px;
	padding: 5 55 5 55; 
    text-align: left;
    width: 490px;
}
#bottom {
	height:90px;
	width:600px;
	background-image:url(bottom.jpg);
}

HTML: View Cource

Thanks

This list is a navigation bar that displays tabs horizontally. I can't seem to figure out what properties I need to use to center it correctly.

I have 2 problems:

1. How can I get these list items centered?
2. the second level seems to have problems displaying horizontally in IE. How can I fix it?

Code:

<div id="tablenavcontainer">
  <div id="navcontainer">
    <ul>
			<li><a href="/doctors/enroll/" rel="self" class="" id="purple" name="patientenroll">Enroll Patient</a></li>
			<li><a href="/doctors/patients/" rel="self" class="" id="current" name="doctorspatients">My Patients</a></li>
			<li><a href="/doctors/lab/" rel="self" class="" id="green" name="doctorlab">Lab</a></li>
			<li><a href="/doctors/pharmacy" rel="self" class="" id="yellow" name="doctorpharmacy">Pharmacy</a></li>

			<li><a href="/doctors/tools/" rel="self" class="" id="red" name="doctortools">My Office Tools</a></li>
			<li><a href="/doctors/home/" rel="self" class="" id="graphite" name="doctorhome">Home</a></li>

    	<ul>
				<li><a href="/doctors/patients/currentchart.html" rel="self" id="currentchart" name="currentchart" >Current Chart</a></li>
				<li><a href="/doctors/patients/labhistory.html" rel="self" id="labhistory" name="labhistory" >Lab History</a></li>
				<li><a href="/doctors/patients/symptomhistory.html" rel="self" id="symptoms" name="symptoms" >Symptom History</a></li>

				<li><a href="/doctors/patients/prescriptionhistory.html" rel="self" id="prescriptions" name="prescriptions" >Prescription History</a></li>
				<li><a href="/doctors/patients/reports.html" rel="self" id="reports" name="reports" >Restore Reports</a></li>
				<li><a href="/doctors/lab/ordertesting.html" rel="self" id="ordertest" name="ordertest" >Order Testing</a></li>
				<li><a href="/doctors/pharmacy/prescribe.html" rel="self" id="orderrx" name="orderrx" >Prescribe</a></li>
				<li><a href="/logout.html" rel="self" id="" name="" >Log Out</a></li>
	    </ul> 
     </ul>

    <br style="clear: both;" />
    
  </div>
  </div>

Hi there,

I am trying to center a div within a div. The container div needs to stretch 100% width. It works in FF, but not IE.

Any ideas?
This is my code:

PHP Code:
#top_bar{
background-image: url('img/top_bar.jpg');
height: 54px;
font-family: arial;
font-size: 14px;
color: #ffffff;
width: 100%;
}



#top_bar_content{
padding: 18px 0 10px 0px;
width: 870px;
margin: 0 auto;
position: relative;
} 

Hey. I'm having issues with getting my page to center in IE7 using
margin: auto;
It works fine in firefox.

The page is at http://jbench.co.uk:81/. The CSS is at http://jbench.co.uk:81/css/css.php .

The section where i think the problem is:

CSS Code:
Original - CSS Code #page { width: 900px; margin: 0 auto; padding: 14px 3px; min-height: 250px; font-size: 1.2em; }

  

 #page {


  width: 900px;


  margin: 0 auto;


  padding: 14px 3px;


  min-height: 250px;


  font-size: 1.2em;


 } 

Any help's appreciated.

Hey guys, I'm having trouble centering div boxes on my page, wondering if anyone can help.

I have tried using {margin: 0 auto;} which works fine, but when the scrollbar appears on the page it knocks it off balance and the other content on the page becomes mis-aligned. I have also tried setting left margins to push the div to the middle, but I figured this would cause problems and wouldn't look right to people using higher than 1024x768 resolutions.

Is there any other way?

Now while I did manage to work this out with margins and paddings, I have to ask how to do it properly.

It's very basic. You have blank page. No wrappers no nothing.

Then 1 div, holds, 1 ul, with 20 li.

The div has specified width. How to center the ul inside the div?

I need the UL to NOT have specified width since I'll be adding more items to it over time.

Thanks!

How can I, let's see how to say this. Align text to the middle of a div (up and down)... not really a center


Normal:

________________________________
Text

________________________________



After:
________________________________

text
________________________________



THANKS