CSS Float vs. Inline
Float and Inline behave similarly in CSS -- both allow you to line elements up in a row. Float is a property for CSS, whereas inline is actually a value for the "display" property. Both elements are supported in all major browsers, including Internet Explorer, Firefox, Safari and Chrome. This support makes them both valid options for aligning page layouts.
Other People Are Reading
-
Default Behavior
-
Using the "float" or "inline" properties change the default alignment and behavior of various elements. The default behavior for an element varies depending on what it is. Images display in line by default if not separated by a line or page break, while div layers stack vertically even when placed side by side in the source of your page. Paragraphs, by definition, start on a new line each. Everything aligns to the left, unless styled otherwise.
Floating Elements
-
There are two options for floating elements: float left or float right. When you have two elements beside each other set to float left, it overrides the default behavior and lines the elements side-by-side without any spacing between the two. The first element in your page source will be the farthest left, with each element in the list lining up in sequential order. If the width of the floating elements exceed the width of the page, they'll wrap to the next line. Elements set to the float right will do the same in reverse, with the first element the furthest right. Two 200 pixel wide DIV layers set to float left would look like this:
<div style="float:left; width:200;">Element 1</div>
<div style="float:left; width:200;">Element 2</div> -
Inline Elements
-
Inline is part of the "display" property. This does exactly what it sounds like: it lines elements up in a row, even if they otherwise wouldn't, such as with three paragraphs. Inline is similar to floating, with some small differences. Inline elements only line up the left and leave space between each element, whereas the floating elements press right up against each other without any space. An example of two paragraphs set to line up using the inline property is:
<p style="display:inline;">Paragraph 1</p>
<p style="display:inline;">Paragraph 2</p>
Choosing the Right Element
-
There's no wrong choice when choosing a positioning attribute for your website layout. Displaying inline elements is a simple way to structure website content that's more flexible than absolute positioning. Play around with positioning to see what works best for your layout, and test the layout in different browsers to ensure that the position is accurate across the board.
-
