Divs not lining up (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

Nicole -> Divs not lining up (5/4/2009 6:33:02)

I'm very slowly redesigning a clients existing site from a tables layout to a CSS layout.

The opening page will look similar to this, only I've decided that the text at the top of the page looks better in a div with another colour background and placed above the column labeled "Latest News" so the div configuration should look like this.

The thing is, when I add content to the sidebar the div called "bbb" drops down to be in line with div "ccc" like this. I've no idea why it's doing this and it's taken me all afternoon to discover what was actually making it drop like that.

Wondering whether some of the content was somehow too wide, I've changed the width of everything in the sidebar div, but div "ddd" is still dropping.

I'm at a loss and it's now driving me spare. Does anyone else have any ideas?



Tailslide -> RE: Divs not lining up (5/4/2009 7:52:55)

You've got a different margin system with your div #aaa so it expands at a different rate and forces #bbb down.

Replace what you've got for #aaa with this: 

width: 47.5%; float: left; border: 1px dashed #bbb; margin: 16px 0% 12px 1.5%; padding: 0 0 12px 0; background: #e0e0e0; z-index: 2; clear: none;



Nicole -> RE: Divs not lining up (5/4/2009 19:35:14)

Thank you Tail!

I may not have ever discovered that, or at least not for a long while as usually when things go wrong I delete things (or add them) one at a time. I'm not sure I'd found this as they were both to do with the margin.

I was going to change every px measurement in the css file to an em measurement. Is this considered better these days still or not?



Tailslide -> RE: Divs not lining up (5/5/2009 1:56:01)

It depends what the px is on. PX is fine for stuff that doesn't need to expand (like photos or divs with nothing but a photo in.

I wouldn't use it for div heights. You could use it for a div width in a fixed width layout.

I tend to use % for div widths on fluid designs (or actually on fixed width layouts). I also use % for font sizing. I use ems for containing div widths on elastic layouts but again go back to % for widths of divs within that.

Even on fluid designs I tend to contrain the max-width of a layout using PX (usually around 1200px wide).



d a v e -> RE: Divs not lining up (5/5/2009 10:13:53)

nicole -you might find this useful on font sizing
http://files.jeffcroft.com/presentations/fowd_april_2007/JeffCroft_FOWD_Workshop_Elegant_Web_Typography.pdf

especially the bit about setting the body to 62.5%; from there you can use ems in increments that match pixel (or was it point?) sizes e.g. 1.6em = 16px



Nicole -> RE: Divs not lining up (5/5/2009 18:43:15)

Thanks Dave, I'll take a look at that link. I always thought 1em=16px?

Tail, thanks also. I didn't know there was something such as max-width. Makes sense as screens are getting bigger and wider.



d a v e -> RE: Divs not lining up (5/5/2009 23:06:16)

"The 62.5% trick

In May of 2004, Richard Rutter wrote a seminal piece in web
typography in which he outlined a trick that helps make this
math easier. Because typical browsers default their text size to
16px, one can set the font-size value of the body element to
62.5%, effectively resetting the default to 10px.

From there, Rutter suggests using ems for font-size, which acts
as a scaling factor. This makes for simpler math: 15 pixels is
1.5em. 18 pixels is 1.8em. Nine pixels is 0.9em. And so forth.

However, this only remains this simple if no inheritance is
involved. As in our paragraph-inside-a-list-item example
before, things still get complicated when items with different
font-size values are nested."



TexasWebDevelopers -> RE: Divs not lining up (5/6/2009 9:08:55)

Also a minor usability issue with that technique in IE. If users select "smallest" text in the IE toolbar the text becomes unreadable. However, most folks re-size text sizes upwards, not downwards.



Tailslide -> RE: Divs not lining up (5/6/2009 9:48:17)

It's only 16px on a PC - it's much smaller on a mac.

Personally I've had most reliable results using 100% on the body rule and then 76% on the main containing div and scaling up and down as necessary using % from there. Certainly in the past IE used to have issues with ems on fonts - to be honest I don't know if that's still the case but it's too much like hard work to find out!



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125