I had to to let a hover div menu get out of its container, so I declared that container with overflow: visible and it works, but now that container has lost its margin-bottom with the rest of the following in the list.
I've read this question and this one, as well as read a few other articles, and have tried putting paddings and the html code referenced on different elements, but I can't get what is going wrong in my specific case.
The url is http://melopienso.com/testingtwo/shop/ and each "ul.products li" should be having the bottom margin.
Any ideas? Thank you very much for your help!
The problem is that the element you want the margin-bottom on are floated. Therefore they don't extend their parent's height. so if you aply the margin on the parent, it will be "under" the floated elements.
Explanation for your case :
In your example li.product has 2 children : a and gk-columns . .gk-columns has only floated children so its height is 0 because floated elements don't extend parent's height. Therefore the height of li.product is only extended by the a tag which is 28px.
So if you aply margin-bottom:50px; on li.product it will push the content only of
28px + 50px = 78px
which is less than the height of the floated div.
You can solve this with several solutions :
solution 1
add the margin-bottom on the floated elements like this for your example :
.gk-columns>div{
margin-bottom:50px;
}
Solution 2
if the height of the children elements is fixed set the height to the parent element so it covers the height of the floated children like this for you example :
.gk-columns{
height:159px;
}
Related
I want to know the real height of an element no matters what it have inside. That's easy. The problem began when I put away the borders of the element and notice an strange behavior, see it here:
http://jsfiddle.net/LypZR/
First div: 122px: OK (children height 100px, children margins 20px, border 2px)
.bordered {
border: 1px solid #000;
}
Second div: 120px: OK (children height 100px, children margins 20px)
.display-inline-block {
display: inline-block;
}
Thirth div: 100px: What? where are the margins?
I solved it using display: inline-block that works just fine for me (in this particular case). But I really want to know what is exactly happening.
I think you're getting surprised by margin collapsing.
The two cases that margins collapse are between adjacent sibling elements and between parent and child elements.
In your case, it's the parent/child collapse that's causing you grief: If you have nothing interesting between the top margin of your parent and the (top margin of its first child|bottom margin of its last child), the parent margin collapses. The transparent border hack is commonly-used in these cases.
You probably noted that it didn't change the actual layout values--the p tag's margin kept the visible elements from collapsing into each other. But I admit it's counterintuitive.
That's called the margin collapsing.
When the child element is given margin and parent element don't have any content in it, this happens.
add this class and its done.
.no-bordered{
overflow:auto;
}
Fiddle : http://jsfiddle.net/LypZR/3/
you can see real height without any collapse if you use the right css selector for all the elements *, so:
* {
height: 100px;
margin: 10px;
}
Like you did it's like a quirk behave for me because I don't know .element selector, and if you look inside the consolle could you see that no margin is applied in the styles tab, but only a computed height is calculated, perhaps for some strange behavior it isn't suppouse to work right. till I know only height width and padding are considerate for real element dimensions.
margins should not be considerate for real element dimensions, this is only an IE issue who do such calc adding margin to real element dimensions. jsfiddle
I have tried a dozen different solutions and nothing seems to work.
http://betelec.ergonomiq.net/societe/offres-d-emploi
On the page above, I want the teal background of the left sidenav to extend to the height of the white container around it.
The white container gets its height defined by the height of the largest child div (in this case, the mainbody).
I have tried setting the sidenav's div height to auto, but the div remains fixed height. If I set the div to a very large number like 10000px and have overflow hidden, nothing gets hidden.
I am completely at a loss.
Set parent element to position: relative; and then the child element to position: absolute; height: 100%;
Live example.
http://jsfiddle.net/pQdAr/
It looks like your left sidebar is positioned by float:left.
The following post may help you. How to match height of floating sibling divs
I have a ul that's the height of the page. I'd like it to be able to scroll inside of that ul. That can be seen here: http://d.saew.it/pRyz
As you can see, it can scroll as the height of the page. Now, I also want it to have a header, as you can see there. It should be "fixed" on the top, but the width of the ul list is variable, therefore I can not set it to fixed as it can't be centered in a parent of variable width.
Now, what I have works almost perfectly, except for the fact that the height: 100% of the ul to be the height of the parent (same as the window), while the div header still takes up space above it. Therefore, this throws the ul a few pixels off the end of the parent element. Check it out: http://d.saew.it/NXL1
Is there any way of accomplishing what I'm trying in pure CSS?
Edit:
The code is in stylus, but anyone should still be able to read it:
div.ul-header
background-color #E6E6E6
text-align center
margin 0
ul
background-color #E6E6E6
height 100%
margin 0
overflow-x hidden
All parents of these elements have height: 100%; on them to allow for it to reach the window's height.
I'm not totally clear what you want, but this is my best guess.
Basically what you're doing is using absolute positioning and overflow rules to control what scrolls, and where it appears.
The container holds both the header and the scrollable list, and has height: 100% within the page body. It also has position: relative so that its child elements can be positioned absolutely.
The child elements - the header and the list - both have position: absolute. This is so that you can force the list to have a height that's both restricted (so its content overflows) and variable (according to the height of its parent), i.e. it should always be exactly the height of its parent, minus the height of the header. Note that the value of its top property needs to correspond to the total height of the header - including padding and border.
Then to get your scrolling list, you can just use overflow: auto on the list.
To get your centered text in the header is as simple as text-align: center, which will work no matter the width of the container.
I have a parent div that has a bunch of child divs inside it. I want the child divs to be horizontally laid out beside each other. Which means the parent div can not be set to an exact width amount as the image amount will change all the time. So I presumed setting the parent div to width:100% then the children div items inside it I would float:left.
It will only work if I give the parent div a set width that matches the width of all the child divs inside it. Is there a way to have it 100% and lay the children divs out side by side horizontally inside the parent.
Take a look at this example fiddle - is this what you want?
Essentially, you just need to declare the following on your wrapper div, thats all
#wrapper{
white-space:nowrap;
overflow:hidden; /* whatever suits you - could be scroll as well*/
}
you don't need to float the images, as they are no block-level elements per default.
If I set the CSS margin properties of a div like so:
div { margin-left: auto; margin-right: auto; }
I get a div which is centered horizontally in the page, like so.
However, if I change the CSS to this:
div { margin-top: auto; margin-bottom: auto; }
my div is not vertically centered. I don't need to know a workaround (plenty of solutions are available) but I would like to know the reason for this behaviour. Why don't margin-top and margin-bottom work in the same way? What am I missing?
The short answer is the spec says so.
10.6.2 Inline replaced elements, block-level replaced elements in normal flow, 'inline-block' replaced elements in normal flow and floating replaced elements
If 'margin-top', or 'margin-bottom' are 'auto', their used value is 0.
http://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins
Assuming we are talking about auto margins within a Flexbox..
The reason that margin-left and margin-right set to auto will center an item is because the width by default is 100% of the available container for a block element.
The height on the other hand attempts to fill as little as the space as possible, so margin-top and margin-bottom as auto will default to 0. BUT, if your element is within an element with a fixed height, then margin-top and margin-bottom will be able to calculate the center based on that height.
Ex. http://jsfiddle.net/jwz76e3g/24/