[Resolved] Equal length columns

[Bellarwen]

Hello,

I go back on the subject because I am currently pulling my hair out on this problem.
I tried to solve the problem with the code you gave us, but it does not work.
For the layout I use separate containers. I also add a borders to my widgets.
Is there a possibility to solve the problem and everything is aligned?

I’m sorry for my bad english, I’m French 🙂

Here is the link to my site

[Bellarwen]

The link to my website not work on my precedent message, is here : http://lameuteecarlate.fr

[Tom]

Hi there,

Looking at your code, the code is actually working – all three columns are the exact same height.

However, it’s not possible to see because you’re not using a solid color between all three columns – each widget has a separate container.

Having equal heights will only work if all columns have a solid color.

Does that make sense?

[Bellarwen]

Ok, I understand better now, thank you very much for your response 🙂

[Tom]

You’re welcome – sorry I couldn’t be more helpful.

Great job on the site by the way 🙂

[Bellarwen]

Oh no problems and many thanks for your compliment ! 😀

[Pieter]

Hello Tom,

I’m so happy everytime i use Generatepress, it’s very helpfull.
I vjust have several questions about someting, i used the script you gave in one of the awnsers above, but i’m having a little problem.

I wanted to know if it’s possible to completly remove the background color of the widget sidebar. And if it’s possible to have the same background image till the top of the footer.

If you want more information just go to my website you’ll see what i mean. It’s the little shadow effect on the right. I want it to be completely transparent (no white under the shadow), and going down to the footer.

I think you’ll certainly have a solution to my problem 😉

And another question about the menu, what I want:
underline the text while the mouse is on the button and the open tab showing bold.

Thanks a lot

PS: Sorry for my English

[Tom]

Hi Pieter,

Can you post the link to your site so I can see what you mean?

Thanks! 🙂

[Pieter VAN OPSTAL]

Here you go:

http://www.casinformatique.com/wp

Thanks

[Tom]

So you don’t want a white background, but you want the shadow to be as tall as the content?

If so, remove the CSS you added when adding this script:

.inside-left-sidebar, .inside-right-sidebar {
    background: #fff;
}

Then apply your shadow background image to this element:

.inside-right-sidebar

[Martin]

Thanks for the code Tom, I’ve added it in but seemingly no change, main area and side bar still different heights – any ideas as to what I have not done? cheddarparishcouncil.org is the site. The sidebar is stretching down to meet the bottom of a long page of content, but short content does not stretch down to the bottom of the sidebar.

[Tom]

Looks like you’re close!

Try adding this CSS:

.site-main {
      background: #FFF;
}

[Martin]

That works… except that it kills the rounded corners on the content area. Looks like it may not be possible to have rounded corners on both the content and the sidebar, and 100% height too? If so I’ll probably keep the rounded corners on the sidebar and have the content square cornered but equal height to the sidebar.

[Tom]

Simply add the border-radius attributes to the .site-main element and you should be good to go 🙂

[Martin]

That has absolutely sorted it, thanks! CSS is wonderful when you know what to put where 🙂

[Author]

Posts