Hi there.
I have to columns in my design & I want to each div in grid layout on the left side adjust its height equally to the height of element in the right column.
I used height: 33% for each but in didn’t worked.
see live demo please:
any help is appreciated.
Percentage heights will only work if the parent element has its height fixed, so that won’t work in this case (and we don’t like fixed heights).
I’m thinking it may be possible with flex-box, or possibly display table, but don’t have tie to test just now.
This is a simple three column table/table-cell layout. The column with the tallest height determines the height of all three columns.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>template</title>
<!--
-->
<style type="text/css">
.outer {
width:80%;
margin:0 auto;
}
.table {
display:table;
table-layout:fixed;
border-spacing:4px 0;
width:100%;
}
.tcell {
display:table-cell;
border:1px dotted magenta;
}
.tcell:nth-child(1) {background-color:#bdf;}
.tcell:nth-child(2) {background-color:#fdb;}
.tcell:nth-child(3) {background-color:#dfd;}
</style>
</head>
<body>
<div class="outer">
<div class="table">
<div class="tcell">
goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here
</div>
<div class="tcell">
ontent goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here
</div>
<div class="tcell">
some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here some content goes here
</div>
</div>
</div>
</body>
</html>
How to do this using the bootstrap grid system? I don’t know. I understand that Bootstrap has some excellent documentation for their product for those who choose to use it.
http://getbootstrap.com/css/#grid
But if you can come out of bootstrap, you can do it the easy way as shown above.
Thanks for your reply guys.
Unfortunately I couldn’t make the ronpat solution in case of Bootstrap.
But based on points SamA74 said I think one way is to set height for right column (because at the end a slider should be there), so we almost know the height of slider image (it’s fixed height) and we can control the height of container in different viewports using media queries.
Do you think it’s wise to do this way ?
And of course, any other idea is appreciated.
Generally I would say no as fixed heights are too hard to control where text content is involved. You can get away with it in certain situations and use min-height in ems instead of height but the best solution is always an automatic solution that does not rely on ‘magic numbers’.
Also I’m having a hard time understanding what your codepen is supposed to show and what exactly you need? I see 6 coloured blocks on the left and one big text block on the right? What do you need to be equal height exactly?
Why is equal height needed? Do you have coloured backgrounds or borders to match up?
Just because you use bootstrap doesn’t mean you are tied to it for special cases. Just come out of the grid when needed. Unless you mean that you are tied to the exact html that you already have and want to use css only to change it?
So many questions to answer before a full solution can be given:)
Thanks for your reply Paul & sorry for my bad English which caused to not convey the main purpose of the topic.
I’ll start again & hope this time could do better explanation.
Here’s an image of what I want to have at the end in my layout:
Hope this time can get exact solution from you great guys.
Thanks in advance.
Are you saying that the images can be different heights in the same slider? That’s a bit unusual, isn’t it?
Why did you choose Bootstrap?
I’m not sure, but I read it as the height will vary at different widths, as the slider maintains its aspect ratio.
This is a somewhat different scenario from the earlier Pen where the right side had text content.
No, slider images are in exact same height. I mentioned its height in responsive layout. so slider images may have 500px height in large screen and 400px height in medium screen.
And I chose Bootstrap for more speed and easier coding.
Yes Sam, you’re right, I wrote about it’s aspect ration.
And about first Pen, sorry, I didn’t think it make a difference.
Also I tried using non-Bootstrap way and word with table and table-cell which ronpat mentioned but again, can’t get it to work (even with text on right side).
review this Pen:
If you don’t mind just catering for modern browsers (ie11+) etc. then you can use flexbox for this.
@PaulOB beat me to it. 
Mine is with an image though. (placeholder for slider)
I chose non-bloatstrap “for more speed and easier coding”. 
…and just for posterity here is the display:table version 
It should work (after a fashion) back to IE8 but I haven’t tested.
Wow, thank you guys. All was coded beautifully. Really appreciate your help and efforts 
.
I’m going to try and test your solutions in my project’s layout.
I chose non-bloatstrap “for more speed and easier coding”.
Bloatstrap…That was a good one Sam 
I’m not pro web designer and it’s somehow a hobby for me. I’ve done my first project with no use of Bootstrap, but in this second project, I thought if I want to work more serious on this field in the future I should work on something that let me code quicker. So I decided to test Bootstrap. It maybe results in quicker coding but codes are awful really 
.
Do you think it’s the best idea to not using Bootstrap in third project ? and if so, how to made coding quicker ? maybe a custom responsive grid system or what ?
I have a non-related question to this topic though, which CMS does Sitepoint Community use ?
Bootstrap can be quick if you just stick to the defaults and don’t need to customise everything but it gets awkward once you have unique patterns that you want to integrate into the design. Bootstrap is also useful if working in a team environment and you all stick to the guidelines as it ensures you all work in the same way.
For one-off projects that you work on by yourself then bootstrap really is overkill. You can customise it and cut down on bloat etc but in the end it does take a good knowledge of css and bootstrap to get the best out of it.
I have had to work with bootstrap on client sites but I tend to completely usurp the grid and use my own markup. Grids are simple and it takes a couple of seconds to create columns and there is no need for a framework to do this.
Bootstrap also has a flawed approach of using floats for columns which make it even harder to create something robust without cluttering the mark up with empty divs and multiple classes. (I believe bootstrap4 allows flexbox to be used which is good but what happens when grid layout comes out early next year ?).
What is useful in bootstrap is all the extras you get by default and creating menus, buttons, panels etc are pretty quick to knock up. Some people swear by bootstrap and others just swear at it.
The problem with frameworks from my point of view is that I already know how to do easily the things that they provide (the grid etc) but if I use the framework then I have to first learn how someone else thinks they should be done instead.
In the end its all just CSS:)
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
