Solved

Center block with CSS

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

752 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