Issue with floating in css

[lcmorley]

I am working on some css at the moment.I have put the following HTML together, and it is not producing the results I would expect.

<div style="width:550px;border:solid;background-color:red;">	<ul style="list-style-type:none;margin:0px;padding:0px;">		<li>			<ul>				<li style="display:inline;padding:10px;font-weight:bold;width:150px;float:left">					Heading 1				</li>				<li style="display:inline;padding:10px;font-weight:bold;width:150px;float:left">					Heading 2				</li>				<li style="display:inline;padding:10px;font-weight:bold;width:150px;float:left">					Heading 3				</li>						</ul>		</li>		<li>			<ul style="margin0px;padding:0px;">				<li style="display:inline;padding:10px;width:150px;float:left">					this is a  piece of sample test				</li>				<li style="display:inline;padding:10px;width:150px;float:left">					mwahahaha				</li>				<li style="display:inline;padding:10px;width:150px;float:left">					<span>this is another piece of sample text</span>				</li>			</ul>		</li>	</ul></div>

In firefox, the div appears in red at the top, however, the list is outside the div and underneath.Not sure what the problem is. Why is it not appearing within the div? Is it because I am using the float?If however, I remove the float, then the widths are not applied, and so the columns do not line up. Is there any other way of getting the widths to be applied without having to use floats?Any help would be greatly appreciated.Cheers.

[justinbriggs1]

The only content that is inside the container is floated, so it won't expand your box to the height of your lists. You can fix this by placing a cleared element as the last one in the container. Like this:--- right after your last </ul> ---<div style="clear:both"></div>

[ShadowMage]

Or better yet, add overflow: auto; to the containing div. No messy markup or extra tags.

[justinbriggs1]

Or better yet, add overflow: auto; to the containing div. No messy markup or extra tags.

Good call, learn something new every day!

[lcmorley]

Or better yet, add overflow: auto; to the containing div. No messy markup or extra tags.

Thanks for the replies. I got it working in the end by using the overflow property.Next problem now if anybody can help.I have the following css:

.incidenttable{	width:550px;	height:350px;	overflow:scroll}.headerrow th{	color:white;	background-color:#BDBDBD;	white-space:nowrap;	padding:0px 5px	}.striperow {	background-color:#E6E6E6;	}

And the following HTML:

<div class="incidenttable"><table>	<thead>		<tr class="headerrow">			<th>Reference Number</th>			<th>Severity</th>			<th>Incident State</th>			<th>Escalation</th>			<th>Symptom Summary</th>			<th>Assignment Group</th>			<th>Assigned To</th>			<th>IM Group</th>		</tr>	</thead>	<tbody>		<c:forEach var="eachIncident" items="${incidents}">			<% 				String eachIncidentId = ((PresentableIncident)pageContext.getAttribute("eachIncident")).getIncidentSysId();				rowCount++;			%>			<tr <%= rowCount % 2 == 0 ? "class=\"striperow\"" : ""%>>																		<td>					<a href="#" onClick="<portlet:namespace/>fireIncidentEvent('<%= eachIncidentId %>')" id="<%= eachIncidentId %>"><%= ((PresentableIncident)pageContext.getAttribute("eachIncident")).getReferenceNumber()%></a>					<% renderRequest.getPortletSession().setAttribute("incidentMetaData", ((PresentableIncident)pageContext.getAttribute("eachIncident")).getMetaData(),PortletSession.APPLICATION_SCOPE); %>				</td>				<td>					<c:out value="${eachIncident.severity}"/>						</td>				<td>					<c:out value="${eachIncident.incidentState}"/>				</td>				<td>					<c:out value="${eachIncident.escalation}"/>				</td>				<td>					<c:out value="${eachIncident.symptomSummary}"/>				</td>				<td>					<span id="asynchFieldAG${eachIncident.incidentSysId}">fetching results...</span>				</td>				<td>					<span id="asynchFieldAT${eachIncident.incidentSysId}">fetching results...</span>				</td>				<td>					<span id="asynchFieldIMG${eachIncident.incidentSysId}">fetching results...</span>				</td>			</tr>								</c:forEach>	</tbody></table>

My problem is that the table rows within the tbody are not striping in IE7. However, they are working in FF.I have created the .striperow css, and then applied to alternate rows as can be seen above. Bloody IE7, why does anybody even use IE aaaarrrggghhhhh. :)Any help would be greatly appreciated.Thanks.