Three blocks in a row

Forum Moderators: not2easy

Message Too Old, No Replies

Three blocks in a row

Crump

4:30 am on Aug 2, 2006 (gmt 0)

I would like to have three div's next to each other:

Ś--- Div Link 1 ---Ś--- HEADER ---Ś--- Div Link 2 ---Ś

Almost like three columns. However, HEADER is a bigger font size than the two links. How can I set it up so that when HEADER is bigger, the two links vertical align? Right now, they are at the top. I've tried height:100% and vertical-align:middle, but no dice.

Any ideas?

nikhildev

9:24 am on Aug 2, 2006 (gmt 0)

Why dont you try using tables for this purpose. They are more effective and maitain their positioning. If you are so specific about DIVs, try creating a table and having divs inside the cells.

Crump

2:41 pm on Aug 2, 2006 (gmt 0)

I am trying to get away from tables. This is a positional requirement, not a tabular requirement. Although right now I do have tables, but there has got to be an easy way to do this with CSS.

Anyone else?

simonuk

3:00 pm on Aug 2, 2006 (gmt 0)

I must admit I'm not quite sure what you mean which may explain why others haven't answered.

copy this code and tell me what you want it to do from here:

above the <head> tag:


<style type="text/css">
<!--
#left, #right {
float: left;
width: 20%;
background-color: #009999;}#middle {
float: left;
width: 60%;
font-size: xx-large;
background-color: #FFFFCC;}-->
</style>

And below the <body> tag:

<div id="left">LEFT</div>
<div id="middle">MIDDLE</div>
<div id="right">RIGHT</div>

Crump

9:00 pm on Aug 2, 2006 (gmt 0)

In that code, the text is all aligned (vertically) toward the top.

I would like the text on the left and the right to line up in the middle on the bigger text.

This is how your code comes out (the middle column is three lines to simulate a larger font): the dashes are used for spacing:


left side Ś BIG FONT Ś right side 
----------Ś BIG FONT Ś----------- 
----------Ś BIG FONT Ś-----------

This is how I am trying to get it:


----------Ś BIG FONT Ś----------- 
left side Ś BIG FONT Ś right side 
----------Ś BIG FONT Ś-----------

Clear as mud, right?

Thanks for any help!

doodlebee

9:09 pm on Aug 2, 2006 (gmt 0)

if the left side and right side are only one line of text and no more, the easiest way to do it is to set the height and line height to be the same. For example:

#left, #right {
height:25px;
line-height:25px;}

This will cause the text to vertically align to center within the div.

However this only works for one line of text. If there is any line wrap at all, it won't work.

CSS1 specs do not have vertical alignment, unfortunately. So when you get into block displaying elements (like images or paragraphs), or more than one line of text, then vertical alignment is a lot harder to accomplish. The best way I've found to do it uses display:table (and some stuff that will make it work in IE, because IE will not recognize the "display:table" stuff), but it's dependent on knowing at least the height of an element - so if the height of the divs in question will stay at a certain height, then you're good (and search for "vertically align CSS jakpsatweb" for the tutorial on how to accomplish this). If the height of the header area is variable based on the length of one of the divs, you can *try* to make the heigh a little bit more flexible by doing it in EM's - but that'll only help if the text is enlarged by the end user - you'll need to use a table to get the effect you want.