Solved

Horizontal Align 3 divs

Posted on 2014-12-31
4
110 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 250 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 250 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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

757 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now