Agency Pro – force content and sidebar columns to be same length?

[kheilmann]

Hi all, I am new to this site. More of a marketer than a web developer, so I apologize in advance for my lack of technical knowledge.

I am working on a website for a client (www.invisiblesunenergy.com/temp/) using the Agency Pro theme. The pages (other than homepage) are content-sidebar. He doesn't like the look of it when either the content or the sidebar is shorter than the other. He wants me to force the content and sidebar to be the same length, even if it means extra white space (which I suppose it would). Is there a way to do this in Agency Pro without custom development? Any code ideas I can pop in to my .CSS files?

Thanks in advance for any advice.

Kathy

http://www.invisiblesunenergy.com/temp/

[Au Coeur]

You can add a minimum height on a case by case basis to whichever one is shorter. How familiar are you with CSS?

---

Mother. Web & Graphic Designer. Lactation Consultant. Blogging about how it all fits together, most recently from northern Colorado. Visit my blog or my design site.

[kheilmann]

I am not familiar with writing CSS but I have successfully cut and pasted code (that others have written) into my style.css file.

Can you show me what the code would look like?

[Au Coeur]

This explains minimum height: http://www.w3schools.com/cssref/pr_dim_min-height.asp

As long as your sidebar is the same on every page, you can add the min-height to .entry in your css file and it will make it the same height as your sidebar.

Making the sidebar longer on pages with longer content is trickier because you have to do each page individually. You would add the appropriate height to each page's sidebar and also add the white background to the sidebar.

So on the process page, for example, it would look something like this:

.page-id-146 .sidebar {
color: #999;
height: 1338px;
background-color: #FFF;
}

You probably want to round the corners to match.

---

Mother. Web & Graphic Designer. Lactation Consultant. Blogging about how it all fits together, most recently from northern Colorado. Visit my blog or my design site.

[kheilmann]

Thank you for this. If understand this approach correctly, it would mean that anytime you make changes to content or the sidebar that affect the length of the longer one, you would have to go back and re-edit the CSS file. Is that correct? It would make it difficult for my client to maintain his website ongoing.

I wonder if there's a more automated way of doing this? Or would we be better off switching to a different theme that has content and sidebar defined as equal length as part of the basic design? Any suggestions on a theme that would handle this better? I've purchased the whole set of StudioPress themes.

Thanks in advance for any and all help.

[Au Coeur]

Yes, you are correct that it would require ongoing CSS changes. Another thing you could do is add a background to the content sidebar wrap. This would make them appear to be the same height because they would be in the same visible container. This would remove the visible site background that currently appears between them though, so you have to decide if that is something you want to do stylistically.

---

Mother. Web & Graphic Designer. Lactation Consultant. Blogging about how it all fits together, most recently from northern Colorado. Visit my blog or my design site.

[kheilmann]

Actually, that is something my client would be interested in. Could you please show me how to do that? I really appreciate it.

[Au Coeur]

Just add a background to .content-sidebar-wrap in your CSS file.

---

Mother. Web & Graphic Designer. Lactation Consultant. Blogging about how it all fits together, most recently from northern Colorado. Visit my blog or my design site.

[kheilmann]

Sorry to be a pest, but can you show me what that code would look like? I'm not a programmer.

I really appreciate your help so far!

[Au Coeur]

http://www.w3schools.com/cssref/pr_background-color.asp

Add that to the div I mentioned 🙂

If you want it to be white, use #fff;

---

Mother. Web & Graphic Designer. Lactation Consultant. Blogging about how it all fits together, most recently from northern Colorado. Visit my blog or my design site.

[Author]

Posts