I have a 3 column div layout and the 3 columns look fine. I'm listing items in each column however i'm having to set a min height for the blocks in each column and if the min height isn't big enough then on the next 'row' there is just a space.
However by setting a min height it means that there is a huge gap below the top row item if it's not as tall.
Is there anyway around this?
Site is here - https://steve-morris.co.uk/properties/rent
Each block has a gap below it and when the block isn't tall there is a bigger gap. I'm wondering how I set it so that instead of using a min height, the next row auto adjusts to the height of the tallest block in that row.
You could set .prop-list-title {min-height:290px}. It looks like the title is the only area where the text wraps. Because it's responsive you would want to make sure you set that rule in the proper media display in your css.
You can use some JS to determine the height of the largest box of the row and add a uniform height to all elements within the row.
Have a look at this: http://www.jainaewen.com/files/javascript/jquery/equal-height-columns.html
Related
Suppose I have a straight-forward flex-box table. I want the columns to all have equal width, to expand to the width of the table. That is, if there are four columns, each column will be 25% of the total table width. I know how to do this.
Now suppose that I want to be able to mark an arbitrary column with a class .fit-to-content. Any column marked with this class will have its width set to the max width needed for the content in the column.
This Codepen is my initial attempt at doing this: https://codepen.io/anon/pen/eoJmMN
Notice that while the flex-box column marked as .fit-to-content does have its width set to its content width, the widths differ across rows. Is there someway with flex-box to have the column share the same width?
Suppose I do not know the width in advance (i.e. I cannot just set the width to 100px or so).
I have a navbar at the top of a page, in a fluid container, now I want to fill the remaining space below (responsively) with another fluid container that wraps an SVG element. I can size the bottom container with container-fluid full and I can insert two rows row half, or one row with row half, but ideally, I want to be able to put a single row with row full but this doesn't work.
My plan is to use the height of the row to define my svg element height.
How can I do this so I maximise the svg size without scroll bars appearing?
I have a list of div with each div having a image inside.
The width of the images is not known before loading the page.
I have a container div with width 960px. How can i arrange the images in rows with each row having as much images as the row width permits? So for example if i have 4 images (300px, 400px, 200px, 250px) i would need to have first 3 of them on a row and the 4-th one on second row as having all 4 of them in a single row will get a width larger then 960. And on each row the images should be centered.
I've tried all i could think of using css, and did not found a way that works.
Any ideea?
Something like THIS?
Ok, I worked with simply divs, because I didn't want to search for images but the main pont is: the elements which need to be both aligned and fitted, make them inline-block. Inline to be made multiline, box to be able to set both width and height. After that, you only need to set on the parent: text-align: center
EDIT
Oups, I've put spaces between the divs (like real space characters) and they appear as spaces between the divs, since they are inline. make sure not tu put any whitespace between the containers, like THIS
If you lose the containers, you don't even need to use inline-block.
http://jsfiddle.net/bryandowning/ghcmM/
However, since this is a list of images, you probably should use inline-block on the li elements of an unordered list.
I have a table with 3 rows, and a fixed height of 500px.
The first row can vary in height in order to accommodate it's content, which varies in length.
The third row never changes and always has the same height, which fits its content.
The second row has a bunch of content which will exceed the cell height, and should be hidden after it exceeds the height of the cell. The height of this row should be based purely on how much the first row takes up.
So to be clear on the height:
Row 1 = x (dynamic)
Row 3 = y (static)
Row 2 = 500 - x - y
I have found a way to do this in Firefox, but it does not work in IE 8. For now I am using javascript to fix it after the fact, but it would be nice if this could be done purely with CSS/HTML.
Here is a basic rendition of how I have it working now.
<table cellpadding="0" cellspacing="0" id="table">
<tr><td id="row1">Row 1 Content</td></tr>
<tr><td id="row2"><div>Row 2 Content. Lots more content here should not cause the table to expand.</div></td></tr>
<tr><td id="row3">Row 3 Content</td></tr>
</table>
#table{height:500px;width:200px;}
#row1,#row3{height:1%}
/* ^^ force cell heights to fix content */
#row2{position:relative;height:99%}
/* ^^ a height must be specified to get the absolutely positioned div to assume the cell's height */
#row2 div{position:absolute;height:100%;width:200px;overflow:hidden;top:0;left:0;}
/* ^^ allows content to overflow the cell without causing the cell to expand */
Unfortunately this does not work in IE. IE will take row 2's 99% height and cause the cell to be as tall as the table's set width (500px), even though this causes the table to be much larger than 500%. I would leave the height style off the row, but then the div inside it doesn't know what height to be.
Currently I use jQuery to set the height of the middle row, based on the height of the other cells, but that is not optimal.
Ideas?
Thanks
Why not use three divs with each floats left or right altogether (maybe you want set margins), where in first uoy leave 'height' css alone, in third set fixed height.
But i dont understand 'Row 2 = 500 - x - y' wchich means that if 1 exceeds 500 height it will be negative height. That should satisfy Chrome,FF, Opera and IE8.
I solved this by not using 3 rows, but instead 2 rows. The first row being dynamic, the second row taking up the remaining space, but then splitting the additional content off into a div, which is attached to the bottom of the cell. The extra content would just flow under the div.
I'm trying to create a table with each cell having a fixed width but absolute but varying heights. For example in the first column the first row would be 20px, the second 65px, the third 20px. In the second column the first row would be 20px, the second 45px, the third 40px. And in the last column, the first row would be 20px and the second 85px.
All of this works fine if the table cells are empty or large enough for the content. However, if the content is larger than what the cell accommodates, the row will expand vertically whereas I would like the extra content to be hidden.
I've tried using
overflow:hidden
for the <tr>, <td>, and doing the same while placing the content within a <div> but none appear to achieve what I'm looking for. Any ideas on how I can constrain the row height to an absolute value with any extra content hidden rather than expanding the row? I'd prefer to keep it within a table, but if it's not possible and I need to use another display technique I'm open to the idea.
When using the div solution, have you tried setting a height for the div itself while giving it an overflow: hidden style?