troubleshooting Question

CSS Div alignment

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

The page has a <Div> with
'position: relative; top: 15px;'
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?


Allen in Dallas

+++++++++++begin code++++++++++++++++++++
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">`
<title> Div stack </title>
<style type="text/css">
div {font-family:arial; color:sienna;}
<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


+++++++++++end code++++++++++++++++++++
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