Moving the sidebar divider

[shewearswhite]

Hi all,
I would like to increase the width of the sidebar on my site and decrease the width of my main content. (In effect keeping the total width the same).
My website is http://www.shewearswhite.com
My main content was 740 and I have adjusted it to 640, my sidebar was 220 and I have increased it to 320.
The css I used in my stylesheet to adjust the widths is;
.content-sidebar #content,
.sidebar-content #content {
width: 640px;
}

.content-sidebar #sidebar,
.sidebar-content #sidebar {
width: 320px;
}

The problem is that when I adjust the width the sidebar divider line stays in the same place (except for the front page!) All other pages the line doesn't move. If anyone could guide me how to move the line on all pages it would be fantastic!
Any help would be be hugely appreciated!! Thank you.
Katie

[Riavon]

That line is generated by an image here:

.home #wrap #inner {

background-image: url("images/home-inner.png");
background-repeat: repeat-y;

}

To get rid of it, just change that to background-image:none and delete the background-repeat-y (not needed)

To move it you can position it to stay lined up with your content at any width if you add the style to the

.content-sidebar #content, .sidebar-content #content

like so:

.content-sidebar #content, .sidebar-content #content {

width: 640px;
background-image: url("images/home-inner.png");
background-repeat: repeat-y;

}

---

Twitter: @riavonentprises

[shewearswhite]

Hi Ria,

I've changed the code as you suggested;

.home #wrap #inner {
background-image: none;
}

and

.content-sidebar #content,
.sidebar-content #content {
width: 640px;
background-image: url(“images/home-inner.png”);
background-repeat: repeat-y;
}

but the sidebar is still in the same place and now the homepage is also showing the sidebar at 740 pixels instead of 640.

Any ideas?

[Riavon]

Sorry for the delay in responding. Ok, I see now the issue. I assumed that was a 1px x 1px image but it's a 960px x 1px image so it's forcing your content div to be too wide. I'd recommend removing that image entirely and simply add a border:
.content-sidebar #content, .sidebar-content #content {

background-image: none;
border-right: 1px solid #E5E5E5;
width: 639px;

}

---

Twitter: @riavonentprises

[Riavon]

I can't see it using Firebug, but looking at your stylesheet I see:

.content-sidebar #inner {
background: url(images/content-sidebar.png) repeat-y;
}

which is what I think may be causing the issue with the odd line going down the middle of the sidebar area. I'd recommend trying to remove that background image as well, then your right border on the content area will serve as the separator between the two sections.

---

Twitter: @riavonentprises

[shewearswhite]

Hi Ria,

I have changed the css however now I have no line, I'm not too fussed because it actually looks quite nice without the line down the middle but would you know how to add it if I did want a line?

Under the content css here is the existing code;

/* Content
------------------------------------------------------------ */

#content {
float: left;
width: 420px;
}

.content-sidebar #content,
.sidebar-content #content {
width: 640px;
background-image: none;
border-right: 1px solid #E5E5E5:
width: 639px:
}

[Riavon]

I just used Firebug to look at your site, and I see this on line 814 of your style.css :

.content-sidebar #content, .sidebar-content #content {

background-image: none;
width: 640px;

}
In the code you posted in your reply to me above, I see you have two width declarations. In order to show the border you must place the code correctly into your style.css exactly as this:

.content-sidebar #content, .sidebar-content #content {

background-image: none;
border-right: 1px solid #E5E5E5;
width: 639px;

}
An easy way for you to hide that line is to simply change the #e5e5e5 (that's your light gray color) to transparent - border-right: 1px solid transparent;

---

Twitter: @riavonentprises

[shewearswhite]

Hi Ria,

Thanks for that, I've managed to add the divider line however it doesn't go all the way to the bottom, as you can see especially on the real weddings page (because there are no posts) it only goes to below the title, any ideas how to make it stretch to the very bottom?

Thank you again!

Katie

[Riavon]

Yikes, is your site down?

---

Twitter: @riavonentprises

[shewearswhite]

It sure is!! Just talking to my hosts now trying to figure out why!

[shewearswhite]

Back up and running, if you have any ideas about the sidebar going all the way to the bottom that would be great!

[Riavon]

On line 2024 of style.css add min-height:352px;

.elle-white #content .post, 
.elle-white #content .page, 
.elle-white .navigation {
    min-height: 352px;
    padding: 15px 10px;
}

Of course, you could always just add some posts, too. 😉

---

Twitter: @riavonentprises

[Author]

Posts