Journal CSS: Sidebars

When you use the position: absolute method, one of the benefits is that they're really simple to position, and you can force it to touch a TOP and BOTTOM value (ie, to make it stretch the length of the journal always.)

The problem with using position: absolute however is that it yanks the sidebar out of the page and then places it gently back on top in a way that doesn't let it interact with other elements in your journal. In other words, it can't 'bump' anything around - so if your main journal content is shorter than your sidebar you'll find that your journal will only be as high as the main content, with the sidebar vanishing under the bottom of the journal (appearing to be cut short.)

This is a pretty big flaw, and the reason why I'd say that using float is the best way to go. To someone unfamiliar with floats, they can be very confusing, but with the right tricks they're just as easy to position, and you can use them throughout your journal for pull quotes, featuring thumbs, whatever you think of.

---

Das HTML

Simple as it gets really:

<div class="sidebar"> ... </div>
Put that HTML anywhere in your journal, and with the following CSS a sidebar will appear in the same place. So, put it at the start, it'll be at the start. Put it in the middle of a bunch of text, that's where it'll show up.

Das CSS

.sidebar{
  float: left;
  margin: -18px 20px 20px -58px;
  width: auto;
  max-width: 160px;
  _width: 160px;
  padding: 10px;
  position: relative;
}

.journaltext{overflow: auto}



If you've ever tried using floats, your might have found that they were difficult to position, but with negative margins you'll find that you can position your sidebar as easily as if you had used postion: absolute;.

So WTF are negative margins? They're literally negative margin values.

My journal has 50px padding around it, so to have the sidebar close to the edge of the journal I used negative margins to pull it through the padding. That's what the -58px is for in the CSS above (the extra 8px is because our journal text has 8px padding applied by deviantart, I could have reset that to 0, but meh). Likewise, the -18px is to yank it up a few pixels (you might want to do this so that your sidebar is flush with your header for instance.) These values will be different in your own journals depending on the padding you use.

Also, when looking at that margin property, the order of the numbers is top right bottom left - think clockwise. I'm always getting odd looks from Nadia as I turn my hand around in the air

The way I've specified the width might look a bit strange, but it's to allow your sidebar to change width a little bit if needed. For instance, if you changed the max-width to be, say, 300px that would mean that it can expand to fit any content up to 300px wide inside it. If you only have one thumbnail/stamp per line, it'll shrink down to that size, but if you put two on one line it'll also grow wider to fit that too.

Because IE doesn't recognise max-width I've had to use the underscore hack (_width) so that in IE your sidebar stays 160px (or whatever you change the max-width to.) Without it, IE will only 'see' width: auto - and so it will let your sidebar keep growing as wide as the content inside it - if you have a paragraph of writing for instance, it will be as long as that line. Not good! So make sure to include a _width property for the retard IE.

The last line, .journaltext{overflow: auto} is to trick web browsers into resize the journal to fit any floats inside it. Without it they'd get cut off like you're using position: absolute (which doesn't respond to overflow:auto.)

A side effect of overflow:auto is that if you try to stick something in your journal that is wider than the journal itself (say, a wide image) horizontal scroll bars will appear. Scroll bars will also appear if you make the negative margin too large on the sidebar and cause it to pop out past the edge of the journal, so if you suddenly see scroll bars while tweaking the negative margin, that's why.

To get around this if it becomes a problem, put an empty div in your FOOTER, and give it a class name. Then in your CSS give that div the following:

.that_div_you_made{clear:both}

The clear property is used to push things past floated objects. By putting the div in your footer it makes sure it's past any sidebars and doing it's job of making sure your journal resizes to fit them all.

customizations

If you want the sidebar on the right hand side, just change float: left to float: right and switch the margin around so that the value for left is now on the other side. In my example code above that would mean swapping the last value and the second value.

You can also put a border around it, using the border property - a shortcut if you only want the border on a few side is to use border:solid #000; border-width: 0 1px 0 0 which if applied to my example would put a 1px black border on the right side of the sidebar.

Something else to keep in mind is that you can have more than one 'sidebar'. They can be placed at any point in your journal  - as you can see on the right there - to hold single thumbs for instance. If you wish to have some on the left and some on the right, instead of writing a whole new class for it, just add the following CSS:

.sidebar.right{float: right; margin: 10px -58px 20px 20px; border-width: 0 0 0 1px}

...and then in your html write class="sidebar right" whenever you want to switch the sidebar from left to right (or vice versa).

---

Hopefully you were able to get your head around all of that, if you have any problems just let me know. Also, if you think there are changes I could make to this tutorial to make it easier to follow, I'd like to hear them too