CODEWITHSUNDEEP
css
Devin Rodriguez
Devin Rodriguez

Reputation: 1164

Understanding Some CSS

I've created a barebones example of some CSS I pulled from a tutorial and am wondering if it can be further explained.

http://jsfiddle.net/4t55g/

The setup is that the input field for your name will automatically expand to fill in the space next to the start button. The key here seems to be the overflow property on the span containing it. Why does setting it to hidden allow it to contract to the right width?

Upvotes: 0

Views: 71

Answers (2)

Marc Audet
Marc Audet

Reputation: 46825

This is a nice example of how the CSS box model works.

The HTML looks like:

<div class="formLine">
    <button>start</button>  
    <span><input type="text" placeholder="enter a name"></span>
</div>

And consider the following CSS:

.formLine {
    width:50%;
    outline: 2px dotted red;
}
.formLine span {
    display: block;
    overflow :hidden;
    padding-right:5px;
}
.formLine input {
    border: 2px dotted blue;
    width: 100%;
}
.formLine button {
    width: auto;
    float:right;
}

Fiddle: http://jsfiddle.net/audetwebdesign/ZkxBv/

Why It Works

Your parent container contains a span that is display: block so it will expand to fill in the width of its parent element. The <button> is floated to the right and will cause the content of the <span> to flow around it. In this case, there is only one element, the <input> tag, an inline element. The input tag will expand as much as it can to fill its parent container, the <span>.

If you had declared overflow: visible, the input field would take up the entire width of the parent container and start a line below the button.

However, by declaring overflow: hidden, the browser does something else. The browser tries to place the span on the same line as the floated button and determines that the content of the span is too long (hence overflow condition). The browser than clips the span to accommodate the button, and tries to wrap the content accordingly. In this case, the input button has a variable width so it shrinks to fill the space. Quite clever and it gives a useful result.

You can see the effect by replacing the input button with simple text:

<div class="formLine">
    <button>start</button> 
    <span><em>Some line with a few words that are not too long. As you can see, the text tries to flow around the button on the right.</em></span>
</div>

In this case, the words flow out to the button (but not below) and then wrap to form new lines. If you changed overflow to visible, the text would flow under the button.

Upvotes: 1

j08691
j08691

Reputation: 208012

This is due to block formatting context which is the region in which the layout of block boxes occurs and in which floats interact with each other.

A block formatting context is created by one of the following:

  • the root element or something that contains it
  • floats (elements where float is not none)
  • absolutely positioned elements (elements where position is absolute or fixed)
  • inline-blocks (elements with display: inline-block)
  • table cells (elements with display: table-cell, which is the default for HTML table cells)
  • table captions (elements with display: table-caption, which is the default for HTML table captions)
  • elements where overflow has a value other than visible
  • flex boxes (elements with display: flex or inline-flex)

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

See also: http://www.w3.org/TR/CSS21/visuren.html#block-formatting

Upvotes: 1

Related Questions