Changing position of two DIV tags via CSS

HTML & CSS
1

Hey all,

Let’s say I have the following markup:

<div class="parent">
    <div class="childOne">I'm the first child</div>
    <div class="childTwo">I'm the second child</div>
</div>

Whenever this renders in the browser I have the text of childOne directly above the text of childTwo. Using CSS is there a way to swap their positions without physically altering the markup? I feel like I’ve tried any number of combinations of floats and clears on the child classes but I’m coming up short.

Anyone have any suggestions?

2

There is no way to do what you are talking about without changing the “top” and “left” properties of the elements in question.

3

Try the latest CSS quiz: http://www.sitepoint.com/forums/showthread.php?t=719912.

4

I don’t have much experience with positioning properties because I always thought they were a taboo method of accomplishing this task. Is that true or will other developers not bat an eyelash at swapping a menu (childTwo) to the top of a header div (parent) by using the Top property? If it’s a pretty standard and accepted practice then I’ll use it!

Are there any ‘gotchas’ I need to watch out for when using these positioning properties or is it pretty straight-forward?

Thanks for your help so far! I appreciate it.

5

The main pitfall to be careful of is if you don’t know what the size of each element is. It’s easy enough to use absolute positioning, relative positioning or negative margins to change the displayed order of the blocks if you know what their heights are. But if you’ve got variable font sizes, that becomes more of a risk - particularly if there’s any chance that the text might spread onto two lines - unless you set a height on the blocks that will accommodate the largest plausible text size.

6

Or you could set scrollbars, but that wouuld possibly look nasty depending on the design.

7

When you say Variable font sizes, do you mean percentages? I’m using percentages… but the text shouldn’t ever span across multiple lines. I’m the one making the site and I’ll be the one editing the content. The text in this section will be short, like a organization name, a slogan and menu items.

I decided to just mock something up and test how H1 and H2 within childOne would act when the page was zoomed. H1 (font-size: 200%) and H2 (font-size: 175%) scaled normally. I then set the position property of both childOne and childTwo to Relative, and then adjusted their Top property so childTwo sat at the top of my Parent Div, and childOne sat at the bottom. In my browsers (IE8, Firefox and Chrome), zooming in and out makes everything scale nicely in relation to each other! The only time things look like crap is when I check ‘Zoom Text Only’ in Firefox, but that seems to break every damn page. :stuck_out_tongue:

Thanks for the suggestions and I appreciate all the advice. If anyone else has any suggestions or sees any problems in my current setup, please let me know!

8

Maybe use em units for the top values to handle text-zoom (I use text-zoom regularly, mostly decreasing the size) and then also set heights in em to keep the consistency if (I am) zooming the text. :slight_smile:

Anyway, whatever unit you use, set the height too to avoid text-zoom breaking the switch.

9

By variable font sizes, I mean particularly any text size that isn’t set in pixels but using % or em (or keywords, if you’re into that kind of S&M) – as IE users can change the text size without zooming the page if it isn’t in px. If they have a small window size and the largest text size, is it possible for the text to overflow the specified height (by being too tall a/o by wrapping onto another line)?