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
Related
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>
What is the difference between setting a control's style display: none and display: block?
The display property defines how a certain HTML element should be displayed. Display block and none are used to show or hide html elements. You can read more about display property and available options here.
none: The element will not be displayed at all.
block: The element displayed as a block-level element (like paragraphs and headers)
Display:none; - The element is in the DOM but is NOT visible and does not take up any space unlike visibility:hidden.
Display: block; - A block element takes up the full width available and does not allow other elements to be placed beside them. Example: div
These two style properties do two different things.
display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code. (The element will generate no box at all)
display: block the element will span the full width of the space available to it. (a line break before and after the element)
You are asking about a CSS property i think. This is used to show/hide DOM elements
CSS property is display and the value is 'none', 'block', etc
Referring from : CSS Display as suggested by http://w3fools.com/
block
Object is rendered as a block element.
none
Element is not rendered. The element (it has no effect on layout); all child elements also have their display turned off. The document is rendered as though the element did not exist.
inline
Default. Object is rendered as an inline element sized by the dimensions of the content.
list-item
Internet Explorer 6 and later. Object is rendered as a block element, and a list-item marker is added.
table-header-group
Object is rendered as tHead. Table header is always displayed before all other rows and row groups, and after any top captions. The header is displayed on each document spanned by a table.
table-footer-group
Object is rendered as tFoot. Table footer is always displayed after all other rows and row groups, and before any bottom captions. The footer is displayed on each document spanned by a table.
inline-block
Object is rendered inline, but the contents of the object are rendered as a block element. Adjacent inline elements are rendered on the same line, space permitting.
Display:none; means the element will not be displayed, and Display:block; means the element is displayed as a block-level element (like paragraphs and headers).
There is another nuance to display:none; if you dynamically insert a div as a child to a parent div--and you explicitly set the visibility property of the child to "visible", the visibility property of the parent will only make the parent visible/invisible; the child will remain visible, regardless of the parent's visibility setting.
In such a case (where parent/child visibility are set by different style rules), the display:none setting on the parent will hide all the children--even if parent/children are styled independently.emphasized text
display: none means that the element is not displayed at all (so you won't see it in the example either).
display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise
Display None: it hides the control. by setting the property of element style="display:none" element will not rendered in webpage and not take place
Display Block: Show the element on web page in block level
Display none will hide the contains, here if you apply it on div then width and height of div will also hide.
Display block will show the contains.
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?
Here is a very simply jsFiddle to demonstrate my problem: http://jsfiddle.net/ryandlf/mSmUv/4/
When an element has a top padding or margin and it sits on the first line within a div, the div does not respect that padding or margin and push the element down. In most cases this isn't an issue, but for example, if I have a button that has a top border and padding the top of the border will be cut off because the div is not taking into consideration the padding value.
Is there a workaround for this other than just blindly setting margins or padding on every container div element and hoping I have added enough to account for any internal element that might be affected?
your link with class button is not a block element, it is inline element. Change this default behaviour by adding dispaly: block to it and it will work as expected. Proof available on jsfiddle.
So to sum up, the problem is not with the div - it is the problem with css - inline elements ignore margin and padding because they cannot 'reserve space'.
UPDATE: To answer your comment, here is the solution you might be looking for
The button element is inline. To get the desired behavior you can set display:inline-block.
Check here
Try to add following to the parent div:
overflow: hidden
I hope it helps!
When I remove the display:block from a p inside a div, it ignores the top-margin or it's own hight or something like that. It snuggles up right next to the element above it. Does anyone know why?
The div is floated, the element above is not.
Inline elements simply don't take vertical margins or height into account. Block elements do.
Edit:
In response to comments, it looks like there are two issues at play here.
You have two elements with id='generals'. Change this to class='generals'.
Add overflow: hidden to your generals style. All of the elements inside it are floated, and so don't apply to the height of the element. Adding overflow: hidden changes how the element is displayed, clearing all the floats inside it.