Sidebar horizontal line without padding or margin – Balance

[mariafernandezParticipant Post count: 18]

I’m trying to get the horizontal lines in my sidebar (http://www.spanish-bites.com/) to cover the whole sidebar width. So far I’ve failed with the changes I’ve made to my .css

Can anyone suggest how this is achieved? I’ve seen it done on other blogs.

Maria

 

[anitacModerator Post count: 2575]

I see a lot of lines and bars. Can you be more specific in the location possibly describing the text that is near what you want changed?

---

Twitter Handles: @thecre8tivediva | Website: Cre8tiveDiva.com | LinkedIn Group: http://goo.gl/nNe1m
Why Not Take The Challenge! – Help us answer some of the unanswered posts

[mariafernandezParticipant Post count: 18]

On my blog’s sidebar there’s technically only one horizontal line, which gets repeated after each section. The social media icons, for instance, have a line above and below them.

I’d like that bar to reach the edges of the white area, but I haven’t found a way of doing it.

Blog: http://www.spanish-bites.com

Maria

 

[anitacModerator Post count: 2575]

Oh, I don’t believe you can do that. The CSS is adjusting to the width of the sidebar. There’s no way to get it go stretch outside of that area like that.

---

Twitter Handles: @thecre8tivediva | Website: Cre8tiveDiva.com | LinkedIn Group: http://goo.gl/nNe1m
Why Not Take The Challenge! – Help us answer some of the unanswered posts

[mariafernandezParticipant Post count: 18]

Outside? That would look ugly. What I want is what this other blog has done: http://www.janscarbrough.com/biography/

(See sidebar lines reaching the edges, rather than covering only the same area as the text because of the padding)

[anitacModerator Post count: 2575]

Are you referring to the the “sidebar” as in right sidebar where your search box is located?

---

Twitter Handles: @thecre8tivediva | Website: Cre8tiveDiva.com | LinkedIn Group: http://goo.gl/nNe1m
Why Not Take The Challenge! – Help us answer some of the unanswered posts

[anitacModerator Post count: 2575]

I see now, because you have a white background I couldn’t see it. I used Firebug and see that it’s the left and right Margins, not the padding. So remove your left and right margins and it will fix it.

**NEW NOTE** her Margins are set at 0.

---

Twitter Handles: @thecre8tivediva | Website: Cre8tiveDiva.com | LinkedIn Group: http://goo.gl/nNe1m
Why Not Take The Challenge! – Help us answer some of the unanswered posts

• This reply was modified 4 months, 4 weeks ago by  anitac.

• This reply was modified 4 months, 4 weeks ago by  anitac.

[mariafernandezParticipant Post count: 18]

On my .css I’ve tried changing to zero just about every margin and padding I can see. Nothing seems to work. The text moves to the edges every time. Perhaps you can give me a clue as to which margin you’re referring to?

Thanks.

[mariafernandezParticipant Post count: 18]

OK. I’ve now figured it out. In case there’s someone else with the same problem, here’s the solution:

The original .css was:

.sidebar .widget {
border-bottom: 1px solid #ddd;
margin: 0 0 30px;
padding: 0 0 30px;
}

Now I have:

.sidebar .widget {
border-bottom: 1px solid #ddd;
margin: 0 0 10px;
padding: 20px 20px 20px;
}

[Author]

Posts