[SOLVED] Column width in Practicality

[mergatrude]

Hi there!

Confession: I lurk around this community and pinch bits of CSS from other posts, tinkering with them to achieve the look I want. This means I don't really know what I'm doing.

I'm currently in the process of setting up mcu_onyourleft using Practicality and a 800x200 banner.

I've stolen this bit of code and adapted it, but am not sure what adjustment to make in order to get the left side of the second column lined up with the left side of the banner. Does anyone have some advice?

html body {
padding-top: 0;
}
#header {
display: none;
}
#content {
background: url(http://ic.pics.livejournal.com/mergatrude/1028676/114853/114853_original.png) no-repeat 8px 0;
padding: 205px 0 0;
width: 808px;
}

Comments

[ex_beautified302]

Try replacing your code with this code instead:

html body {
padding-top: 0;
}
#canvas {
background: url(http://ic.pics.livejournal.com/mergatrude/1028676/114853/114853_original.png) no-repeat 8px 0;
padding: 205px 0 0; }

#header {
display: none;
}
#content {
width: 808px;
}

If that wasn't exactly what you were looking for, I can tweak it for you.

[mergatrude]

Thank you!

What I was trying to achieve was to line the header up on the right hand side of the page, with the second column.

I was basing my custom CSS on this journal header, which was discussed here.

Failing that, I can just do something simple, like centre the banner in the heading. :)

[ex_beautified302]

Oh I'm so sorry, I completely misread what you wanted!

Try this instead then:

html body {
padding-top: 0;
}
#header {
display: none;
}
#content {
background: url(http://ic.pics.livejournal.com/mergatrude/1028676/114853/114853_original.png) 16px 0px no-repeat;
padding: 205px 0 0;
width: 816px;
}

That should line up with the left of the second column as well as make sure the width of the second column matches the width of the banner. :)

[mergatrude]

Oh, that's perfect! Thank you so much. *sends flowers*

[ex_beautified302]

Glad I could help!