css - div with red bground carrys over to other div

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
Posts: 2
Joined: April 26th, 2009, 10:25 pm

Post Posted April 26th, 2009, 10:30 pm

The following simple page works fine in IE but the red background of the header shows up behind the . If you replace the the background doesn't carry over. BTW, this works fine in IE.
It's here: ... elds2.html


User avatar
Posts: 11983
Joined: February 9th, 2006, 9:43 pm

Post Posted April 26th, 2009, 10:59 pm

Moving to Web Development forum.
Alcohol and Calculus don't mix. Never drink and derive.

Posts: 2
Joined: April 26th, 2009, 10:25 pm

Post Posted April 27th, 2009, 4:58 am

Here is the page. If you remove the "float:left" from the .inlist li css then all is well. WHY?

<title>Required Fields</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
color: #000000;
font-family: Arial, Helvetica, sans-serif;
.inlist ol
padding: 1em 1em 0 1em;
list-style: none;
zoom: 1;
.inlist li
float: left;
clear: left;
width: 100%;
padding-bottom: 1em;
<div class='inlist'>
<div style="background-color:red;" >Testing</div>


User avatar
Posts: 52352
Joined: July 18th, 2005, 3:25 am

Post Posted April 27th, 2009, 12:41 pm

Add clear:both to that DIV: <div style="background-color:red; clear:both;" >Testing</div>
If you float content then that content is rendered outside the normal flow, so that DIV starts immediately after the last not floated DIV above it.

Return to Web Development / Standards Evangelism

Who is online

Users browsing this forum: No registered users and 1 guest