Ever wanted a 2 columned journal?

3 min read

Deviation Actions

I have been playing around with the thought of having 2 columns in my Journal. So I digged into it, and finally I was successful. I must admit I had a headache doing this, because it involves a lot of div's, but if you have a little patience you'll make it work too.

Here goes:

What you need is a large container. A box to put your stuff (columns) into. This container has to be filling up the entire width of your Journal. This is the CSS:


.container {
   position: relative  !important;
   vertical-align: top !important;
   height: 250px  !important;
   background:#eff1f1!important;
}



You can ofcourse adjust the parameters to suit your needs. Especially the height is important. Play around untill you get it right.

Now you have a 'box' to add your columns into.

The left column consists of the following CSS:


.left-element {
   position: absolute !important;
   left: 0  !important;
   width: 50%  !important;
   height: 100% !important;
   background:#eff1f1!important;
   padding:20px !important;
   vertical-align: top !important;
}



Again you can naturally play around with width and color, but be careful about changing position and alignment.

Now...let's add the right column;


.right-element {
   position: absolute !important;
   right: 0  !important;
   width: 50%  !important;
   height: 100%  !important;
   background:#eff1f1!important;
   padding:0px !important;
   vertical-align: top !important;
}



Same terms apply here.


All this confusing code goes into your CSS field when you edit your Journal.


Now for the fun part: implement it in your Journal. Copy/paste the below into your Journal (NOT the CSS part, but your JOURNAL), and change whatever necessary - links, contents, implement pics...you name it. Go and play my friend :D





</i>


Here is my own Journal done this way: beyondthehorizon.deviantart.co…
I only used this coding in my links-section, but I hope you'll make more of it.


Oh...btw; the h2 class you can naturally customise yourself. CSS is:


.h2{
    font-size: 12px !important;
    font-weight: bold !important;
    color: #374341!important;
}



I hope you like it =)
Published:
© 2007 - 2021 BeyondTheHorizon
Comments15
Join the community to add your comment. Already a deviant? Log In
dizzysmile's avatar
I tried this and it KIND OF works. I don't know what I'm doing wrong...

I put it in exactly as you said, but for some reason no matter how I adjust the height, it covers the mood section. :/ Also, for some reason, the right column keeps appearing below the left one. I have the scrollbox code in there for the left hand one, and it's edited correctly, and nothing is affected when I take it out (other than what the code is supposed to do).

What do I do? :(
Reno-s--Brain's avatar
This is awesome! :D
Yay, I'm using this code. The way you explain it is just right. :XD:
Talei's avatar
Does that mean I have to adjust the container height on every entry?
exarobibliologist's avatar
I discovered another method of doing this with =Grayda's help. You can shrink the width of the journaltop.journaltext to make it a column and then simply add another column in. In my case I made it a menu...

When shrinking the journaltext CSS, you have to be careful to remember that not all people use the same monitor resolution. So I used a relative figure to calculate the columns.

The code I used was:
div.journaltext {
width:60%;}

.menu {
width:35%; (5% gap so the columns don't overlap)
right:5px;
top: 65px;
position:absolute;}

:D
BeyondTheHorizon's avatar
Thanks a lot! :D

I hope to use this, and also that others might benefit from it =)
toxicity-lady's avatar
I tried but it failed. I do not understand how to use it!!
BeyondTheHorizon's avatar
Note me your problems and errors, and I will help you =)
Lilyas's avatar
This idea is not bad. I think it works. But I also think it can be easier with the "float" property. Floating elements are elements whose rendering boxes are shifted to the left or right side of the current line.

It looks like this:

.columnleft {
float:left;
width:50%;
height:300px;
}

for the Journal:

<div class="columnleft">Content for left column</div>Content for right column

That's it.
BeyondTheHorizon's avatar
Okay! I will check this out - thanks =)
Lilyas's avatar
WinampSkinners's avatar
I don't know too much of css, but I've just updated the journal of the community with a two column section. Thanks! :)
BeyondTheHorizon's avatar
I'm happy you could use the code! =)
janvanlysebettens's avatar
why not using floats ?
that would make it so much easier :)
BeyondTheHorizon's avatar
I am not familiar with floats, but I will look into that - thanks :D
Join the community to add your comment. Already a deviant? Log In