SimplySilent's avatar

Fun with Columns

3K 241 65K (12 Today)
By SimplySilent   |   Watch
Published: November 2, 2013
© 2013 - 2019 SimplySilent
Works with plain text as well as with content holders. :eager:

Looks best with wider widgets:




70-30 Columns

<div class="mods-hh split-70"><div class="mods-column-ll">70% Text</div><div class="mods-column-rr">30% Text</div></div>

<div class="mods-hh split-70"><div class="mods-column-rr">30% Text</div><div class="mods-column-ll">70% Text</div></div>



65-35 Columns

<div class="mods-hh split-65"><div class="mods-column-ll">65% Text</div><div class="mods-column-rr">35% Text</div></div>

<div class="mods-hh split-65"><div class="mods-column-rr">35% Text</div><div class="mods-column-ll">65% Text</div></div>



60-40 Columns

<div class="mods-hh split-60"><div class="mods-column-ll">60% Text</div><div class="mods-column-rr">40% Text</div></div>

<div class="mods-hh split-60"><div class="mods-column-rr">40% Text</div><div class="mods-column-ll">60% Text</div></div>



50-50 Columns

<div class="hh"><div class="ll">50% Text</div><div class="rr">50% Text</div></div>
Image size
771x527px 33.4 KB
Comments241
anonymous's avatar
Join the community to add your comment. Already a deviant? Sign In
TaNa-Jo's avatar
TaNa-JoStudent Digital Artist
Guys do not want to spam but I figured out how to get proper boxes for super group layouts WITH A GAP

Double Column Custom Box Code by TaNa-Jo
MegumiBara's avatar
MegumiBaraStudent Digital Artist
Hi, I'm sorry, but it's not working for me.
I keep getting the default half-and-half in stead of percentages.
If you could explain how this may be happening, I would greatly appreciate it.
Thank you :)
MinkySoda's avatar
MinkySodaHobbyist General Artist
aaaaaaaaaand I need some help. XD Idk what i've done its a mess and Idk what i'm looking at.
Im using the 60-40 (tried 50-50 before that and had the same problem so tried 60-40 cause the code looks different) and no matter how careful I am not to accidentally loose a </ div> thing (i've re done it twice now..) the second column isn't in a second column. It just is putting '60% Text'  below the content of the first column? I am core atm, have I forgotten a div thing? The first column is full with button codes and a custom bg floaty box and a thumbnail image- but if you want i can forward the code to you in a screenshot over notes if that helps. Anything I should add that might fix this?
GLiTCH-R's avatar
GLiTCH-RHobbyist General Artist
Perhaps the css box you're using isn't compatible with the columns. That's happened before to me. I know for sure that these three css boxes work with columns:  White Content-Holder Boxes v2 by CypherVisor   Flat Content-Holder Box (Default) by CypherVisor   Custom Box - Black non-rounded content holder by huina
MinkySoda's avatar
MinkySodaHobbyist General Artist
Thank you!! Def working better now-
Though I realize most probably use the columns INSIDE the boxes, not, on the boxes XD
Hm by jellyycake
I imagine there's no way to put a space between the two boxes no? 
Either way there is a second collum now so even if i dont use another ccs(?) box I can put images so very happy~ :D (it's working at least now.)
SineShines's avatar
SineShinesHobbyist Digital Artist
I don't know if you still need it, but you can have a space between boxes if you put a transparent divider next to them -w- Just save a fully transparent image and insert it. May require some tweaking. 
MinkySoda's avatar
MinkySodaHobbyist General Artist
!!!! :00000000
GLiTCH-R's avatar
GLiTCH-RHobbyist General Artist
Aw well I’m glad I could help!
cocoa-codes's avatar
this was so helpful thank you so much!! people with a good knowledge of code like you really inspire newbies like me. : )
Mini-Chibi-Reaper's avatar
does this work for non-core in journals too?

SoftMelonn's avatar
SoftMelonnStudent Digital Artist
It'll Work, But Maybe?
IdiotTwins's avatar
IdiotTwinsHobbyist Digital Artist
I wonder if there is a way to have a little bit of spacing between the 50-50 columns because right now there is no padding or margin in the middle
TaNa-Jo's avatar
TaNa-JoStudent Digital Artist
crueIdaddy's avatar
crueIdaddyHobbyist Digital Artist
mine just stopped working, what happened?
SandwichProtector's avatar
SandwichProtectorStudent Digital Artist
idk if you made this comment w/o core but it only works if youve got core
crueIdaddy's avatar
crueIdaddyHobbyist Digital Artist
ohh :(
Quailmixalot's avatar
QuailmixalotHobbyist Digital Artist
Is it possible to do 3 columns? 
kiitenclaws's avatar
kiitenclawsStudent Digital Artist
hey, can someone help me with some technical issues on my group Endless-Spirits ?? it's the last custom box
and the third custom box is pushed heavily to the right side. can someone help me?
ColorfulHoovedNights's avatar
ColorfulHoovedNightsHobbyist Digital Artist
Is it possible to do 25%L & 25%R?
eliotecre's avatar
eliotecreHobbyist Digital Artist
you mean with a big gap inbetween both sides?
if so try this code
<div class="hh"><div class="ll"><div class="hh"><div class="ll">25% left Text</div><div class="rr"></div></div></div><div class="rr"><div class="hh"><div class="ll"></div><div class="rr">25% right Text</div></div></div></div>
ColorfulHoovedNights's avatar
ColorfulHoovedNightsHobbyist Digital Artist
Alright I'll give it a try! Thankyou!
Kach-22's avatar
Kach-22Hobbyist Digital Artist
Can you do a 25-25-25-25?  Four way split? 
anonymous's avatar
Join the community to add your comment. Already a deviant? Sign In