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.
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
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!
Say you have a list of articles, some have a right floated image and very little text, so the image floats outside the article and into the next article, messing things up.
What is the correct/preferred/best way to make sure the elements inside the article does not float outside of it?
I know that overflow:hidden works, but is this correct usage? Or does it just happen to do what I want out of chance?
You have three ways to do it:
you can have overflow:hidden which is a clean way to do it.
Pros: It does not mess with semantics of the HTML, No "dead elements".
Cons: clipping the content if the container has a defined dimension, and clips shadows from inner elements.
div <-- style="overflow:hidden"
div <-- floating children
div
div <-- style="overflow:hidden"
div <-- floating children
div
You can have a blank element, usually a <div> after the container that has floats. Style this with clear:both.
Cons: Having a "dead element" in the DOM.
div
div <-- floating children
div
div <-- style="clear:both"
div
div <-- floating children
div
You can add a "clearfix" class to the container and use :after pseudo-class to add a "clearing dynamic dot/space". Basically it works like the second, but uses the :after to insert a space that has "clear:both" This article explains it.
Pros: It does not mess with semantics of the HTML, No "dead elements".
Cons: "classitis" (overuse of classes), :after is not supported in IE7 and older, thus CSS hacks are used
div <-- :after
div <-- floating children
div
" " <-- style="clear:both"
div <-- :after
div <-- floating children
div
You can use either of the three and they work great. I usually use 1 most of the time, and if I had shadows in the container, or if the container has a fixed dimension, I use 3. Method 3 relies on :after which is new. To support this clearfix, youd use an old CSS hack as described in the article.
For each article element, add clear: both;. This will ensure that images don't "leak" on the next article, but also makes sure they're not cut-off.
This link explains exactly what you asked.
overflow: hidden or overflow: auto would be acceptable solutions for clearing floats on smaller containing elements like a navigation bar that holds floated list items, or a call-to-action area that has a bunch of floated boxes.
And the link also explains the problem of using overflow:hidden to clear with a demo.
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.
I am using firebug to debug, one useful feature of firebug is when I click the element in HTML, firebug will show highlight on the actual browser window so that I know which part is currently selected.
But I noticed, with some css, below code is interesting:
<div>
<div>
</div>
</div>
The parent divs highlight area didn't cover the child div's highlight area. In my opinion, the child divs area should be a subset of parent's, is it right? In which cases that that is not true?
There are some cases:
If the child uses position: relative; top: 200px and move away from the parent.
If the child does something similar using a negative margin. (similar to 1)
If the child is a float, and there is no clearing or some kind of clearfix, such as the newest method of making the parent overflow: auto, then the parent will not enclose the floated child.
It is mostly likely because the child divs are floated. In this case you need to use a clearfix hack, or add an additional div into the container like so:
<div style="clear: both"></div>
It depends upon the style being applied. Generally what you are saying holds good. But positioning of a child element can be made independent of the parent.
You may please show the css to get clear idea.
If the inner element is floating or positioned absolutely, it won't affect the size of the parent.
If the inner element is floating you can change the overflow setting of the outer element to make it contain the child. You can specify overflow:hidden; for the parent element, but no size, which has the side effect that it will be sized to contain it's children.