CODEWITHSUNDEEP
javascriptjquerycss
matt colley
matt colley

Reputation: 173

CSS and Jquery Creating 3 Columns With One DIV

My question is regarding CSS with Jquery which will create three columns that run from left to right, top to bottom. Right now the data is all being placed into one column.

Here is the jquery:

function smartColumns() { 
$("ul.column").css({ 'width' : "100%"});
var colWrap = $("ul.column").width();
var colNum = Math.floor(colWrap / 200);
var colFixed = Math.floor(colWrap / colNum);
$("ul.column").css({ 'width' : colWrap});
$("ul.column li").css({ 'width' : colFixed});
}   
smartColumns();
$(window).resize(function () {
smartColumns();
});

Here is the javascript function which creates the data, and outputs the data in a div called sidbar which is listed below the function:

 function createSidebarEntry(marker, name, address, city, state, zipcode, telephone, images, url) {
  var div = document.createElement('div');
  var html = "<ul class='column'><li><div class='block'><a href='http://" + url + "'>" + name + "</a><br/>" + address + "<br/>" + city + ", " + state + " " + zipcode + "<br/>" + (formatPhone(telephone)) + "</div></li></ul>";
  div.innerHTML = html;
  div.style.marginBottom = '5px'; 
  return div;
  }

<html>
<div id="sidebar"></div>
</html>

Here is the CSS that the DIV utilizes:

#sidebar
{
width:665px;
font-size:10pt;
font-family:Arial;
color:#656668;
}
ul.column{
width: 100%;
padding: 0;
margin: 10px 0;
list-style: none;
}
ul.column li {
float: left;
width: 200px; /*Set default width*/
padding: 0;
margin: 5px 0;
display: inline;
}
.block {
height: 60px;
font-size: 1em;
margin-right: 10px; /*Creates the 10px gap between each column*/
padding: 0px;
background: #FFFFFF;
}
.block h2 {
font-size: 1.8em;
}
.block img {
    /*Flexible image size with border*/
width: 89%;  /*Took 1% off of the width to prevent IE6 bug*/
padding: 5%;
background:#fff;
margin: 0 auto;
display: block;
-ms-interpolation-mode: bicubic; /*prevents image pixelation for IE 6/7 */
}
#sidebar a:link 
{
color:#192A96;
font-weight:bold;
font-size:10pt;
font-family:Tahoma;
text-decoration: underline;
}
#sidebar a:visited 
{
color:#192A96;
font-weight:bold;
font-size:10pt;
font-family:Tahoma;
text-decoration: underline;
}
#sidebar a:hover
{
color:#192A96;
font-weight:bold;
font-size:10pt;
font-family:Tahoma;
text-decoration: underline;
}
#sidebar a:active
{
color:#192A96;
font-weight:bold;
font-size:10pt;
font-family:Tahoma;
text-decoration: underline;
}

The goal of this is to create 3 columns, within 665px, and have the data populate the paragraphs from left to right, then top to bottom. However currently what is happening is the paragraphs are all placed in one column on the left side and the data is populated top to bottom in one column thanks

Upvotes: 0

Views: 1038

Answers (1)

g_thom
g_thom

Reputation: 2810

I think your styles are right, but only one li is being created in your html variable, so you're only getting one column.

If you break up the fields into three lis, it works as far as I understand. You can see an example at:

http://jsfiddle.net/eZPTj/1/

Is this what you're after?

EDIT:

I think I get it now. Is this what you're after? http://jsfiddle.net/eZPTj/7/

I believe the main thing I changed was just the settings on the ul - setting the float on the ul:

ul.column {
    width: 100%;
    padding: 0;
    margin: 10px 0;
    list-style: none;
    float: left;
}

Then setting the jQuery-generated CSS rules to be 200px instead of 100%, since 100% would take up the whole sidebar div. I changed it to $("ul.column").css({ 'width' : "200px"});

I also changed the innerHTML method to $('div#sidebar').append(html);, since that wasn't working for me, at least in my testing, where I just called the function six times so you could see the columns displaying. append adds the html to the previous entry, instead of overwriting it. You may be calling the function differently though.

Just for my own test, I took out the formatPhone() function since I assume that's defined somewhere else in your code, but throws an error because I don't have access to it :). You can keep that in if it's needed.

Upvotes: 1

Related Questions