equal height containers

[DaleB]

I am using weaverx with the plus plugin

I read through the tutorials, but I am still unclear on the easiest way to create equal height flex boxes.  I saw the following:

<div id=”mycont1″ class=”widget-eq”>
<div class=”myblock myblock1″>content of block1</div>
<div class=”myblock myblock2″>content of block2</div>
<div class=”myblock myblock3 widget“>content of block3</div><div class=”myblock myblock4 widget“>content of block4</div>
<div class=”myblock myblock5″>content of block5</div>
<div class=”myblock myblock6″>content of block6</div>
</div>

I have used the box shortcode quite a bit, but two of them side by side in a column container are not equal height.

I tried the wp easy columns, but they adjust to the amount of content to control height.

I have watched videos on Lynda.com, but they are not working within a theme or using widgets.

If someone had an example of what they had written to achieve two or three columns side by side that were all the same height, I think it would help me out.

Any help or suggestions would be greatly appreciated.

[Bobthearch]

Don’t know if this will help in your situation, and it’s not ideal, but I manually set the widget heights for each of the “featured” boxes on the page here:

http://placesandpics.com/

I kept the content of each at a similar length, and made sure the widget height was sufficient to contain the text when resizing the screen.  The four-side-by-side are set to 325px and the lower two are set to 480px.

[scrambler]

You need to be clear on what you want to achieve.

If you just want three columns of equal height in one page content you would do the following.

<div id=”mycont1″ class=”widget-eq”>
<div class=”content-3-col widget“>First column content</div>
<div class=”content-3-col widget“>Second column content</div>
<div class=”content-3-col widget“>Third column content</div>
</div>
<div style=”clear:both;”></div>

The logic is as follow.

• The 3 divs with for the 3 columns come from here: http://forum.weavertheme.com/discussion/11220/weaver-xtreme-tips-and-tutorial-part-5  if you want two use the code for two
• If you want them to be equalized, you do two things (yellow highlight):

• You add the widget class on each of them
• You place the whole thing in another div that has a unique ID and the class widget-eq as explained in item 2 of the therad below
  http://forum.weavertheme.com/discussion/10342/weaver-xtreme-tips-and-tutorials-part-1

[DaleB]

Thank You Bobthearch. The image you show is exactly what I wanted to accomplish. Your site looks great! I appreciate your help.

Thank You scrambler. That is just what I needed to get me over the hump. I am blazing away creating columns. I also wrapped the entire column area in another div. The extra div contains a class I created that installs a wood grain background in the columns. The columns look great. I am going to play with your columns generator as soon as I get some play time. Thanks again for your help. 

[Author]

Posts