Solved

Center block with CSS

Posted on 2014-07-23
2
214 Views
Last Modified: 2014-07-24
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
Comment
Question by:9apit
  • 2
2 Comments
 
LVL 9

Accepted Solution

by:
Trenton Knew earned 500 total points
ID: 40215283
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
 
LVL 9

Expert Comment

by:Trenton Knew
ID: 40215310
also, check your case on the div ID.  the java code calls for "newDateID" but the element name is "NewDateID"
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question