Divs not lining up

	Home Register Search Help Login

Recent Posts
Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Sponsors
Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.
Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.
Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Divs not lining up

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Divs not lining up

Page: [1]


Nicole Posts: 2959 Joined: 9/15/2004 From: Sydney, Australia Status: offline	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? _____________________________ ". . . and God created man in his image." errr, shouldn't that be "and man created God in his image'?


Tailslide Posts: 6692 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	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; _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to Nicole)


Nicole Posts: 2959 Joined: 9/15/2004 From: Sydney, Australia Status: offline	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? _____________________________ ". . . and God created man in his image." errr, shouldn't that be "and man created God in his image'? (in reply to Tailslide)


Tailslide Posts: 6692 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	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). _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to Nicole)


d a v e Posts: 4348 Joined: 7/24/2002 From: England (but live in Finland now) Status: online	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 _____________________________ David Prescott Gekko web design (in reply to Tailslide)


Nicole Posts: 2959 Joined: 9/15/2004 From: Sydney, Australia Status: offline	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. _____________________________ ". . . and God created man in his image." errr, shouldn't that be "and man created God in his image'? (in reply to d a v e)


d a v e Posts: 4348 Joined: 7/24/2002 From: England (but live in Finland now) Status: online	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." _____________________________ David Prescott Gekko web design (in reply to Nicole)


TexasWebDevelopers Posts: 722 Joined: 2/22/2002 From: Dallas, TX Status: offline	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. _____________________________ Follow us on TWITTER (in reply to d a v e)


Tailslide Posts: 6692 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	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! _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to TexasWebDevelopers)