Web development, coding & SEO

List item floated DIV

List item contains floated DIVs.

List element has got sophisticated floated content.

Sample

Colour code: grey - list, bluish - list item, reddish - content inside the list item.

Code of ordered list containing floated DIVs

<ol class="list">
	<li class="listElement">
		<div class="innerWrap">
			<div class="content1">
				content 1
			</div>
			<div class="content2">
				content 2
			</div>
		</div>
	</li>
</ol>

CSS for "List item floated DIV"

.list{
	float:left;
	padding-left:10%;
	width:90%;
}
.listElement{
	float:left;/*FireFox*/
	*float:none;/*IE6 and IE7*/
	width:100%;/*FireFox*/
	*width:auto;/*IE6 and IE7*/
}
.innerWrap{
	float:right;
	width:100%;
}
.content1{
	float:left;
	width:auto;
}
.content2{
	float:right;
	width:85%;
}

List item floated DIV, list elements have got sophisticated floated content and get nailed down with help of some CSS.

2010