[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

CSS Div alignment

Posted on 2014-08-20
2
Medium Priority
?
166 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
0
Comment
Question by:Allen Pitts
2 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 40274822
Add display: inline-block; to the first div
And change margin-right to -350px
0
 

Author Closing Comment

by:Allen Pitts
ID: 40274861
Thanks
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

868 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