• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 234
  • Last Modified:

Center block with CSS

Hello expert,

I have read several places that to center a block
with css one should use
margin-left: auto; margin-right: auto;
but it doesn't seem to work in the code below.

Thanks

Allen in Dallas

PS
In IE 8 the Javascript the date writes but the centering does not work.
In FireFox 30 the centering works but the JavaScript date does not write.

++++++++begin code++++++++++++++++

<HTML>
<HEAD>
<title> JS Date </title>
<style type="text/css">
div {font-family:arial; color:sienna;}
</style>
</HEAD>
<BODY>
<font face="arial" size="4">This writes
the date. <br />It is an example of inline Javascript.</font></br >
<div style = "background-color: yellow; width: 600px; height: 200px; margin-left: auto; margin-right: auto;">

<div style = "background-color: #004280; color: #FFFFFF; width: 400px; height: 100px; text-align: center; margin-left: auto; margin-right: auto;">

<script type="text/javascript">
window.onload=function(){

var now = new Date();
document.getElementById('newDateID').innerHTML = now;
}
</script>
<p id = "NewDateID"></p>
</div>
</div>

</body>
</html>
++++++++end code++++++++++++++++
0
Allen Pitts
Asked:
Allen Pitts
  • 2
1 Solution
 
Trenton KnewOwner / Computer WhispererCommented:
in order for this to work, you need to define the width of the parent container, (in this case, the body tag)  

<body style="width:100%"> or <body style="width:!Valuepx">

if that still doesn't work, you might need a position:relative and/or to contain the entire page in a <div>
0
 
Trenton KnewOwner / Computer WhispererCommented:
also, check your case on the div ID.  the java code calls for "newDateID" but the element name is "NewDateID"
0

Featured Post

[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now