Jump to content
Sign in to follow this  
gyoery

Responsive sibling boxes same non fixed height

Recommended Posts

gyoery

***Please select "NEW" layout in top left corner to see what I mean.*** I have 2 Soapboxes next to each other and I would like to make them the same size. This would be easy, except that it should not be a fixed height, as the design is responsive and they have to be able to get taller and shorter as the window is scaled. My idea was to giving them 100% height, but that doesn't seem to work. Any ideas?

Share this post


Link to post
Share on other sites
Danny
Hi Gyoery, The issue is that they don't have a similar character count. However, you could apply CSS to give that specific box a fixed height but that's not what you're after. Therefore, I recommend if you can try to add a similar character count, this should resolve the issue.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
gyoery
Thanx, though as you could have guessed this is not what I am after. I want to be able to add any length of content in the boxes and still having them display the same length, similar to a table. Some of the boxes have long titles, so even the similar charcount wouldn't solve the issue. Especially not on a responsive design. Thanx for trying anyways... PS: Have u checked the rankings? If you are the interceptor, I am the Black Perl ;) :D

Share this post


Link to post
Share on other sites
Danny
HAHA! Unfortunately, I can not think of anything else that would resolve this for you. You want them to have the same height, which is only possible by having the character count or using a fixed height. You could try adding min-height to the CSS and see if that works.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
gyoery
It would, but it still doesnt meet my specs. Adding a min height would allow upscaling, but not downscaling... Can any1 at least tell me why height 100% (the full height of the parent) doesn't work 4 me?

Share this post


Link to post
Share on other sites
Rob
Try using tables, the old fashioned way. Works for me!

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
gyoery
I wish I could do that, but the boxes will later get a jquery quicksand sort function like the boxes in team have already (not working at the moment --> other Post)

Share this post


Link to post
Share on other sites
Jenny
The content isn't filling the box, or making it expand simply because there isn't enough content in the second box. I assume you are wanting the "news" and "details" links to be at the bottom of the box. You'll probably be better off putting those buttons in a separate div and then vertical aligning them to the bottom or use a margin property.

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
gyoery
yea... I know how to take care of the buttons...thanx very much. the question however remains: How do I make the boxes the same size even though it has different length of content, without adding it a min-height or a fixed height...

Share this post


Link to post
Share on other sites
Danny
Hi Gyoery, As far as I know, its not possible to have to the boxes the same size without using one of the methods I mentioned above. You want them responsive but for them to have the same height. When they have different length in content and without using fixed height, min-height. I have no other alternatives that I can think of. I think the best course of action would be to go to a CSS forum and ask there for assistance.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
gyoery
I just don't get why the height 100% is not working. It should inflate each box to the size of the parent. But I can't get it to work. @Danny have u checked the rankings lately :P :D :D

Share this post


Link to post
Share on other sites
Rob
The answer, as I provided you earlier is [b]you don't[/b] without using tables. Even with tables, the only way to achieve this is to create an additional row beneath the content cell so that the lower table row forces the row above to be of equivalent height. If you're a half-way decent web designer, that lower table row can contain nothing more than a one pixel high transparent image. Boxes are not capable of doing what you're seeking no matter how persistently you press the issue. You can, of course, always try to reinvent the wheel, but most people who try that find that they're going around in circles. If you were to affix a CSS solution, the boxes will not be responsive in various browsers. However, if you create tables, without affixing specific heights or widths, and use percentages, applying any CSS to the table tags directly, you can force tables to be BOTH responsive and achieve this goal. I do not recommend using one of the table generating plugins. This is a solution that requires hand crafting of code. Any additional assistance with this issue should be referred to one of our Pros at http://www.pagelines.com/pros

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×