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

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 451
  • Last Modified:

css positioning using em values. How to get objects in different divs to align?

Hi, I'm trying to create a page using divs and css and get things to look right. I used to always just use absolute positioning without much issue but this is frowned upon (and for good reason I suppose as your page won't resize when changing font size etc in the browser).

Anyway, I am just trying to figure out how to easily get things to align if I'm using a 3 column layout for instance. If you look at the CSS below I've create two columns, the first of which has a paragraph in it and a ul (as specified in the leftcol section). The second has another ul in it. I'm trying to order things based on em sizing as this is supposed to be the best for when a user changes their font sizes.

However, if I try and implement the situation below, the tops of the two ul lists in each column do not align, even though I set the padding to 5em and 8em respectively, and then the paragraph in the leftcol has two lines with font size 1em so that should make 2em and as it's a block element it contains a line break (which is equal to 1 more em?) making 8em?

Either way, it doesn't match up, and the problem is the paragraph. Obviously adding it in there means that things don't add up to integer em values anymore, seems like it is slightly more.

How should I accomplish what I'm trying to do and what is going on with the above situation?

(also, one last thing... are you suppose to not use absolute and relative positioning with elements within the div (in theory) or are there no negative impacts of such a thing? Because of course then I could just not bother with this and absolutely position the elements... but then i suppose I lose the resizability?)
#leftcol {float:left; width:30%; height:500px; padding-top: 5em;}
#content {float:left; width:40%; height:500px; padding-top: 8em;}

/* leftcol */
#para1 {padding-left:6em; Font-Size:1em}
#ul1 {float:right; width:225px; list-style: none; padding: 1em;}

/* content */
#ulPeriod {float:left; width:120px; list-style: none; margin-left:10px;}

Open in new window

0
AidenA
Asked:
AidenA
  • 2
  • 2
2 Solutions
 
Tom BeckCommented:
I would use pixels for padding and percentage for font size. http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

The uls don't line up because the left column has 5em padding at the top and the content has 8em padding at the top, pushing the ul in that container further down.
0
 
Tom BeckCommented:
I think I just realized a miscommunication. Is the ul in the left column below the paragraph? If so, your approach is problematic. You should not try to predict ahead of time how much room a block of text will take up. There are too many mitigating factors--browser type, browser version, installed fonts, zoom level, text size, etc. Instead, if you want similar elements (uls) in adjoining containers to line up, get the two containers to line up first, then apply the same padding to both containers. So, in your case you could put two divs, one above the other, inside both the left and content columns. Put the paragraph in the upper left box, nothing in the upper right box, and the two uls in the lower boxes. As long as the upper two are the same height and the lower two have the same padding, the uls will line up.
0
 
DesignbyonyxCommented:
As someone who uses EMs for everything, I can say that you are a venture that will be hard to accomplish... the main reason being that different browsers calculate line-height (leading) differently.  It is virtually impossible to align two things in different columns without explicitly declaring a height on on elements... which provides for a fairly non-flexible layout.  Sorry to break it to you.

It's funny... last week I made attempt to align things in 2 different columns... and IE was an entire inch shorter than every other browser... all due to IE's calculations of line-height.
0
 
DesignbyonyxCommented:
If you really need things to line up, you are better off using a table (which is frowned upon).  Or, you could use a series of 3 column DIVs:

<div class="wrapper">
    <div class="threeCol clearfix">
        <div class="column first">column 1</div>
        <div class="column">column 2</div>
        <div class="column">column 3</div>
    </div>
    <div class="threeCol clearfix">
        <div class="column first">column 1</div>
        <div class="column">column 2</div>
        <div class="column">column 3</div>
    </div>
    <div class="threeCol clearfix">
        <div class="column first">column 1</div>
        <div class="column">column 2</div>
        <div class="column">column 3</div>
    </div>
</div>

Open in new window


.threeCol .column {
    float: left;
    width: 32.5%;
    margin-left: 1em;
}
.threeCol .first {
    margin-left: 0;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Open in new window

0
 
AidenAAuthor Commented:
ok thanks, have been looking at this the last couple days and using the flow layout with divs, it doesn't really seem to be designed to easily be able to align things that's for sure. I guess I'll go with inserting extra divs in there as tommyBoy suggests. I guess there's sometimes a bit of a difference between what you're supposed to do, and what you can easily do...
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now