CSS float for Html elements! It's time to think outside the box, or maybe, more
accurately, floating alongside of it. Where did we lose our collective CSS coding creativity? Are we all still
burdened with a table layout mentality? Do we read the
W3C Cascading Style
Sheets Specification and not get it? CSS allows for so much
freedom from traditional table based layouts that we sometimes do not consider page and layout design alternatives.
What a pity. Time to think outside the box!
The Float property can be applied to most html elements, though in practice, it is used most often to float
images thus allowing text wrap. While the float property is invaluable in
this application, it has much more potential. In this example, the html header <h1
class="float-left"> is floated, allowing the following paragraph to move up the page flow and text wrap
the opening header. Adjusting the top margins of both elements allows each to share the padding boundry of the
parent containing box.
.content {/* style grouping for content divs */
margin: 2.5em 3%;
font: 1em Georgia, Palatino, Serif;
padding: 1.5em;
border: 8px groove #c0c0c0;
background: #f5f5f5;
}
h1.float-left {/* header element float */
float: left;
width: 9em;
margin: 0 0.2em 0 0;
background: #eee8aa;
border-right: 2px dotted #cd853f;
border-bottom: 2px dotted #cd853f;
}
p.top {/* after header margin adjustment */
margin-top: 0;
padding: 0.2em;
border-top: 3px dotted #696969;
background: #ffffe0;
}
CSS Float Html Elements: Headers
The section header in this example is defined using <h2
class="float-right"> which, as the CSS class name indicates, instructs the header to float right,
postioning the styled element to the furthest right placement allowed by the css properties of the containing box.
This paragraph <p class="default-margin"> not styled to adjust the top margin. The display
borders and background colors highlight the top margin variance between the paragraph and the header float.
The drop cap here is created using <span
class="cap-g">T</span> that includes float: left; in the style grouping. Though CSS
2.1 includes the :first-letter pseudo-element, a span
float may be more convenient for limited, "in-line style" use. This "filler" demonstrates an inline span element
styled to include text-align: center; <span style="width:300px; padding:0 35px; background:lime;
border:1px solid red; vertical-align:text-bottom; text-align:center;>
text-align:center</span>. The span creates an inline block that can have width, margin,
padding and border assignments as well as text-align properties.
h2.float-right {/* header element float */
float: right;
width: 9em;/* em width variance by element*/
margin: 0 0 0 0.2em;
padding-left: 0.2em;
background: #90ee90;
border-left: 2px dotted #2e8b57;
border-bottom: 2px dotted #2e8b57;
}
p.default-margin {
margin-top: ;/* undeclared default margin */
padding: 0.4em;
border-top: 3px dotted #696969;
background: #f0fff0;
}
span.cap-g {
float: left;
font-size: 1.7em;
padding: 0 0.15em;
margin: 0 0.15em 0 0;
background: #90ee90;
border: 3px outset #2e8b57;
}
This ain't your Mama's CSS! Cascading Style Sheets allow
tremendous design freedom. Leave your table-based mentality behind and think outside the box. - papabaer
2003
This example demonstrates a CSS Html element float within a
float, and followed by a float. Whew! It's not that complex, really! The opening blockquote floats left, so does
the "spanned" letter T, styled to display as a drop cap. The drop cap floats within the containing block of the
blockquote element, which in turn floats within the content div. The following paragraph also contains a styled
span drop cap. which floats within its own parental block.
Why use CSS Html element floats? The answer is self-evident: floats provide an
enhanced level of postioning control for select elements within the normal page flow. Unlike positioned elements
using absolute, relative or fixed values, floats exhibit a close integration with the content of their parent
container. A blockquote float makes a great call-out box that can enhance large blocks of continuous text. A div
float, containing content related links creates hard to ignore visual cues, still within the relative content, but
positioned for greater emphasis. And of course, a floated image allows text
wrap and imparts a more organic feel—the image becomes essential to the text and vice versa. Html element
floats by nature, conserve space by allowing adjacent elements to flow around them. The floating header examples
above show how page and section headings can be wrapped by paragraph text, bringing the two elements closer
together visually and conceptually.
blockquote.float-left {/* floats in content div */
float: left;
width: 13.5em; /* "em size" is element dependent */
padding: 0.5em;
margin: 0 0.5em 0 0;
color: #00008b;
background: #b0c4de;
border-right: 2px dotted #4169e1;
border-bottom: 2px dotted #4169e1;
}
blockquote span.cap-g {/* floats in blockquote */
float: left;
font-size: 1.7em;
padding: 0 0.15em;
margin: 0 0.15em -0.5em 0; /* negative bottom margin */
color: #b22222;
background: #90ee90;
border: 3px outset #2e8b57;
}
blockquote > p {/* control mozilla paragraph margin */
margin: 0 0 0.5em 0;
}
blockquote.float-left strong {
color: #000080;
}
blockquote.float-left em {
color: #800080;
}
p.after-blockquote {
padding: 0.4em;
border-top: 3px dotted #696969;
background: #e6e6fa;
}
CSS Float Elements: Multiple Floats
T he CSS Float Property can be invaluable when building
liquid page layouts. Floats flow along with text, adjusting to the available viewport's width, height and
resolution, with little restraint but the most basic instruction of float:left or
float:right.
Here is an example of multiple, opposing Html element
floats. The opening section header <h2 class="float-right"> is followed by the blockquote
callout box <blockquote class="float-left">. The opening header floats right, opposite of the
left floating blockquote. In the page code, the header appears first and is followed directly by the blockquote. If
the viewport width does not allow sufficient room for the two elements to float opposite each other, the header
will remain in the top position while the blockquote flows beneath.
What
happens when same-side floats follow each other? Do you really have to ask? Next:
CSS Float
Html Tutorial - Part 2. The CSS Float Property belongs in
every web developers page layout toolbox, use it freely, use it creatively. Write well, code clean, design with
intent! - papabaer 2003/04/02 - addendum 2003/04/15
span.cap-g, span.cap-o,
span.cap-p, span.cap-y {/* type class grouping */
float: left; /* grouped shared styles */
font-size: 1.7em;
padding: 0 0.15em;
margin: 0 0.15em -0.5em 0;
border: 3px outset #2e8b57;
}
span.cap-g {/* type class */
background: #90ee90;
}
span.cap-o {/* type class */
background: #ffa500;
}
span.cap-p {/* type class */
background: #dda0dd;
}
span.cap-y {/* type class */
background: #ff0;/* hex color shorthand */
}
em[title]:hover {/* attribute selector pseudo-class */
background: #ffc;/* Opera - Moz supported */
cursor: help;/* matches all em elements */
}/* that specify the "title" attribute */
pre:hover {/* arbitrary element hover */
background: #ffd700 url(dido02.jpg) right top no-repeat;
/* Opera - Moz supported */
}
Resources, tutorials and more: Well, it's time to cast aside the old
table layout mentality! Just remember: This ain't your Mama's
CSS! Learn how to use CSS float & the sandbag div and create
magazine style image layouts: [ Background
Image Text Wrap Tutorial | CSS Scale Image Html Tutorial |
Triple Border Background CSS Tutorial |
CSS Triple Border Background Tutorial part 2 |
Double Border Background CSS Template |
CSS Border Styles Image Frames ]
