?
Solved

Center block with CSS

Posted on 2014-07-23
2
Medium Priority
?
230 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:Allen Pitts
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
2 Comments
 
LVL 9

Accepted Solution

by:
Trenton Knew earned 2000 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

718 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