Solved

Center block with CSS

Posted on 2014-07-23
2
227 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
[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 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
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.
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 …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

623 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