Dynamic Div Layout - css

Question

I know there are a lot of posts about div layouts but what I'm looking to do doesn't seem to be on here. I am creating div's that contain dynamic text. Therefore each div is of variable length. I want these div's placed alongside each other, 4 across the page. In other words, each div occupies 25% of the width. The number of div's is variable as well so if there are more than 4 div's, then the remaining would start be placed below in the same fashion. Below is a picture of what I am trying to depict, with the gray boxes being the div's I am creating. Any help is appreciated, thank you in advance!
The div's are created in my function addSuggestion(), which is as follows:
HTML:
addSuggestion = function (counter, company_name, contact_name, street_address_1, street_address_2, phone_number, email_address) {
var output = document.getElementById('container');
var div = document.createElement('div');
var company = document.createElement('p');
company.className = "companyClass";
var contact = document.createElement('p');
contact.className = "otherClass";
var address1 = document.createElement('p');
address1.className = "addressClass";
var address2 = document.createElement('p');
address2.className = "addressClass";
var phone = document.createElement('p');
phone.className = "otherClass";
var email = document.createElement('p');
email.className = "otherClass";
if(counter%4 == 0) {
div.className = "farleft";
}
else if(counter%4 == 1) {
div.className = "centerleft";
}
else if(counter%4 == 2) {
div.className = "centerright";
}
else {
div.className = "farright";
}
if(company_name) {
company.textContent = company_name;
div.appendChild(company);
}
else {
company.textContent = "*** COMPANY INFO ***";
div.appendChild(company);
}
if(contact_name) {
contact.textContent = contact_name;
div.appendChild(contact);
}
if(street_address_1) {
address1.textContent = street_address_1;
div.appendChild(address1);
}
if(street_address_2) {
address2.textContent = street_address_2;
div.appendChild(address2);
}
if(phone_number) {
phone.textContent = phone_number;
div.appendChild(phone);
}
if(email_address) {
email.textContent = email_address;
div.appendChild(email);
}
output.appendChild(div);
}
CSS:
#container {
width: 100%;
}
#farleft {
width: 25%;
position: absolute;
float:left;
}
#centerleft {
width: 25%;
position: relative;
float:left;
}
#centerright {
width: 25%;
position: relative;
float:right;
}
#farright {
width: 25%;
position: relative;
float:right;
}

Answer 1

Assigning width: 25% to each div will get your 4 divs on the same row (counting there are no borders and/or margin/padding on the exterior).
float: left will keep them to the left. In order to get your 'new row' to drop down a line, <br clear="both"> would do the trick:
JSFiddle

Answer 2

If its a row of div's you can store them in a containing div "row" that has a variable height.
Sorry of that doesn't make much sense but try this CSS on the row's div.
min-height: 100px; /*whatever you want the minimum height to be*/
height:auto !important; /*An IE fix for older versions */
height:100%;
The above css will ensure your div is never smaller than 100px but can grow based on its content.

Answer 3

The solution is quite simple:
#container>div {
width:25%;
margin:0;
border:0;
float:left;
}
#container>div.farleft {
clear:both;
}
jsfiddle