Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Using CSS to align two html elements

Using CSS to align two html elements

Problem

I have two elements,

and . I changed the padding on both elements so that they are aligned on the page. This works unless I scale the browser window, in which case the padding on the two elements is slightly out of sync.

Here's the html code:

Welcome to the SCEC

Here's the CSS code:

 h1{
    padding: 2em 0em .2em .5em;
    color: #FDB813;
    font-family: Georgia;
    font-weight: 500;
    font-size: 2.5em;
    font-style: italic;
    text-align: center;
    background-color: #004A98;
    width: 60%;
    margin-left: 6.5%;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    -moz-border-top-left-radius: 15px;
    -moz-border-bottom-left-radius:15px;
    float: left;
    }

 #SCEC_logo{
    background-color: #004A98;
    padding: .93em 2.5em .93em 0;
    }

http://jsfiddle.net/isherwood/BHy3u

In the browser's default size, the elements are perfectly lined up, but when I scale it, the blue padding on the

element is slightly longer on the bottom than the padding on the element.

I also noticed that in IE, the element is slightly longer in the default screen size.

How do I adjust the padding so that it is lined up in any browser at any screen size?

Problem courtesy of: Deena

Solution

Seems like applying your styles to the header would be vastly simpler:

http://jsfiddle.net/isherwood/BHy3u/5

header {
    padding: 2em .5em;
    background-color: #004A98;
    width: 60%;
    margin-left: 6.5%;
    border-radius: 15px 0 0 15px;
    float: left;
}
header h1 {
    color: #FDB813;
    font-family: Georgia;
    font-weight: 500;
    font-size: 2.5em;
    font-style: italic;
    text-align: center;
    padding: 0; 
    margin: 0;
}
header img {
    float: right;
}
Solution courtesy of: isherwood

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Using CSS to align two html elements

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×