CSS and Jquery Creating 3 Columns With One DIV

Question

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

g_thom · Accepted Answer · 2011-08-01 19:43:15Z

1

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.

edited Aug 1, 2011 at 19:43

answered Aug 1, 2011 at 18:58

g_thom

2,8102 gold badges21 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

matt colley Over a year ago

Hi, thanks for the reply. What I after is all the data in one paragraph like this:

matt colley Over a year ago

all of the html data is in one paragraph, the next record set will be in column2 with all the html data, then in column3 all the html data. then the next record set will move back to column1 underneath the first record and create a new record set... i know i am being clear as mud right now...i apologize for my rambling

g_thom Over a year ago

Hi, I updated my answer - hopefully, that's what you're looking for.

matt colley Over a year ago

wow... thats exactly what I was looking for! i know you are busy, but if you can take a minute to explain what i was doing wrong, i would certainly like to know what i was doing incorrectly, and BTW thank you very much for taking the time out of your day to assist me

g_thom Over a year ago

No problem - I'll add some comments to the answer, since it'll be easier to see that way. If you also don't mind marking my answer as accepted, that'll help me and anyone else who comes along know this was the solution.

Collectives™ on Stack Overflow

CSS and Jquery Creating 3 Columns With One DIV

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related