?
Solved

Horizontal Align 3 divs

Posted on 2014-12-31
4
Medium Priority
?
147 Views
Last Modified: 2014-12-31
Can someone help me align the three divs in the header on this site: http://rosemountata.com/new_site/default.asp
Rosemount ATA


The first two are fine but the far right one is not.  If you could explain the concept that would be awesome as well.

Thanks!
0
Comment
Question by:Bob Schneider
  • 2
4 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 1000 total points
ID: 40525643
Change the parent block div's to display:inline-block and remove the margins.

Then just adjust the widths so they fit the full width.
0
 

Author Comment

by:Bob Schneider
ID: 40525675
That helped a great deal...thanks.  But the table on the right is still sitting a little low.
0
 
LVL 18

Assisted Solution

by:nap0leon
nap0leon earned 1000 total points
ID: 40525831
I find "float:left" works well in these situations.
<div style="padding: 0px 0px 0px 10px; text-align: left; width: 440px; float: left; display: inline-block;">
<div style="font-size: 0.75em; color: rgb(0, 0, 0); float: left; display: inline-block; width: 160px;">
<div style="width: 180px; font-size: 0.75em; color: rgb(255, 255, 255); margin-left: 15px; float: left; display: inline-block;">

Open in new window

0
 

Author Closing Comment

by:Bob Schneider
ID: 40525927
Very helpful!  Thank you!!
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

809 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