According to Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification,
when an element is given a float property other than none, it implicitly sets display to block, but the way i see it, its behaving like an inline-block element as it doesn't take 100% of it's parent's width.
an example:
These two blue bloxes are floated to the left so they implicitly set to display:block but they are not taking the whole width of the wrapper div (red-colored rectangle).
HTML Code
<div class="wrapper cf">
<div class="box"></div>
<div class="box"></div>
</div>
CSS Code
.wrapper {
background-color: red;
padding: 10px;
}
.box {
margin: 10px;
height: 100px;
width: 100px;
background: lightblue;
float: left;
}
.cf:after {
content: "";
display: block;
clear: both;
}
“There is a simple solution that fixes many of the IE float bugs. All floats become a block box; the standard says that the display property is to be ignored for floats, unless it’s specified as none. If we set display:inline for a floating element, some of the IE/Win bugs disappears as if by magic. IE/Win doesn’t make the element into an inline box, but many of the bugs are fixed.”
[Float Layouts]
As that suggests, the primary reason the block is added is for fixing issues that came up with floats in IE. Although the display:block is implicitly defined, display values aren't technically applied to floated elements except for if it is set to none.
If you want to learn more about floats, this is a pretty good article: CSS Float Theory: Things You Should Know
Related
I've been doing CSS for a while now but couldn't figure out what's going here. Feeling really dumb :) Could you explain the behaviour?
.parent {
display:inline-block;
}
.child {
border: 2px solid red;
padding: 20px; /* this works as expected */
padding: 20%;
box-sizing: border-box; /* makes no difference */
}
<div class="parent">
<div class="child">CSSisAwesome</div>
</div>
You are facing a cyclic calculation due to the use of percentage value. The parent is an inline-block element so its width is defined by its content and that same content is using a percentage value so the content need a reference for that percentage which is the width of the parent. You have a cycle.
In such case, the browser will first ignore the padding to define the parent width and then calculate the padding BUT we don't get to calculate the parent width again because will have an infinite loop.
Check this:
.parent {
display: inline-block;
}
.child {
border: 2px solid red;
}
<div class="parent">
<div class="child">CSSisAwesome</div>
</div>
<br>
<br>
<div class="parent">
<div class="child" style="padding: 20%;">CSSisAwesome</div>
</div>
Note how in both cases, the width of the parent is the same and that width is defined by the content. The padding is added later and create an overflow.
You can find mode detail in the Specification
Sometimes the size of a percentage-sized box’s containing block depends on the intrinsic size contribution of the box itself, creating a cyclic dependency.
Related questions:
Why does percentage padding break my flex item?
CSS Grid - unnecessary word break
How percentage truly works compared to other units in different situations
As seen in this CSSTricks article, padding using percentage units is in relation to the parent container, not the content within the element. The 20% padding you're setting in your code snippet is in relation to the .parent div's dimensions, not in relation to the content within the .child div.
If you are using % as a unit, Parent should have fixed width and height
For past hours I've been struggling with the following problem:
I have two div elements wrapped inside a contaier, which itself is wrapped inside multiple other divs.
The container div has display:flex.
I have created a minimal code example hosted on codepen containing the same code listed in here
<div class="samples">
<div class="sample">
<div class="flex-parent">
<div class="div1">
<div>I'm div 1</div>
</div>
<div class="div2">I'm div 2</div>
</div>
</div>
</div>
The CSS code is pretty straight forward. I want the first element the be the
size of its content and the second one to grow the remaining width
* {
box-sizing: border-box;
}
.samples {
background: #2B2B2B;
}
.samples .sample {
padding: 50px;
}
.flex-parent {
border: 1px dashed green;
display: flex;
height: 100px;
}
.flex-parent .div1 {
flex-shrink: 0;
background-color: #D3394C;
}
.flex-parent .div2 {
flex-grow: 1;
}
But the surprising problem was that the first element was not extending fully in terms of height and leaving an empty pixel space after him, as you can see in the image below (made from codepen)
BUT
Looks like the problem solves itself when you remove this part
.samples .sample {
padding: 50px;
}
from the code, thus removing the padding of the sample wrapper.
BUT2 it shouldn't have any influence on the elements inside the other container, should it?
It believe it should be related to box-sizing: border-box, but I cannot understand why the child elements behave in such a strange way, given the fact that it should correctly have 198px height and leave no empty space after it.
What is the idea behind this, could somebody please explain?
EDIT1: looks like the issue is only present in latest versions of desktop Chrome (65.0.3325.181) and Edge (41.16299.248.0)
EDIT2: on older versions of Chrome (42), it is working as intended.
The problem was in my display scaling 125%, that generated the gap. Bringing it back to 100% solved it.
There must be some issues inside chrome and edge engines (because it works well in Firefox).
For more information, follow the link https://github.com/electron/electron/issues/8332
Situation
html:
<div class="container">
<div class="parent">
<div class="child">x</div>
</div>
</div>
css:
.container {
display: table;
}
.parent {
display: table-cell;
position: relative;
}
.child {
position: absolute;
right: 0;
}
What I expect:
the .child should be positioned to the right edge of .parent. Works in Chrome.
What I get in Firefox:
the .child is positioned to the right edge of the closest "non static" parent which is has not display: table-cell.
Fiddle
http://jsfiddle.net/SYG5k/2
Question
Why does display: table-cell influence the positioning of child elements, or, why is position: relative ignored on table-cell elements? Can I work around this if I rely on table-cell?
You need to put position: relative; in your parent.
So in the code in your question add position: relative; to .container
Or in your jsfiddle add position: relative; to .parent
.parent {
height: 150px;
width: 450px;
display: table;
margin-top: 400px;
background: #bbb;
position:relative;
}
Related : Firefox ignores absolute positioning in table cells and Positioning context on table-cell element in Firefox
About your questioning 'why' : It's no more a 'block' level element. It's a table-cell so positioning will behave in a different way (in this case, with firefox).
See this to understand deeper about 'tables' behaviors
http://jsfiddle.net/SYG5k/12
Add a wrapper to your absolute element and make it relative, so you will have something like table-cell > relative wrapper > absolute element
http://jsfiddle.net/SYG5k/13/
<div class="rel">
a
<div class="absolute">x</div>
</div>
.foo, .rel {
position: relative;
}
This is a work around I can't explain why it doesn't work normally. Perhaps someone else will answer that for you
Edit : my mistake the wrapper is supposed to wrap everything in the cell, it's what I originally wanted to code, more of a typo. I updated the fiddle above
A work around may be to use an inner div with a width and height of 100%, and set that to position:relative;
HTML:
<div class="parent">
<div class="cell foo">
<div class="cellInner">
a
<div class="absolute">x</div>
</div>
</div>
CSS:
.cellInner{
position:relative;
width:100%;
height:100%;
}
Updated JS Fiddle: http://jsfiddle.net/SYG5k/11/
I was adding a popup menu that appears on each row of the table as the user mouses over it when I ran into this FF problem. Based on the very useful info above, I ended up putting a div wrapper inside the table cell in each row where I wanted my absolutely positioned popover menu to located, and set its display property to relative. My JS then adds the absolutely position menu inside the div as each row is rolled - it has to be a child of the the relatively positioned div, of course. Note that the div will shrink-wrap the td's content rather than filling the td as I expected, but no matter, you then have a relative context, and you can use top and left on the absolutely positioned child element to locate it exactly where you want it with respect to the table cell.
This (http://jsfiddle.net/77RRA/1/) is working, while this (http://jsfiddle.net/77RRA/) is not.
Isn't clearfix supposed to substitute the line <div style="clear: both;"></div>?
Isn't clearfix supposed to substitute the line <div style="clear: both;"></div>
Yes. The clearfix is there to avoid a non-semantic empty tag. However, for this to work you need to place it on the parent element. (Example)
In your case however, it does not address the problem that siblings will ignore the floated element. This is not the intend of clearfix, you simply add clear:right (or both as you will) on your #child sibling to restore the normal document flow.
your fixed Example
"Isn't clearfix supposed to substitute the line <div style="clear: both;"></div>?"
No
Imagine you have a container holding several items. If all of those items are floating, the container effectively loses its information of height. So margin-bottoms and background-styles are being displayed wrong. The clearfix solves this problem by adding pseudo-elements before and after the container element + setting a display: table; to stretch it back to its full height.
In your case, you will have to add a clear: both; on #child
In your case , you are trying to clear floatting element from itself (with a pseudo-element that belongs to itself).
Clear should be on elements following floatting elements.
Some other rules can achieve this too.
http://jsfiddle.net/77RRA/6/
#main {
background: lightgreen;
width: 100px;
height: 200px;
}
#one {
float: right;
display: block;
}
#child {
background: red;
width: 100%;
height: 20px;
display:inline-block
}
display:inline-block; will clear this element from floatting elements any sides.
I'm new to CSS tables, it's my first time. So I discovered that when you set display:table to a div, you can forgot all margin and padding (and whatever) you're planning on it's future cause they are ignored. Nice. The only property I've found to make this job is border-spacing but it is a little limited comparing with margin and padding. It have only two ways of styling, horizontal and vertical. You can't set the value of the side you want like border-spacing-left or border-spacing: 0 1px 2px 3px.
In my case, I have a table with one row that lies on the top right corner of the screen. I want it attached on the very top and spaced horizontally, which caused me problems. The top is okay but the right detaches from the border when I use border-spacing: 10px 0.
Smart guys like me don't see this as a problem, cause we can set it margin-right negatively, making it be attached again on the right side of the browser. Wow, whata smart ass I am!
However, I saw an little damn scrollbar on the bottom of the screen like a roach under your cooker at the kitchen. I hate roac.. scrollbars specially horizontals, so I got my inseticide called overflow-x and kil.. set it to hidden. She run desperately and dissapeared, but I know that she's there, somewhere staring at me. And this is driving me crazy.
Seriously now. I think this isn't the right way to do that and I hope somebody can teach me how to do it.
This is my scenario on Fiddle
Thank you in advance(mainly for reading this crap).
There are a few ways of achieving what you're trying to achieve. Most commonly, using display: table, display: table-cell, etc isn't very high on the list.
So, here's how I would do it: http://jsfiddle.net/VKnQZ/1/
Do bear in mind that I don't know the full circumstance of what you're attempting so it may well be that I'm missing a (valid) reason that you're using table display properties in the first place.
You'll notice a few things here:
I've done away with your table display properties. I don't think you need them, and floats do the job just fine (just remember to clear them).
I've removed your display from the cell divs. As someone in the comments above pointed out, divs inherit display: block by default. The additional dimensions set their size as you already had it.
I'm using the + selector to put in the spacing between elements. In this instance div + div is essentially short-hand for 'every div which is beside another div' - so all of them aside from the first.
Hopefully that achieves what you're aiming for and does away with all the nasty hacky overflow/margins/etc.
Here's the code:
HTML (only change is to remove the row div):
<div id="nav">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
CSS:
body {
padding: 0;
margin: 0;
}
#nav {
float: right;
}
#nav div {
float: left;
width: 120px;
height: 40px;
}
#nav div + div{
margin-left: 10px;
}
.red { background-color:#f00 }
.green { background-color:#0f0 }
.blue { background-color:#00f }
and can you tell me why are you trying to imitate table behavior when you have "table" tag? it could be styled pretty well also
what you are doing is sometimes called "divitis"
edit:
you can position table absolutely http://jsfiddle.net/n83kT/
Not too sure if this the right place to discuss float and display :)
But , flex is on his way, and display is already quiet efficient.
Display + direction and you could kick floats away.
border-spacing version : http://jsfiddle.net/GCyrillus/2EZ3F/
border-left version : http://jsfiddle.net/GCyrillus/2EZ3F/1/
<section>
<div id="nav">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
</section>
section is to set direction .. or not
unset & reset direction to fake float ,
else use text-align if you dislike this method.
In CSSheet, notice inline-table instead of table so it reacts to text-align and or direction (not all pages are EN or FR :) )
body {
padding: 0;
margin: 0;
}
section {
direction:rtl; /* unset regular if you wish, else text-align will do for inline-boxes */
}
#nav {
direction:ltr;/* reset/set here if you want cells from left to right */
display:inline-table;
border-spacing: 10px 0 ;
}
#nav div {
/*direction:ltr; reset here if you want cells from right to left */
display: table-cell;
width: 120px;
height: 40px;
}
#nav div + div {
margin-left: 10px;
}
.red {
background-color:#f00
}
.green {
background-color:#0f0
}
.blue {
background-color:#00f
}
My 2 (late) cents for a different point of view :)
For completeness, I would like to offer the case for the often overlooked inline-block display type.
Similar to the use of floats, the HTML is as follows:
<div id="nav">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
and the CSS:
#nav {
position:absolute;
top:0;
right:0;
}
#nav div {
width: 120px;
height: 40px;
display: inline-block;
vertical-align: bottom;
}
#nav div + div {
margin-left: 10px;
}
This inline-block approach behaves similarly to the floated-child-div's approach.
In this application, I can't think of a reason to use one over the other.
One minor consideration is that inline-block is not supported in some older browsers.
Otherwise, both approaches use the same mark-up and the CSS rules are similarly simple.
The choice may depend a lot on the content that you use in the #nav div elements.
Demo fiddle: http://jsfiddle.net/audetwebdesign/EVJPN/