This is basically for a comparison page where you can compare 2-5 products

HTML & CSS
1

I need to know if I have 5 floating divs in a main div. All 5 divs are dynamically created. When a user selects 5 products for comparison then the main is is filled with 5 divs. But in case the user selects only 2 products for comparison. The 2 divs do not fill space and only cover up the width for the 2 divs. I want them to fill up the main container.

I hope I make sense. Let me know in case you need the code for reference.

JavaScript and jQuery can be used.

2

Hey it worked… Is there any chance of it working in IE7 with some kind of hack or something :slight_smile: ???

3

Hi,

The code I posted above will work on IE8+ but will not work in IE7 and under because they don’t understand the display:table properties.

If it didn’t work for you in IE8 then you probably have a missing or incomplete doctype which sends IE back to the dark ages and will render the page in quirks mode.

4

Hi Webdev,

Thanks for the solution. But I am actually not a programmer if I could just get a small working example of the jquery that would be great. I know that I am asking for too much but Please help me. I badly need it to work for a project of mine.

Thanks
Sukhpreet

5

Hi Paul,

Thanks Paul for the answer.

I implemented your solution to my dynamic code and it worked great in mozilla. but it did not work in any of the IE versions. When I tried the code on my local machine it worked great on both mozilla and IE except IE 7. I am not sure what could be the issue.

Do you want me to post the code I am using.

Thanks
Sukhpreet

6

Hi Welcome to Sitepoint :slight_smile:

You can do this easily with CSS if you only need to support IE8+.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
h2, p {
	margin:0 0 1em
}
.outer {
	width:70%;
	margin:20px auto;
	padding:10px;
	border:1px solid #000;
	display:table;
	table-layout:fixed;
	border-spacing:5px;
}
.product {
	display:table-cell;
	border:1px solid #000;
	padding:10px;
	background:#fffccc;
}
</style>
</head>
<body>
<div class="outer">
	<div class="product">
		<h2>Product Name</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis.</p>
	</div>
	<div class="product">
		<h2>Product Name</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis.</p>
	</div>
	<div class="product">
		<h2>Product Name</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis.</p>
	</div>
	<div class="product">
		<h2>Product Name</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis.</p>
	</div>
	<div class="product">
		<h2>Product Name</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis.</p>
	</div>
</div>
<div class="outer">
	<div class="product">
		<h2>Product Name</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis.</p>
	</div>
	<div class="product">
		<h2>Product Name</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis.</p>
	</div>
</div>
<div class="outer">
	<div class="product">
		<h2>Product Name</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis.</p>
	</div>
	<div class="product">
		<h2>Product Name</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis.</p>
	</div>
	<div class="product">
		<h2>Product Name</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis.</p>
	</div>
</div>
</body>
</html>

However for IE6 and 7 you would need to float the product divs instead and give them a percentage width with JS as mentioned in the above post.

7

ok, first you’ll have to count how many products are selected and hence need to be displayed in the main div.

To calculate a % width for the product divs you divide 100 by the number of selected products and round down.

var prodDivWidth = Math.floor(100 / numSelProducts);

Give the product divs the same class name and then loop through the product divs and set their widths with


obj.style.width = prodDivWidth + '%';

where obj is the object reference for each product div.

8

There is no easy fix I’m afraid apart from adding a javascript library like ie8.js which is usually best avoided if at all possible.

9