snippet: visualosities in two floating columns

[terra]

This is just a quick bit of code because I've been asked a lot how I make my visualosities in two columns, like so. I use two divs and inline css to achieve the column effect with way less code & complication that it would take with a table.

Behold, the code

<div style="margin: auto; width: 815px;">
<!-- begin left column -->
<div style="width: 400px; float: left;">
<img src="blah.gif" alt="" style="padding-bottom: 1em;" />
<img src="blah2.gif" alt="" style="padding-bottom: 1em;" />
</div>
<!-- end left column -->
<!-- begin right column -->
<div style="width: 400px; float: right;">
<img src="blah3.gif" alt="" style="padding-bottom: 1em;" />
<img src="blah4.gif" alt="" style="padding-bottom: 1em;" />
</div>
<!-- end right column -->
<div style="clear: both;">
</div>

Let me explain

Basically we have two columns, each in their own <div>, surrounded by a containter <div>.

margin: auto;: This property centers the big container div. Note that it doesn't center the text (or images) inside the container div, just makes sure the div is positioned in the center of the page.

width: 810px;: I used 400px wide images for my visualosities, so 2*400 + 15px of gutter room in between = 815px. You can change these values around, just make sure everything adds up in the end. It's important to add the width for the margin: auto; property to work right.

width: 400px;: See above. I resized all my images to 400px manually in Photoshop. It's important to add width to make the float attribute work properly.

float: left;: This is what makes this column "float" on the left side.

blah.gif;: Obviously, add your own url.

padding-bottom: 1em;: I'm a control freak who likes to tweak the spacing between images! This just means that there is 1em of space between each image vertically, you can adjust to suit your own aesthetic.

float: right;: This makes the right column "float" on the right.

clear: both; : Clearing your floats— this just makes a lot of wonky format troubles go away.

Here's how do do 3 columns

Three columns is a bit trickier with float but you can also achieve this effect with inline-block; pretty easily.

<div style="margin: auto; max-width: 900px;">
<!-- begin left column -->
<div style="width: 33.33%; display: inline-block; vertical-align: top;">
<img src="blah.gif" alt="" style="margin-bottom: 1em; max-width: 100%;" />
<img src="blah2.gif" alt="" style="margin-bottom: 1em; max-width: 100%;" />
</div>
<!-- end left column -->
<!-- begin center column -->
<div style="width: 33.33%; display: inline-block; vertical-align: top;">
<img src="blah3.gif" alt="" style="padding-bottom: 1em;" />
<img src="blah4.gif" alt="" style="padding-bottom: 1em;" />
</div>
<!-- end center column -->
<!-- begin right column -->
<div style="width: 33.33%; display: inline-block; vertical-align: top;">
<img src="blah5.gif" alt="" style="padding-bottom: 1em;" />
<img src="blah6.gif" alt="" style="padding-bottom: 1em;" />
</div>
<!-- end right column -->
</div>

max-width: 900px;: Like the width property but sets a limit, in this case 900px, instead of a definite value. Generally DW entries are a max of 930px wide, so keep that in mind.

width: 33.33%;: You can change this to something absolute or you can set a relative value like so. 33.33% of 900px is 300px.

display: inline-block;: Makes things into columns.

vertical-align: top;: Inline-block elements are affected by the vertical-align property.

max-width: 100%;: Automatically resizes images so that they fit into your columns.

It's not working for me!

Did you check "disable auto-formatting" on your post? You want to check that box. Otherwise, if you have questions, I can try to help you in the comments.

Comments

[tropicsbear]

This is interesting *___* Dunno if I'll have a need for this, but I'm adding it to my memories anyway

[debts]

helpful! i'll have to employ it soon. many thanks. :>

[bumbles]

hello!
I've used this for a couple of visualise posts, now, and it looks awesome - thank you so much for putting together and sharing the code.

I have a question regarding whether it is possible to create three columns... which is basically just is it possible to modify this to have three columns? It wouldn't be for a visualise post, just for a psl/open log style header with a few reference images and it'd be quite a small collection of images, all up, so hopefully it won't wind up being a visual nightmare.

No biggy if not, but I thought I'd ask :D

[brave_heart_verity]

Thanks so much for sharing this. :)

[unreadability]

I have used this code for visualosities in this journal and it worked like a charm. Thank you for providing such detailed help!

[haruspicina]

I just want to say than you for sharing this! I've been using this for a while now and it's worked like a charm so just wanted to say thank you thank you thank you for sharing it. This has been amazing.

[artfultanzer]

I use this code for columns a lot, but one thing bugs me. The right column is always staggered slightly below the left. It's not an issue in visualosities, but in posts, it can look wonky. Any way to fix that?

[terra]

My first impulse is that it's an auto-formatting thing and will be fixed if you turn it off. If that's not the issue, I'd need to see an example of what you're talking about to tell you how to fix it.

[artfultanzer]

It was auto-formatting. Thanks, for the code and the help!

[narwhaling]

Thank you very much for sharing this! I've used it quite a few times already, and it's very user friendly for someone who breaks codes just by looking at them.