This is minimal code example on jsfiddle.
Practically, I want to make a table 2x2 of images, fix its height and height of its rows and make images chose their size using max-width and max-height. But for some reason the table is bigger, than the div it's contained in and img height:100% makes it 100% it's high, but not container's. Why is it so? Where can I read about it?
It seems to work if you actually define the height in the height attribute of the table cell, like this:
<td height="20px">
Related
I'm using a big image as background. However, it always resize automatically(Can't display full height of the img), How to deal with it?
One way is to set its height to the image's height. But when I'm reuse the class for other images, I have to change the height many times.
#HTML
div.img-bg
div.content
#CSS
.img-bg
background-image: .....
DEMO
Try background-size: auto; (the default value)
If you do not resize the background-image and use it's full size, your div.content should be as big as the image height.
So, as far as i understood, you set width to .content, now you can try to set height or min-height to fit the background-image's height.
Without height setted, I guess you have something like on the pic.
UPDATED DEMO
I can't seem to keep my (dynamic width) table on the same line as a previous element and have it extend to it's parent container without exceeding it and overflowing. I don't want a horizontal scrollbar as the table should just break the lines and/or words up to make it more narrow.
However, it's not doing that.
jsfiddle
In the fiddle, the table overflows and extends beyond it's parent container's width. The parent container is using white-space: nowrap to keep it on the same line as the content next to it.
Why is it not sizing it's width correctly?
If I set a fixed width on the table, it works and sizes the width correctly, but I need the width of the table to be dynamic. Only the outermost containing div is fixed.
Any ideas?
If you add
.listInfoTbl {
[...]
max-width: 142px;
[...]
}
then you'll see everything is working. But you may wonder why is that?
The answer is that you set a certain width for your div.listPropertyDiv therefore it won't grow beyond this and additionally there's some padding to take into the formula:
innerWidth(.listPropertyDiv) = innerWidth(#left) - border(.listPropertyDiv) - padding(.listPropertyDiv) - margin(.listPropertyDiv)
innerWidth(.listPropertyDiv) = 397px
Therefore:
width(table.listInfoTbl) <= innerWidth(.listPropertyDiv) - width(img.listImage)
width(table.listInfoTbl) <= 142px
You should overthink having a fixed width on #left, if your thinking about dynamically changing the content's width because if the parent doesn't shrink it's children can't.
A fixed fiddle
But maybe this is what you're looking for a solution with max-width and percentage so objects can shrink accordingly.
I have a code as displayed in here : http://jsfiddle.net/db4XL/
The table-layout:fixed seems to divide the child elements into two 50% width.
Is there any posible way to make the div.number width is auto?
Please look at this image for what I want to achieve :
Thanks
This is not possible. If you want the table cells to resize to the content so the left cell is splitted at approx 30% then you'll have to use percentages. Here's a working jfiddle:
http://jsfiddle.net/db4XL/7/
What you are asking for just isn't possible. The standard behaviour for tables using the auto property on all cells is to divide it equally.
I have a div on my page, and I want to make it expand to a certain size and then stop. Right now I have...
div {height:300px; width:700px; overflow:auto;}
The overflow attribute makes it scroll, but until then, I would like it to expand with the content. I have a text box below this and it looks bad with a text box floating down part of the page. Is there a way to have both of these attributes? All of the hits I found on Google were about making it expand to fit the content. Thanks!
Try using max-height.
This will allow you to specify the maximum height the box can be and once it reaches this height it will scroll as you've specified.
Did you mean you want the div to have its height variable, depending on the size of content? Then just give height: auto instead of giving a fixed height of 300px. height: auto will adjust the height of the div based on the content size. Also define max-height property if you want to limit the maximum height the div can extend to.
How do i set the table under the images to be the same width as the image above? Thanks for your help!
http://cran-web.com/letaky/generate/10
EDIT: I was talking about "tab_cena", not "tab_objednavky". Sorry for misunderstanding.
Set the width of your table (#tab_objednavky) to 100%.
Currently your style shows that you have the width of your table set to 160%.
(Nazdar!)
There are only 2 kinds of measurements you can give the table: a fixed width like 1000px, or a percentage like 100%. If you give a fixed width, then you have to know the width of the items above (4 cells, 249px each). If you give a percentage, then it depends on the size of the element that contains your table.
You can use a percentage to your advantage. Since your table is in a 249px cell and you want it to stretch across 4 cells, try setting the width to 400%. It's a little bit of a hack because you're breaking out of the cell container, but it should work.
A better way would be to make the .cell equal 249px x 4 (996px), and just make the #tab_objednavky table inside it 100% width.
Edit: to answer your question based on the title of your post: you can't do that without using JavaScript to set the size of the container div.
Not sure I am fully understanding, but #tab_objednavky style you have width: 160%. Just set that to width: 100% and it will fill the .cell container.
Looking at your layout it looks like the width of the image containers is set by the class .cell_1, so just add it to your table and you should set. (Actually you should replace the existing cell class that is already applied to it.)
Why don't you just place the image as the first row of the table?