Can I set the height of a div inside a table to 100%? Failing that, can I use a span instead?
I've seen this answer but it doesn't mention anything about 100%.
[I need to use divs because they have dynamic content loading into them]
EDIT
In the images below you'll see that display is table-cell, I've set it to block and inline-block with the same result
Yes you can as long as the element is block or inline-block as it states in the answer you posted. Div's are block level by default and spans are inline, so need css display:inline-block or display:block.
Like this? If you uncomment the // from before the height, it fills the td it is inside, is that what you are asking?
Related
I would like to understand this weird behaviour, I have a div wrapping another div.
parent is display inline block , and child is display none or block inside, whenever the child is block - the parent go down from the line, see example below:
this is display none in child:
and this is display block
adding the CSS of the parent:
can anyone explain please this behaviour?
When use display:inline-block, add vertical-align:top;
display:block pushes the element to a new line. When you say display of child is none, it tries to fit the element inline with other elements. Hence such a behaviour is observed.
Check this link for detail on display property of css
What is the default behaviour of a div?
I noticed that even if a put a width for a div let's say 100px,
if i put a 2nd div with the same width will put it on the second line.so by default doesn't matter the width. it puts it on different lines?
in this case i understand the need of float.
I thought that any element i put in a html page,they will be side by side unless i add a break element or paragraph or something with that role.
Or maybe i do not use it correctly the div for this kind of alignment,but i really want to
clarify this for good.
A div element is, by default, display: block.
This value causes an element to generate a block box.
The rendering of them is described here
Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the 'display' property make an element block-level: 'block', 'list-item', and 'table'.
Block-level boxes are boxes that participate in a block formatting context.
and then here
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block.
To stop this kind of rendering, you can use float to cause block level elements to bubble up beside each other. You can also modify the display property of the div.
Divs are block-level elements which mean they stack...like blocks. Although it sounds reasonable that since the width would allow them to fit side-by-side without a float, this is not how they are designed to behave.
If an element is an inline element as opposed to a block, its behavior is to fit side-by-side. You can force this behavior on a div if you would like by tying the two ideas together. You can do something like:
<div style="display:inline-block"></div>
This will allow the div to maintain its other block properties but allow it to fit inline as text and images would and, if this the your desired goal, avoid the use of float.
The DIV by default takes 100% of the screen, even if you set it width the space on the right cannot be occupied by anything.
Try this:
The way to have two div on the same line would be to make them float:
<div style = 'float:left;width:500px;background-color:red;color:white;'>Hey</div>
<div style = 'float:left;width:100px;'> There</div>
Pretty simple question really when I make a div inline it seems to lose its height?
Any ideas? I'm scratching my head....
UPDATE: after fiddling around I found another display type called "inline-block" which seems to allow me to keep items inline (unordered lists for example) and then set a height for them.
Is this a solution to the problem of inline elements losing the height setting?
Inline elements don't have heights... You've reached the very essence of difference between inline and block.
The height of an inline element is dictated by the line-height of the parent element, with whose contents they're now in-line. Therefore they're unable to have an explicit height of their own.
Similarly for the width, except that's dictated by the width of the contents.
I have found that if I use an inline-block I can make elements sit inline but not lose the height.
I'm trying to get the div wrapper to surround all the divs within it so depending on the amount of content the height of wrapper will grow.
I guessed that the way of doing this would be to set height: 100% but as you can see from the screen grab below, this is not the case.
Where it says 'No :-(' is what having height: 100% is doing where ideally I would like wrapper to be at the bottom where it says 'Yes' and I have drawn a red line.
Any help is much appreciated.
If you are using floats, giving the container overflow:hidden might fix the problem. If no fixed size is given to the div, this makes it stretch over the floated elements.
If you have absolutely positioned elements inside the container, it would be good to see the html/css for a solution.
Sounds like you need a clearfix.
http://css-tricks.com/snippets/css/clear-fix/
You'll want to define the clearfix class (as stated in the above link) add .clearfix to the #wrapper.
Can you post a link to the css?
The first thing that comes to my mind is the position attribute of the divs inside the wrapper. If they are set to float or absolute they will not be contained in the wrapper. That is intended behavior.
i.e. Here is a nice article about containing floats:
http://complexspiral.com/publications/containing-floats/
If, as is likely, that is the problem, you can either relative-position the inside divs or, if you are using floats, you can add an invisible block-displayed hr at the end of the wrapper, like so:
<div id="wrapper">
/*All divs to be contained here*/
<hr style="display:block;clear:left;visibility:hidden;">
</div>
The clear:left; is what gets rid of the "floating" of the previous elements. THe 'left' should be changed according to your floats.
More in the article above, this is the method i like best.
How do you choose when to use DIV and when SPAN, to wrap something?
Many time when we make PSD 2 HTML, in some conditions to get any effect or to wrap something to get needed effect, we use div or span.
And I know div is block level element and span is inline level element and we can change display properties through CSS. and I also know div cannot come inside span.
What are cases when you use div as a display:inline and span as a display:block? and should we try to avoid those scenarios? is this semantically incorrect?
and when we use blank div or span (no content inside) to get some effect, than which is correct?
As you note, you should use divs as dividers of blocks, and spans for marking inline content.
And yes, you should try to avoid changing the display types of them.
Regarding blank element, div is better as you can define its width and height while for span it won't have proper effect.
Most simple example to prove this point can be seen in action here: http://jsfiddle.net/yahavbr/4DZkV/
This is still a good question but the suggested answers only seem to address part of the question. There are three CSS display types, which help put this into perspective: inline, block, and inline-block. If you read this other Stackoverflow topic, CSS display: inline vs inline-block, I think you'll get some useful guidelines. For example, if you need to ensure the element has distinct top and bottom padding and margins, then it probably needs to be a div (with CSS style inline-block), otherwise a span is probably a better choice.