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.
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.
Hey it worked… Is there any chance of it working in IE7 with some kind of hack or something ???
PaulOB
September 1, 2011, 5:13pm
3
alang_pr:
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
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.
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.
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
Hi Welcome to Sitepoint
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.
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
PaulOB
September 1, 2011, 10:13am
6
Hi Welcome to Sitepoint
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.
system
September 1, 2011, 4:18am
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.
PaulOB
September 3, 2011, 3:02pm
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.