HOME | DD

Description
About: this is a basic 3-column-layout using display:inline-block and relative block-sizes.
Someone asked me in a note to fill the blank space left and right of a thumb which was centeres in a journal with text.
When using is, don't write blanks/new lines between and the following
as this blank/new line will also be shown between the columns.
As the CSS is pretty simple I just mention the vertical-align-property: it sets how a div is vertically aligned to it's neighbor text/div elements. "top" will align the top-lines, bottom the bottom-lines, middle will vertically center this element. it doesn't affect the div's content.

HTML::

this is a test.
If you see this, I made the mistake of submitting.

This should be the first collumn. e.g. Requests are open:

Isn't that a nice thumb? well, I'm just writing random text, so I can see this example... Well... what else to say... I just hope this text will preceed the normal text-height of this row, so you/I can see the overflow-behavior.

CSS::

.firstColumn{width:20%;display:inline-block;text-align:right;vertical-align: top;}
.secondColumn{width:50%;display:inline-block;text-align:center;vertical-align: top;}
.thirdColumn{width:20%;display:inline-block;text-align:left;vertical-align: top;}

Edit: For Non-Core members there is a nice description here:
www.deviantart.com/simplysilen…

Summary:
Two-Column way:
70% Text
30% Text

You can change -70 in the class name to one out of 70, 65, 60, 35. switch -ll and -rr to switch column sizes left and right. Leave out the split-x part to get 50%
To make 3 columns, nest them:
32.5% Text
32.5% Text
35% Text

Description
About: this is a basic 3-column-layout using display:inline-block and relative block-sizes.
Someone asked me in a note to fill the blank space left and right of a thumb which was centeres in a journal with text.
When using is, don't write blanks/new lines between and the following
as this blank/new line will also be shown between the columns.
As the CSS is pretty simple I just mention the vertical-align-property: it sets how a div is vertically aligned to it's neighbor text/div elements. "top" will align the top-lines, bottom the bottom-lines, middle will vertically center this element. it doesn't affect the div's content.

HTML::

this is a test.
If you see this, I made the mistake of submitting.

This should be the first collumn. e.g. Requests are open:

Isn't that a nice thumb? well, I'm just writing random text, so I can see this example... Well... what else to say... I just hope this text will preceed the normal text-height of this row, so you/I can see the overflow-behavior.

CSS::

.firstColumn{width:20%;display:inline-block;text-align:right;vertical-align: top;}
.secondColumn{width:50%;display:inline-block;text-align:center;vertical-align: top;}
.thirdColumn{width:20%;display:inline-block;text-align:left;vertical-align: top;}

Edit: For Non-Core members there is a nice description here:
www.deviantart.com/simplysilen…

Summary:
Two-Column way:
70% Text
30% Text

You can change -70 in the class name to one out of 70, 65, 60, 35. switch -ll and -rr to switch column sizes left and right. Leave out the split-x part to get 50%
To make 3 columns, nest them:
32.5% Text
32.5% Text
35% Text