Dediggefedde on DeviantArthttps://www.deviantart.com/dediggefedde/art/3-Column-CSS-snippet-484133666Dediggefedde

Deviation Actions

Dediggefedde's avatar

3 Column CSS snippet

By
Published:
2.7K Views

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:
<div class="mods-hh split-70"><div class="mods-column-ll">70% Text</div><div class="mods-column-rr">30% Text</div></div>
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:
<div class="mods-hh split-65"><div class="mods-column-ll"><div class="hh"><div class="ll">32.5% Text</div><div class="rr">32.5% Text</div></div></div><div class="mods-column-rr">35% Text</div></div>
Image size
625x871px 194.13 KB
© 2014 - 2024 Dediggefedde
Comments10
Join the community to add your comment. Already a deviant? Log In
Jack-the-Shinigami's avatar
This isn't working for me (probably bc it was posted a long time ago).
I'm not sure if you're still active, but do you have any new, working code to make 3 collumns?