This is a continuation of the following question:
CSS Float - The content stays in the default stack position
When I am adding a block element(p element) inside box1, (which comes after the floated box0), the p element wraps as expected. However, it is not starting from the edge of the container. Please see the image.
Also, the behaviour is different when I add display: inline-block, or float:left, or overflow:hidden to the paragraph element. Can someone please explain these scenarios?
http://jsfiddle.net/jintoppy/xGm5E/3/
<div class="box0">Box 0</div>
<div class="box1">Box1 should wrap with text elements.
<p>But, what about block elements? Why it is behaving like this</p>
</div>
.box0 {
width: 100px;
height: 100px;
background-color: green;
float: left;
opacity: .5;
}
.box1 {
width: 200px;
height: 100px;
background-color: red;
}
p {
border: 1px solid #000;
}
There isn't enough room for the text in the p to start a new line there, so it starts only at the right edge of the float, giving the appearance of a gap underneath the float. If you give the p a slightly bigger top margin, there will be enough room for the second line of text to start directly underneath the float:
p {
margin-top: 1.2em;
border: 1px solid #000;
}
You can also increase the line-height as mentioned by others; this will cause the first line to be tall enough for the second line to have room to start underneath the float.
The reason why the boundaries of the p element don't shift completely out of the float is because the p element behaves exactly like .box1, since neither of them are floating. The text wraps in the same way I've described in my previous answer.
The reason why it behaves differently when you add display: inline-block, float: left or overflow: hidden is given in the comments on my previous answer:
overflow: hidden causes the box to generate a block-formatting context, which makes it immune to surrounding floats. That causes the entire box to shift outside of the float and sit right next to it instead.
(Technically, display: inline-block also causes the p element to act like an inline element itself, in other words, it is rendered inline just like the first sentence in .box1, but this has the same effect.)
When neither .box1 nor p are generating block formatting contexts, they are both participating in the same context, which is actually that of the root element. This is what causes them to interact with the float the way you are observing.
Block formatting contexts are a very complicated and broad topic that I would rather not get into myself, but the answer to this question has a nice visual explanation on how they work and how elements interact with one another around them in various scenarios.
I would assume this is to do with the line height.
p {
border: 1px solid #000;
line-height:1.5;
}
This works :)
add overflow: hidden; in box1 class.Try this once.
Related
To preface, I understand how to create a BFC, I am confused on what a BFC actually does.
MDN says that
Elements participating in a BFC use the rules outlined by the CSS Box Model
and the spec says that
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block.
MDN gives the example of a floated div that is out of flow, its height independent from the box parent.
<div class="box">
<div class="float">I am a floated box!</div>
<p>I am content inside the container.</p>
</div>
.box {
background-color: rgb(224, 206, 247);
border: 5px solid rebeccapurple;
/* overflow: hidden; */
}
.float {
float: left;
width: 200px;
height: 150px;
background-color: white;
border:1px solid black;
padding: 10px;
}
And then having the box container ending up filling the height of the floated div. once overflow:hidden is declared which creates a BFC.
.box {
background-color: rgb(224, 206, 247);
border: 5px solid rebeccapurple;
overflow: hidden;
}
How does participating in a BFC end up with this outcome? My thought process:
According to MDN's definition, participating in a BFC makes an element adhere to the box model...but don't all elements, even a floated element, adhere to the box model?
According to the spec's definition, all boxes are laid out vertically, but my-floated div and the p tag are side by side.
It seems that a BFC just makes the container fit all elements participating in its BFC, but if this is the case, then how come using a position: absolute instead of a float: left doesn't provide the same outcome of making the container fit the absolutely positioned element?
e.g.
<div class="box">
<div class="abs">I am an absolutely positioned box!</div>
<p>I am content inside the container.</p>
</div>
.box {
background-color: rgb(224, 206, 247);
border: 5px solid rebeccapurple;
overflow: auto;
position: relative;
height: 50px;
}
.abs {
position: absolute;
top: 250px;
left: 100px;
width: 200px;
height: 150px;
background-color: white;
border:1px solid black;
padding: 10px;
}
Could someone explain what the BFC actually does?
Formatting contexts in general establish a set of rules for the layout of their contents.
The rules for Block formatting contexts are that their in-flow contents are laid out vertically one after the other.
In addition, BFCs have a few side-effects, that exist largely to make the rules established for their contents implementable, such as the way they work in the presence of floats inside or next to them.
Taking your points one by one,
According to MDN's definition, participating in a BFC makes an element adhere to the box model...but don't all elements, even a
floated element, adhere to the box model?
Yes they do. MDN does not actual say that it makes them adhere, just that they do adhere. The MDN statement is rather redundant, but not harmful or incorrect.
According to the spec's definition, all boxes are laid out vertically, but my right-floating div and the p tag are side by side.
This is incorrect. The floating div overlaps the p element. Only the inline content of the p element is side by side with the floating div.
It seems that a BFC just makes the container fit all elements participating in its BFC, but if this is the case, then how come
using a position: absolute instead of a float: left doesn't provide
the same outcome of making the container fit the absolutely
positioned element?
As said above, that BFCs contain their floats is best regarded as a side-effect of the BFC, not really what it does.
Finally, although BFCs provide some isolation of their contents from the outside world, it is not complete. For example, inline-block elements establish BFCs for their contents, but their baselines escape this isolation and are used to vertically align the elements with their inline neighbours.
A BFC is a kind of "isolation" to avoid any interaction of the inside and the outside world of an element. From another part of the MDN you can read:
because an element that establishes a new block formatting context will:
contain internal floats.
exclude external floats.
suppress margin collapsing.
Most of the observation you made (box model, absolute, boxes) aren't related to BFC. Just consider the creation of BFC as a way to encapsulate elements inside (mainly float elements because all the other elements are by default "inside"). Of course, this doesn't apply to absolute/fixed elements because they have their own rule that make them out of the flow.
W3C states that:
Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.
This work as expected with divs:
#a
{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
#b
{
width: 200px;
height: 200px;
display: block;
border: 1px solid black;
background-color: red;
}
<body>
<div id=a></div>
<div id=b></div>
</body>
Here the red div is block-level element, therefore it's ignoring the floating one. (if I changed red one to display: inline-block it would appear next to floating one)
But, if I apply display: block to an image ,it won't ignore the floating div, Why?
#a
{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
#b
{
width: 200px;
height: 200px;
display: block;
border: 1px solid black;
}
<body>
<div id=a></div>
<img id=b src="https://www.gravatar.com/avatar/5cb44dcd4ebddfea3ede8c6d46b02795?s=328&d=identicon&r=PG&f=1">
</body>
Several paragraphs after the one you quote, the spec says:
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself.
Although you've applied display: block to your image, being an image it's a replaced element, and therefore the float cannot intrude into its bounds.
Only non-replaced block boxes that don't establish block formatting contexts and are in the same flow as a float may ignore the float.1 A block-level replaced element is not a block box, because a replaced element cannot be a block container box.2
1 You're probably thinking, that's a ridiculously specific statement, and it is. It's why terms like "block element" are considered extremely vague in CSS parlance. Then again, it doesn't help that CSS itself defines almost equally vague terms like "block box" to specifically refer to boxes that are both block-level boxes and block container boxes.
2 This does imply that "non-replaced block box" is somewhat of a tautology, which reinforces just how ridiculously specific that statement is.
W3C
These are the two things that stuck out to me when viewing the W3C. It's considering it as a line box.
A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there is a line box, the outer top of the floated box is aligned with the top of the current line box.
A line box is next to a float when there exists a vertical position that satisfies all of these four conditions: (a) at or below the top of the line box, (b) at or above the bottom of the line box, (c) below the top margin edge of the float, and (d) above the bottom margin edge of the float.
Most embarassed to be coming to others for help with this if i'm honest, but i have reached my 1 1/2 hr sanity limit.
I want to have a block (with a coloured border) postioned on the right of the page with width suitable to the text content + padding. I want it to reserve the whole row for itself without other element below creeping into the space left on the left.
I realised early on that any width = 100% would mean that the whole row would have the border rather then just the content I wanted and various experiments with float lead to the space on the left being occupied with elements creeping into the space from below. To remedy i have created a containing block with 100% width and display = block and put the border round the child div. Still doesn't work! I have the #costblock being the container and the #costs being the content:
#costsblock {
display: block;
width: 100%;
}
#costs {
border: 1px solid #008eaf;
padding: 10px 5px;
width: auto;
text-align: right;
}
<div id="costsblock">
<div id="costs">The text</div>
</div>
I have experimented with virtually all combinations of display and width and float on both the parent and the child and nothing works - I either get the whole row surrounded by the border or, if I dare to put a float: right anywhere at all then the space on the left gets filled wih elements creeping in from below.
I think that I need to contrain the child width to what is necessary to hold the text only, but I can't seem to get that working!
Your approach with the extra container element did not work, because #post is a block element, and as such still takes the whole width (unless you tell it otherwise). Anyway, there is no need for an extra element.
I want it to reserve the whole row for itself without other element below creeping into the space left on the left.
Then all you have to do is clear the float on the next element:
#costs {
float:right;
border: 1px solid #008eaf;
padding: 10px 5px;
}
#next {
clear:right;
}
<div id="costs">The text</div>
<div id="next">I am the next element following the floating one.</div>
You can use float, but be sure to have an element that has clear: both below the floating element to prevent any elements 'creeping into the space left'.
For example:
<div id="costsblock">
<div id="costs">The text</div>
<div style="clear: both"></div>
</div>
Full example: http://jsfiddle.net/thijs_s/xxc9nk1t/
You should be able do solve this by changing display to inline-block for the child and then setting text-align to right for the parent element:
#costsblock {
text-align:right;
}
#costs {
border: 1px solid #008eaf;
padding: 10px 5px;
display:inline-block;
}
It is not necessary to set display:block for a div element, since they are defined as block level elements by default.
I have a box that contains 2 absolutely positioned header and paragraph elements, I am experimenting on ways on how to center text and I tried tinkering using the method from this site.
Now the issue here isn't about ways on how to position text, because that's not my problem so you should not address that.
My problem is this.
How to make the parent element contain it's children?
Since the parent element contains elements that are absolutely positioned, that means the children are not in the flow and in turn the parent collapses.
Now this is a shocker, because I discovered that the containing/wrapping methods used in the same way for floats DO NOT WORK AT ALL.
Clearfix method.
Clearing div method
Overflow method.
They do not work at all!
The only method that decently works is the "Explicit Height" method which is very inefficient, unpredictable (might break on smaller windows) and not fluid.
Here is a simple, fixed-width rounded corner box who's "h1" and "p" elements I'd like to center using the above referred method.
Sample CSS,
body {
margin: 8px;
padding: 0;}
.box {
margin: 0;
padding: 0;
width: 335px;
position: relative;
background: #40331A url(bottom.gif) no-repeat left bottom;}
.inner {
background: url(top.gif) no-repeat left top;}
.box h2 {
width: 180px;
height: 27px;
top: 50%;}
.box p {
width: 120px;
height: 20px;
top: 50%;}
.box h2, .box p {
margin: 0;
position: absolute;}
Sample markup,
<div class="box">
<div class="inner">
<h2>This is a heading.</h2>
<p>This is a paragraph.</p>
</div>
</div>
So my question.
Is there any simple way to make a parent element contain its absolutely positioned children?
The entire point of absolutely-positioned elements is that the parent of those elements should be laid out as if those elements were never there. If you want the layout of your parent element to take into account its children, don't position them absolutely.
Since you're not including any relevant properties other than position: absolute, it seems completely superfluous, given that absolutely-positioned elements default to their static positions anyway. Just remove that declaration. It doesn't get any simpler than that.
The reason none of those methods work is because they are designed for floats, and absolutely-positioned elements are not floats:
You can't really "clear" anything that isn't a float.
Ditto.
The reason setting overflow works for floats is due to a consequence of the way floats participate in block layout, which does not apply to absolutely-positioned elements. What exactly this entails falls outside the scope of this question, but read up on block formatting contexts.
I was trying to center text in two adjacent divs and I can not understand what I am doing wrong.
Basically I have 2 divs each taken 50% of the window. The first div contains an image (which I successfully centered) and I am trying to center the text in the second div. So here is my Fiddle and I am using the following css:
.thumbnail-descr{
text-align: center;
min-height: 10px;
display: table-cell;
vertical-align: middle;
font-size: 26pt;
color: #bbb;
}
There is no point of having original DOM structure or CSS (the main thing is to have 2 divs taking all the width and one has a centered image another one has a text. How can I achieve it?
What I understand from the example is that you want to vertically center "Descr". There are several tricks to do that:
Adjust the padding and use box-sizing border-box to have better control of the height.
Use flexbox (still not broadly available): https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
If you know before hand that you'll have only one line of text you can use line-height.
(See the update for another option)
For example see this Fiddle:
.square{
width: 45%;
height: 200px;
border: 3px dotted #ddd;
display:inline-block;
margin: 0 10px 0 10px;
line-height: 200px;
}
But take a few things into account:
This will work only if you have one line of text, because on text wrap it will be broken.
This is not the normal use of line height, it's taking advantage of a side effect: text is vertically centered to the line-height.
This trick is used by some CSS frameworks (ie Bootstrap) to center the text on some components.
Update
I forgot another option, since you have one div inside the other you can use position: relative on the parent, and use absolute position for the child using top: 50% and a negative top margin. You'll need to setup the top margin to the half of the child height. (that's how modals are usually centered):
.square { position: relative; /*..*/ }
.thumbnail-descr{
position: absolute;
top: 50%;
margin-top: -10px;
/*...*/
}
See http://jsfiddle.net/diegof79/M4fKM/1/
Also you asked why your solution is not working... this can help to understand the reasons: http://phrogz.net/css/vertical-align/index.html
Before proceeding to giving you the solution, you could have he exact same result with a lot less code, giving so many classes for so little content can only lead to huge code.
The span class you are giving the text-align:center, doesn't fill up the whole width of the parent, so, where would it center the text since its width is equal to the text?
You can either put a 'text-align:center" to the span's parent, the square class, but I would use a different approach in general.
Not sure if you need a span.
If you remove span tag and use same css for the div styles, or simply ad a span class name to a your div class name- works perfectly.
i think the issue happen because the width in the description div
Try this suggestion:
warp the with div, the div will use thumbnail-descr class
<div class='square'>
<div class="thumbnail-descr"><span>Descr</span><div>
</div>
Update the thumbnail-descr
.thumbnail-descr{
text-align: center;
min-height: 10px;
background-color:red;
vertical-align: middle;
font-size: 26pt;
color: #bbb;
width:100%;
}
hope this help