troubleshooting Question

CSS Div alignment

Avatar of Allen Pitts
Allen PittsFlag for United States of America asked on
JavaScript
2 Comments1 Solution200 ViewsLast Modified:
Hello Experts,

The page has a <Div> with
'position: relative; top: 15px;'
and
a second  <Div> with
'position: relative; top: 15px;'

I thought they would be aligned
vertically as shown in gif marked
'Div alignment wanted"

Instead it places the second div below
the first as in  gif marked
'Div alignment existing"

I tried using 'z-index' to separate them
but no luck.

How can I get the two blocks to be the sane distance from
the top?

Thanks

Allen in Dallas






+++++++++++begin code++++++++++++++++++++
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`
<HEAD>
<title> Div stack </title>
<style type="text/css">
div {font-family:arial; color:sienna;}
</style>
</HEAD>
<BODY>
<div style = "background-color: #004280; color: #FFFFFF; width: 100%; height: 130px; text-align: center; margin-left: auto; margin-right: auto;">

<div id="cmsDateTime" style = "margin-left: auto; margin-right: auto; width: 200px; text-align: center; color: white; position: relative; top: 15px; background-color: #0B7CE5;">
WriteDate text</div>
<div style = "float: right; color: white; position: relative; top: 15px; background-color: #66B3FA; width: 350px; z-index:100;">
UserName text
</div>

</div>


</body>
</html>
+++++++++++end code++++++++++++++++++++
Div-stack-b.gif
Div-stack.gif
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 2 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros