CSS Floating Inline Elements (960 Gs)

CSS Floating inline elements (960 GS)

An element with float: left is forced to have a computed display value of block.

For more information on that, see: jQuery in Chrome returns "block" instead of "inline"

The purpose of also adding display: inline is to fix an IE6 bug, the "double margin bug":

http://www.positioniseverything.net/explorer/doubled-margin.html

A coder innocently places a left float
into a container box, and uses a left
margin on the float to push it away
from the left side of the container.
Seems pretty simple, right? Well it is
until it's viewed in IE6. In that
browser the left float margin has
mysteriously been doubled in length!

It's a free fix with no downsides (even in IE6):

That means that {display: inline;} on
a float should be no different than
using {display: block;} (or no display
value at all), and indeed all browsers
follow this specification, including
IE. But, this does somehow trigger IE
to stop doubling the float's margin.
Thus, this fix can be applied
straight, without any fussy hiding
methods.

In fact, you could just apply the
Inline Fix to all floats if you like,
since there are no known side-effects.
That way the bug can never gain
traction regardless of any margins you
might or might not use.

Redundant CSS rules ie float & display:block

I just found out that floating an
element will also make it a block,
therefore specifying a float property
and display:block is redundant.

Yes, display: block is redundant if you've specified float: left (or right).

(What would happen if you tried to
specify display:inline and float:left?
)

display: inline will not make any difference, because setting float: left forces display: block "no matter what":

http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo

Otherwise, if 'float' has a value
other than 'none', the box is floated
and 'display' is set according to the
table below.

To summarize said table: float = display: block.

However, your specific example of float: left; display: inline is useful in one way - it fixes an IE6 bug.

Are there any other examples of
redundant combinations to watch out
for? block & width ? etc,

Some examples:

• If you set position: absolute, then float: none is forced.
• The top, right, bottom, left properties will not have any effect unless position has been set to a value other than the default of static.

Is there a tool that can check for
such things?

I don't think so. It's not something that is ever needed, so I can't see why anybody would have written such a tool.

Difference Between 'display: block; float: left' vs. 'display: inline-block; float: left'?

An answer by @thirtydot might help you... Question's link

I just found out that floating an
element will also make it a block,
therefore specifying a float property
and display:block is redundant.

Yes, display: block is redundant if you've specified float: left (or right).

(What would happen if you tried to
specify display:inline and float:left?
)

display: inline will not make any difference, because setting float: left forces display: block "no matter what":

http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo

Otherwise, if 'float' has a value
other than 'none', the box is floated
and 'display' is set according to the
table below.

To summarize said table: float = display: block.

However, your specific example of float: left; display: inline is useful in one way - it fixes an IE6 bug.

Are there any other examples of
redundant combinations to watch out
for? block & width ? etc,

Some examples:

• If you set position: absolute, then float: none is forced.
• The top, right, bottom, left properties will not have any effect unless position has been set to a value other than the default of static.

Is there a tool that can check for
such things?

I don't think so. It's not something that is ever needed, so I can't see why anybody would have written such a tool.

center grid elements in container (960 grid)

They are not meant to be centered at the first place - the float property arranges elements from left to right, filling up the width of the entire container (left to right) until it exceeds the width of the container, and the continues on the next line. Therefore all elements will be flushed towards the left and not centered.

In short, you can't center floated elements unless you set display: inline-block on them (and remove the float), and then text-align: center on the parent element. To mitigate the issue where a whitespace is present between each inline-block elements, set the font size in the parent container to 0, and the redeclare the desired font-size in the children:

.container {
    background-color: #eee;
    text-align: center;
    font-size: 0; /* To remove space between inline-block elements */
    width: 100%; /* or 960px, or any other value you desire */
}
.widget {
    background-color: #aaa;
    display: inline-block;
    width: 25%;
    font-size: 16px; /* Reset font size in widgets */
}

HTML:

<div class="container">
    <div class="widget">Widget 1</div>
    <div class="widget">Widget 2</div>
    <div class="widget">Widget 3</div>
</div>

See fiddle here - http://jsfiddle.net/SzsuN/

center menu within the 960 grid

Wrap the menu in a container and set it to position: relative. Then absolute position the #menu at 50% from the left and margin-left: -(outerWidth/2).

Something like this should work:

<nav id="container">
    <ul id="menu">
    ...
    </ul>
</nav>

css:

#container { position: relative; }

jq:

var $menu = $('#menu'),
    menuWidth = $menu.outerWidth();

$menu.css({
    position: 'absolute',
    left: '50%',
    margin-left: -(menuWidth/2)
});

How to add a vertical line between two 960.gs boxes?

You can implement a border using the pseudo-selector :after and absolute positioning, like so:

.line:after {
    border-right: 1px solid #000000;
    content: "";
    display: block;
    margin: 1px;
    position: absolute;
    right: -11px;
    top: 0;
    bottom: 0;
}

.grid_1,  .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9,  .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16 {
    position:relative;
}

Here is a demo http://jsfiddle.net/andresilich/ZTyf4/show/

Edit here http://jsfiddle.net/andresilich/ZTyf4/

center menu within the 960 grid

Wrap the menu in a container and set it to position: relative. Then absolute position the #menu at 50% from the left and margin-left: -(outerWidth/2).

Something like this should work:

<nav id="container">
    <ul id="menu">
    ...
    </ul>
</nav>

css:

#container { position: relative; }

jq:

var $menu = $('#menu'),
    menuWidth = $menu.outerWidth();

$menu.css({
    position: 'absolute',
    left: '50%',
    margin-left: -(menuWidth/2)
});

Fixed-Fluid-Fixed Layout for 960.gs

With fixed-width side columns, it's actually very easy. You're going to want to use floats, and may need to do a faux columns trick, depending on your specific design needs.

You'll want something along the lines of:

<div class="left"></div>
<div class="right"></div>
<div class="middle">Content</div>

and:

div {
    /* border-box, to make sure "width" is our intended width */
    -moz-box-sizing: border-box; /* Firefox still uses prefix */
    box-sizing: border-box;
}

.left {
    float: left;
    width: 100px;
    background: #f00;
}

.right {
    float: right;
    width: 100px;
    background: #00f;
}

.middle {
    width: 100%;
    padding: 0 100px;
    background: #ccc;
}

See it in action here (this is without the faux column effect, but should give you a starting point). If you change the width of the section with the output, you'll see that the columns stay put, and the content stays within the bounds of the outer columns.

The content column needs to be last, because it's still in the document flow, so the right column would end up below the content.

Alternatively, you can use position: absolute; on your side columns with something like this:

.wrapper {
  position: relative; /* Constrains the columns within their parent. Not needed if parent is <body> */
}

.left {
  position: absolute;
  top: 0;
  left: 0;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
}

.middle {
  padding: 0 100px;
}

div {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

These tricks will work in IE8+, Firefox, Chrome, Safari, and Opera. IE7 might have issues due to using the W3C box model ("content-box") and not recognizing the box-sizing CSS, but there are a few tricks to make it work if you need it. IE6 should be okay, because it uses "border-box" based box model by default. (You may need to play with z-index to get IE to behave. If so, then set .middle{ position: relative; z-index: 1} and add z-index: 2 to the left and right columns.)

The position: absolute trick does have the advantage over the float one in that your sidebars can appear before or after the content div, making it the potentially more semantic option.

The reason these work is because a) your side columns are fixed, so we just set the padding to the width of those columns, and b) position: absolute and float: [left/right] take the elements out of the document flow, which means that as far as the document is concerned, they aren't there and take no space. This allows other elements to move to where those elements used to be, layering them over top of each other.

---

Related Topics