DTP


 
Lively discussions on the graphic arts and publishing — in print or on the web


Go Back   Desktop Publishing Forum > General Discussions > Web Site Building & Maintenance

Reply
 
Thread Tools Display Modes
Old 12-12-2005, 07:52 PM   #1
CarlSeiler
Member
 
CarlSeiler's Avatar
 
Join Date: Oct 2005
Location: Denton, TX
Posts: 271
Default Vertical Alignment of DIVs

I've been playing with a three-column format. It's designed to have a 200px image at the top, but I threw that out in favor of a simple h1 for the top part (toptitle) instead.

But what I've found out is that it's difficult for me move the left and right columns (leftcontent and rightcontent DIVs) into position given that I don't plan to specify the top using px units. I'd like to use relative units such as em's, but how do I know how many em's to use?

The toptitle div contains an h1 with 0.5em padding on top and bottom. I'd think that I'd have to specify 2em for the top of the left and right columns (see the CSS in line 29 for example), except that I've got an h1 in the top part, and the leftcontent and rightcontent DIVs clearly don't base their "em" on the height of the h1 in toptitle.

Finally, I just fiddled around and got 4.5em to work, but logically other than knowing that h1 has some relationship with the default text size, I don't know if that's really the way to go.

This probably doesn't make any sense at all. It looks OK the way it is, but I don't like the idea that "top: 4.5em;" is just pulled out of a hat. I'd like to specify that the height should be based on the height of the toptitle div.

Is this making sense at all?

The page is at http://overanalysis.org/words/index.html
CarlSeiler is offline   Reply With Quote
Old 12-13-2005, 01:05 AM   #2
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by CarlSeiler
I've been playing with a three-column format. It's designed to have a 200px image at the top, but I threw that out in favor of a simple h1 for the top part (toptitle) instead.

But what I've found out is that it's difficult for me move the left and right columns (leftcontent and rightcontent DIVs) into position given that I don't plan to specify the top using px units. I'd like to use relative units such as em's, but how do I know how many em's to use? (...)
The problem is with moving from a fixed-height "top title" to a box that contains an h1 heading. Look just at that and you'll see that you cannot even safely specify the height of such a box in ems: if the length of the heading means it will wrap over two (or more) lines, the height of the heading will suddenly be a lot more - and that happens very soon if a visitor needs to increase their browser's font size a lot to make it legible for them. Text should be able to expand and essentially you cannot know how many lines a block of text will consist of, which means you cannot position anything below that absolutely.

Your page structure however already has a div with a maincontent id which holds the three columns. If #maincontent isn't positioned absolutely, the whole div will move down or up when the top title div grows or shrinks.

You then need a different approach for the three columns within that div: they can't be positioned absolutely (vertically on the page) but must be positioned relatively within the containing #maincontent div.

That's the principle, but it may be a bit (or very) tricky to work out, since the order of the column divs is important as well (in order to put the content before the sidebars in the text stream). Try to find a three-column model that uses relative positioning only - it may involve an extra enclosing div.

Another possible approach is to make the top title box high enough to hold two lines (specify the height in ems) but you may not like the look of that unless you always "use" the whole space, for instance by means of a background image. (But it will still break for longer headings that need three lines though that risk is much smaller.) This is basically the approach I've taken with my (two-column) layout for my travel blog (see sig) but a two-column layout is a lot easier to make "fluid" than a three-column one.

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Old 12-13-2005, 03:51 AM   #3
CarlSeiler
Member
 
CarlSeiler's Avatar
 
Join Date: Oct 2005
Location: Denton, TX
Posts: 271
Default

The #maincontent div that you see there was my attempt. It wasn't there until I started trying to come up with ways to do this using relative units. What I was attempting to do by adding the #maincontent div around it all was specify a vertical-align: top; to bring all the included divs to the top within the #maincontent div. That didn't seem to work, and perhaps I don't understand how the vertical-align thing works.

I'll look at your blog and see. Thanks.
CarlSeiler is offline   Reply With Quote
Old 12-13-2005, 04:13 AM   #4
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by CarlSeiler
The #maincontent div that you see there was my attempt. It wasn't there until I started trying to come up with ways to do this using relative units. What I was attempting to do by adding the #maincontent div around it all was specify a vertical-align: top; to bring all the included divs to the top within the #maincontent div. That didn't seem to work, and perhaps I don't understand how the vertical-align thing works.
"vertical-align" works only for inline content, and has no effect on blocks (a div is a block). So you cannot use it to "move a block to the top" as you seem to be trying. The only element where vertical-align really works is on a table cell (which has default "middle" for vertical alignment) to ensure the (inline) content starts always at the top of the cell even if it leaves space below it due to the height of neighboring cells.

Still, your #maincontent "wrapper" div is the right idea but like I said you may need extra wrapper divs to do a 3-column layout with relative positioning. Scour the CSS layout sites for examples... You could try a Google for [CSS 3-column relative] to get started.

Column layouts can be really tricky, the more so as you add columns (more than 2)...

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Old 12-13-2005, 09:02 AM   #5
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

Quote:
Originally Posted by CarlSeiler
But what I've found out is that it's difficult for me move the left and right columns (leftcontent and rightcontent DIVs) into position given that I don't plan to specify the top using px units. I'd like to use relative units such as em's, but how do I know how many em's to use?
Why not use pixels? Ems or percents work well for horizontal measurement but not necessarily for all vertical measurements. I usually use pixels for the top bar on a page.

I don’t use position much. But I do use three columns that float. With floating columns top-alignment of the sidebars is fairly easy if you use the same header for the left and right columns (I define a #left h2 and a #right h2, a bit smaller than the one in the basic h2). Then they align, and you can fiddle a bit to make them top align with the head in the center column.

If you prefer not to do that, use a border-top and adjust it (in px padding) so it aligns at the same point in both columns. (The px offset would vary by typesize in use.) Then make it the same color as the background-color for the page so it does not show.

Quote:
… the leftcontent and rightcontent DIVs clearly don't base their "em" on the height of the h1 in toptitle.
No, they are based on their parent, which without parsing your page, is probably body. They are also affected by line-height.

Why do you use positioning? Just curious. I find it much more fiddly than floats. Both methods have their idiosyncracies, of course.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 12-13-2005, 09:17 AM   #6
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by ktinkel
Why not use pixels? Ems or percents work well for horizontal measurement but not necessarily for all vertical measurements. I usually use pixels for the top bar on a page.
Because when you have a page heading consisting of text rather than an image the vertical size is not fixed but dependent on the visitor's choices wrt browser and font size. As I've explained, it's not even fixed in terms of ems as a longer text and/or larger font size could easily cause the heading to wrap over two or more lines. If the box at the top doesn't have a fixed size, you cannot absolutely position any element below that.

Quote:
Originally Posted by ktinkel
I don’t use position much. But I do use three columns that float. With floating columns top-alignment of the sidebars is fairly easy if you use the same header for the left and right columns (I define a #left h2 and a #right h2, a bit smaller than the one in the basic h2). Then they align, and you can fiddle a bit to make them top align with the head in the center column.
The disadvantage of that is that if the center column is the main text it can not be first in the text stream and then for accessibility you'd need an extra "skip" link to jump to the main content.

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Old 12-13-2005, 12:48 PM   #7
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

Quote:
Originally Posted by iamback
Because when you have a page heading consisting of text rather than an image the vertical size is not fixed but dependent on the visitor's choices wrt browser and font size. As I've explained, it's not even fixed in terms of ems as a longer text and/or larger font size could easily cause the heading to wrap over two or more lines.
But it can be fixed in pixels if you allow enough space for header text set in pixel sizes (which is no worse than an image of type). Then it would work most of the time.

Quote:
Originally Posted by iamback
If the box at the top doesn't have a fixed size, you cannot absolutely position any element below that.
Well, you can. Makes a mess sometimes. I would float them, myself.

Quote:
Originally Posted by iamback
The disadvantage of [floating rather than positioned columns] is that if the center column is the main text it can not be first in the text stream and then for accessibility you'd need an extra "skip" link to jump to the main content.
That makes sense, in at least some cases. If they are all equal in importance, though, floating is easier to manage.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 12-13-2005, 01:47 PM   #8
Daudio
Member
 
Daudio's Avatar
 
Join Date: Aug 2005
Location: Royal Oak, Detroit suburb
Posts: 174
Default

KT,

Quote:
I would float them, myself

Could you explain a little of what you mean by 'float' in the vertical ?

I know of 'float right' and 'float left', so float has a formal horizontal meaning, but perhaps you mean a *vertical* float in a more generic sense...

   
__________________
Dave

DaveAyers.com, Brass Backshop Forum
Daudio is offline   Reply With Quote
Old 12-13-2005, 01:51 PM   #9
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

Quote:
Originally Posted by Daudio
Could you explain a little of what you mean by 'float' in the vertical ?
Float: left (or : right) is what I meant. Guess I wasn’t being clear enough.

I was suggesting that he use float rather than position to arrange the three columns. Marjolein has mentioned some problems with my approach, but it seems there are also problems with position. But floating is usually easier.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 12-13-2005, 05:57 PM   #10
CarlSeiler
Member
 
CarlSeiler's Avatar
 
Join Date: Oct 2005
Location: Denton, TX
Posts: 271
Default

Marjolein answered both questions the same as I would have. :-)
CarlSeiler is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS alignment problem LoisWakeman Web Site Building & Maintenance 4 01-10-2007 04:20 AM
CSS vertical navigation bar dthomsen8 Web Site Building & Maintenance 10 03-14-2006 06:41 AM


All times are GMT -8. The time now is 10:10 AM.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Contents copyright 2004–2014 Desktop Publishing Forum and its members.