×
Namespaces

Variants
Actions

Floating elements inside block objects using CSS

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Code ExampleTested with
Devices(s):  
Compatibility
Platform(s):  
Article
Keywords: HTML, CSS, float
Created: aleksi.hanninen (06 Apr 2010)
Last edited: lpvalente (18 May 2014)

Contents

Overview

This example shows how to fix the problem with a div containing a ul with floated list items, resulting in the ul element being 0 pixels high (i.e., not visible.)

Problem

In the following code there is a div-containing-list with a ul containing three elements floated left. The background of the div-containing-list is green, and the li elements have a black dashed outline.

Floating elements inside block objects problem1.png

<div class="div-containing-list">
<ul class="list-horizontal three-piece">
<li>First item in the list</li>
<li>Second (longer) item in the list</li>
<li>Last item in the list</li>
</ul>
</div>
.div-containing-list {
background: green;
padding: 1em 0;
}
 
.div-containing-list ul {
padding: 0;
margin: 0;
}
 
.list-horizontal li {
float: left;
outline: 0.0625em dashed black;
list-item: none;
list-style-type: none;
padding:0em;
margin:0em;
}
 
.list-horizontal.three-piece li {
width: 33.33%; /* Note: here you need enough decimals! */
}

The problem: how can we easily make the background area and fill it so that the area is covered by the floated elements? Note also that there might be a p element which would attach to the middle element which is two lines long.

The problem has a variation where the width of the li element is not restricted.

Floating elements inside block objects problem2.png

<div class="div-containing-list">
<ul class="list-horizontal">
<li>First item in the list, which is of great length.</li>
<li>Second item in the list, which is of great length also.</li>
<li>Last item in the list, which is of great length too.</li>
</ul>
</div>

Solution

According to some guides, you should always set the height of lists containing floated list items. However, this prevents the background from filling the whole area of li elements, if the li elements change to be two lines high instead of one.

In the following, the div-containing-list also has a full-stop-div, which has maximum (100%) width, 0 height, and clear: both style definitions.

Floating elements inside block objects solution1.png

<div class="div-containing-list">
<ul class="list-horizontal three-piece">
<li>First item in the list</li>
<li>Second (longer) item in the list</li>
<li>Last item in the list</li>
</ul>
<div class="full-stop-div"></div>
</div>
.div-containing-list .full-stop-div {
width: 100%;
height: 0px;
clear: both;
}

Since this new div must be included inside the div-containing-list, and since clear: both places it below the floated elements, the background of the div-containing-list is expanded to contain it and thus also the list items.


The full-stop-div also fixes the variation of the problem:

Floating elements inside block objects solution2.png

Another solution

You could also try placing three elements in a row using the display: inline-block CSS definition, but in this case the spaces between the elements would matter, and you would either have to comment the spaces out or write the whole HTML definition of the list in one line, without any spaces.

Floating elements inside block objects solution1 another.png

<ul class="list-horizontal-inline-block three-piece"><!-- 
--><li>First item in the list</li><!--
--><li>Second item in the list</li><!--
--><li>Last item in the list</li>
</ul>
.list-horizontal-inline-block li {
display: inline-block;
outline: 0.0625em dashed black;
list-item: none;
list-style-type: none;
padding:0em;
margin:0em;
}
 
.list-horizontal-inline-block.three-piece li {
width: 33.33%;
}

Postconditions

Using the full-stop-div will help you to set a background of a div containing floating elements.

Supplementary material

The complete example page containing the examples discussed can be downloaded at File:Floating elements inside block objects snippet.zip.

This page was last modified on 18 May 2014, at 22:13.
287 page views in the last 30 days.
×