I have a div with no set hieght and a min-height of 250px.
When I put in content that is taller than 250px, the div gets longer, as expected.
When I put in a table, the div remains 250px and the table extends outside the div area (in height only, not width).
I tried adding style="display: block;" to the table, but that didnt help.
I have no idea why a table specificly would be a problem in this situaltion.
Maybe its a specific CSS thing?
If you are using IE7
try using the property. of your div that is miss-behaving.
display: inline-block
You can create a class that is quick and easy to apply for this problem.
.inlineblk {
display: inline-block
}
Related
I've created a css div table (display: table, table-row, table-cell). On one of the rows (div display:table-row) I'd like to set the height to 1px. I tried line-height:1px but it looks like this style is only applied if I include some type of text within the div like  . However, if I include   in the div, it appears that a minimum line-height of approx 10px is applied. Is there an approach that I can use within this div table to achieve a 1px height of this div?
Please try the followings:
style = "max-height: 1px;"
Adding zero font size to the specific row will help to remove space.
div.empty-div-row {
font-size: 0;
}
I've got the following HTML and CSS
http://jsfiddle.net/x7zr999s/
If the browser is small enough, it gives the desired result:
But if it's big enough, there are two or more items per line:
Is there any way to prevent this without disabling float: left or enabling anything that breaks it? I want the posts to "wrap" around the original post like in the images.
This problem appears because you have a fix width on your div. In your fiddle you have given the div, a width of 100, so when the screen widther, and because your div are all floated left they fill in the extra space and that is what happen to your case.
// this code is from the fiddle you create
<div class="reply" width=100 height=100>reply 1</div>
There are some way to solve this. and the easy way is to wrap your div and put exact width you desire. so when the screen widther your floated div will remain to there same position.
This is a demo.
In the demo i put extra div before the end tag of div wrapper and have a class name blocker that help not to break your layout. if you can see in your style are class blocker style is clear:both this article explain about Clearing floats
hope this help...
You can insert you code into a wrapper and give it a maximum width:
#wrap {
width: 100%;
max-width: 1400px;
}
.op, .reply {
float: left
}
.reply {
min-width: 51%;
}
<div id="wrap">
<div class="op"></div>
<div class="reply"></div>
<div class="reply"></div>
<!-- ... more to go ... -->
</div>
Set CSS attribute max-width to the parent div. It sets the maximum width that the parent can extend to. The default width is 100% of the window size. However max-width property restricts further extension of width after the specified maximum value.
Float left wraps child elements if the required parent's width is available. In your case you can restrict it by not allowing the parent's width to extend after a certain point so that the child divs wraps in the given space i.e. in 1 column (required).
On my website i have the following layout:
outer-div with display: table
inner-div with display: table-row and width/height 100%
list-div with display: table-cell and width 25%
detail-div with display: table-cell and height 75%
Inside the list-div there is a ul with a few li elements. In the detail-div there is another div with width/height 100%. Here is an image how it looks at the beginning:
http://puu.sh/5e1wo.png
Notice the top margin of the list elements. When i click on one of the projects the idea is to add its (html-)description inside the detail-div element. While it works it oddly also affects the margin of the list-elements as you can see in the next pictures: http://puu.sh/5e1HI.png
http://puu.sh/5e1Iq.png
It somehow seems like the list elements are aligned to the content in the other div even if their first common anchestor is like 3 levels above. Is there a way to avoid this?
Open next inline-element using webkit-triads and then cross-ckeck the view with what u want. it works with chrome. do u have chrome or not?
I am trying to make an 'a' element fill the full height of the div, however I do not want it to take the full width.
It appears that my display:block is not helping me at all. Anyone know how to make this div full height? The height is variable, though. That's the point.
You should use display: inline-block; instead of using display: block; because using block will take up 100% of width where inline-block won't, like this : My Fiddle
Pertaining to html, how do I make a div container grow with the content instead of manually defining a width and height.
<div id="container">
<div id="logo">
<img src="someimage.png"/>
</div>
</div>
No matter what the dimensions of logo are, container does not grow with it. :(
How would I fix this, or can it be fixed?
If you don't define width and/or height, the div element grows along with its content. Unless his content is set to absolute! If the content is set to float, you have to set to the container
overflow:hidden
in order to let it grow!
The default behaviour for divs is to fill the entire available width. A few ways to override this:
set display: inline-block (not IE-friendly)
float it (with the side effect of, well, floating it)
set display: inline (but that's almost never what you want)
set position: absolute
hard-code a width (no dynamic width though)
As a last resort, consider javascript.
Use the magical css property called "flex", it is really amazing
yourDiv{
display:flex;
}
Just make sure that the children are not position: absolute because this will not work with flex.
You can specify min-width and min-height and DIV will adjust width / height as the content changes (of course, not below min width/height).
Working code pen example
Most important css properties from the code (DIV is editable, so just type in text and it will grow with it by width / height):
min-height: 200px;
min-width: 100px;
If you used float it prevents <div> to grow up with content so you can use clear after float and it will work.
<div class="clear-fix"></div>
.clear-fix{
clear: both;
}