Jump to content

Archived

This topic is now archived and is closed to further replies.

renderinnovations

Columns and sidebars equal height

Recommended Posts

renderinnovations

Hi!

I'm trying to figure out how to get the 1st and 3rd (out of 3) columns to have an equal height for the background to match column 2 (the content).  Since the content is taller, I'm trying to figure out how to get the sidebars equal height.

Any thoughts?

Share this post


Link to post
Share on other sites
James B

Hi there,

 

Try giving each column a min height.

 

body .section-plcolumn {
    min-height: 400px;
}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
renderinnovations

Well a min height would work, but the sidebars will only stick to the min height.  I'd like to get the sidebars to be automatically the same height as whatever the content in the middle would be.  Used to be able to do this on the old pagelines, but with these columns, they are only able to be told what to do rather than automatically fit.

 

I was trying to do max, and percentage height, but still no avail. 

 

I was using .section-widgetizer, so should I use body . section-plcolumn instead?  Is there a directory of css tags that we should use to work on this stuff?

Share this post


Link to post
Share on other sites
Danny

What columns are you referring to, can you provide a link to the page in question please.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
renderinnovations

Hi,  

 

Excused the Russian language, building a site for someone.   But here's the link:  http://108.174.145.142/~olevich/

 

The left and right columns I want to have their background just as long as whatever the content is.  I may have a creativity block but just can't think of a way to do this right now.

Thanks

AB

Share this post


Link to post
Share on other sites
Danny

You can try this:

 

#pl_areau79e9e .pl-content {
background-color: #C0B3A6;
}
 
However, for it too work, you will need to remove the background: #FFF !important from the following code:
 
.nested-section-area {
background: #FFF !important;
margin-top: -18px !important;
padding-top: 15px !important;
-moz-box-shadow: 1px 0px 5px #000000 !important;
-webkit-box-shadow: 1px 0px 5px #000 !important;
box-shadow: 1px 0px 5px #000 !important;
}

 

You should never use the !important declaration, as it overpowers everything and is a pain to work with, if you're having difficulty overriding CSS, prefix your code with the following:

 

#site

 

For example, lets say you have the following code:

 

.boom { background-color: red; }

 

and it isn't overriding the default CSS, use the #site like this:

 

#site .boom { background-color: red; }


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
renderinnovations

Oh dang, cool, didn't know about using the #site.  I'll use that then, sometimes I had to keep in mind what I did for !important especially for @media width css to override things.

 

Okay, I'll take a look to see if the code works.  

 

AB

Share this post


Link to post
Share on other sites
renderinnovations

Also, why is it using jumbled up letters? ( #pl_areau79e9e )  Wouldn't it be easier to organize it some how?
 

Share this post


Link to post
Share on other sites
renderinnovations

Wonderful it worked!  Why did this work?  How does one get specific with the misc letters/numbers?  Is there a directory or source to understand the classes and ids for pageline's css?

AB

Share this post


Link to post
Share on other sites
greenfly

You can see which selectors are being used for each particular area and section by using your browser inspection tools or Firebug. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
renderinnovations

This is true, but sometimes it takes longer than necessary to find the specific selector/class/id etc.  Just a nuisance some times.

Share this post


Link to post
Share on other sites
greenfly

i find using the full version of FIrebug in Firefox to inspect the site, or the inspector tools in chrome much easier than using the Firebug lite version in Chrome. 

 

Usually, if you have items in a column you can see the columns and then drop them down to find the content. The selectors given to the columns are fairly easy to find that way. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites

×