We help IT Professionals succeed at work.

CSS Div alignment

Allen Pitts
Allen Pitts asked
on
197 Views
Last Modified: 2014-08-20
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
Comment
Watch Question

CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Allen PittsBusiness analyst

Author

Commented:
Thanks
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.