8 replies [Last post]
Jenni
Jenni's picture
Offline
Enthusiast
Seattle
Last seen: 12 years 44 weeks ago
Seattle
Joined: 2007-03-09
Posts: 115
Points: 0

Hello,

I am trying to create a two column layout with lots of small boxes that wrap evenly from one to the next. The problem that I am having is that there is often very very large gaps after a box:

http://wisetopic.com/wisematch/

Here is the Code for a single box:

"I like candy and penuts"
Ashlee

Ashlee

Age: Ashlee


Location: Bellevue, WA


Hey I'm ashlee simpson.



Here is the CSS - Im just using just using a simple Float: left... maybe the problem?

#wiseMatch #main .ad { border: 1px solid #f2f2f2; width: 200px; padding: 5px; float: left; margin: 10px; } #wiseMatch #main .adTitle { display: block; height: 20px; background-color: #f2f2f2; width: auto; padding: 10px; }

#wiseMatch #main .adTitle {
color: red;
font-size: 14px;
font-weight: bold;
text-align: center;
}

How can I close up the gap on the bottom of these boxes? Thank you!!!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You'll need to add clear:

You'll need to add clear: both to each left-side ad. You're still going to end up with some space though no matter what you do because the boxes are different heights.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Jenni
Jenni's picture
Offline
Enthusiast
Seattle
Last seen: 12 years 44 weeks ago
Seattle
Joined: 2007-03-09
Posts: 115
Points: 0

Can you recommend a way of

Can you recommend a way of making a two column liquid layout that will allow the boxes to flow together regardless of their height? I'm looking online for a layout like that but can't really find anything similar...

thanks

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You'd have to create two

You'd have to create two columns that contain several boxes and float those rather than floating each individual box.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Try this:.container {

Try this:
.container {
border: 1px solid blue;
overflow: hidden;
width: 500px;
margin: 25px auto;
}

.cola {
width: 45%;
float: left;
clear: left;
border: 1px solid black;
margin: 10px;
}

.colb {
width: 45%;
float: right;
clear: right;
border: 1px solid black;
margin: 10px;
}
============




Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Maecenas iaculis pulvinar nisi. Praesent aliquet neque
ultrices dolor. Aliquam ut est. Fusce sit amet diam quis.




Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vivamus lacinia velit non purus. In at nisl. Integer quis
ligula. Praesent bibendum tellus sit amet lectus.
Curabitur venenatis facilisis dolor. Donec hendrerit.
Morbi aliquam malesuada metus. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac
turpis egestas. Cras lorem. Nunc pharetra risus interdum
mi. Nullam accumsan tristique elit. Quisque dapibus,
massa ut fringilla porttitor, dui mauris pretium ante,
quis fermentum nisl mi ac odio.





Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Phasellus id mauris nec risus fermentum dapibus. Duis vel
tellus. Maecenas a dui. Phasellus libero lectus, lacinia
a, imperdiet et, laoreet vitae, orci. Phasellus a nisl
mollis dui tempor lacinia. In molestie tortor vitae
felis. Integer tristique mauris eu urna. Nullam
fermentum.




Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Maecenas iaculis pulvinar nisi. Praesent aliquet neque
ultrices dolor. Aliquam ut est. Fusce sit amet diam quis.





Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vivamus lacinia velit non purus. In at nisl. Integer quis
ligula. Praesent bibendum tellus sit amet lectus.
Curabitur venenatis facilisis dolor. Donec hendrerit.
Morbi aliquam malesuada metus. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac
turpis egestas. Cras lorem. Nunc pharetra risus interdum
mi. Nullam accumsan tristique elit. Quisque dapibus,
massa ut fringilla porttitor, dui mauris pretium ante,
quis fermentum nisl mi ac odio.Cras lorem. Nunc pharetra
risus interdum mi. Nullam accumsan tristique elit.
Quisque dapibus, massa ut fringilla porttitor, dui mauris
pretium ante, quis fermentum nisl mi ac odio.




Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Phasellus id mauris nec risus fermentum dapibus. Duis vel
tellus. Maecenas a dui. Phasellus libero lectus, lacinia
a, imperdiet et, laoreet vitae, orci. Phasellus a nisl
mollis dui tempor lacinia. In molestie tortor vitae
felis. Integer tristique mauris eu urna. Nullam
fermentum.





Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Maecenas iaculis pulvinar nisi. Praesent aliquet neque
ultrices dolor. Aliquam ut est. Fusce sit amet diam quis.




Simply alternate sides, clearing to the same side as you float toward. It should also be a trivial matter to template for the backend.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Jenni
Jenni's picture
Offline
Enthusiast
Seattle
Last seen: 12 years 44 weeks ago
Seattle
Joined: 2007-03-09
Posts: 115
Points: 0

Thanks for the advice. I was

Thanks for the advice. I was afraid that I would have to split the columns into two, but it would be very nice to be able to allow it to flow as the "float: left" would.

Since the data source in this page is a .NET DataSet I guess I will need to split the dataset in half, and create two separate data lists to bind each respective list to. That just seems liek a messy way to do it.

I guess I could also define a strict height to each box and truncate the text in them so they are all the same height. That would also solve my problem.

Thanks.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

My brother-in-law, the MSFT

Smile My brother-in-law, the MSFT fanboy, absolutely loved the whole .NET stack. He's a senior RDBS admin and backend programmer for a large insurance company. He has lately had to move into front end development for the web. He told me at Easter dinner that he now has reservations. It seems that MSFT has given little thought to the web Shock and he now prefers to use PHP for web based apps.

So, you have my sympathies for having to work with inappropriate technologies.

You should be able to do something like this:

pseudo code:

$result[] = query_result;

for ($i=0; $i < result.length; $i++) {
  if ($i is odd) {
    $class = "cola";
  }
  else {
    $class = "colb";
  }
  print "<div class=\"$class\"> 
    ... (however you're handling $result[$i])
    </div>"
}

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Jenni
Jenni's picture
Offline
Enthusiast
Seattle
Last seen: 12 years 44 weeks ago
Seattle
Joined: 2007-03-09
Posts: 115
Points: 0

A large insurance company

A large insurance company that has adopted .NET - it has to be Safeco/Symetra. They are the only ones brave enough that I have heard went the MS route. Yah, I have seen my share of MSFT fans; living here in Seattle don't help much. ASP.NET is a pretty sweet technology, and so far I've found it flexible and robust enough to somehow accomplish whatever I need to, but they sure don't make some things easy for you.

My biggest gripe about trying to build web sites in asp.net is their lack of support for the strict DTD - its like they totally ignored any of the W3C's recommendations for good xhtml and went their own separate little MS way.

Thanks for the psedo code. In C# I'd recommend using the proprietary foreach statement to break up the a dataset; I think it would look something like this

DataSet ds_left = new DataSet(); DataSet ds right = new DataSet();

int i = 0;
foreach(DataRow dr in DataSet_Results) {
if(i % 2 == 0)
ds_left.Add(dr);
else
ds_right.Add(dr);
i++;
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Looks good

Looks good—considering I don't know C#, vB, etc. I'd likely use the foreach loop in PHP too, Not all languages have it, but just about all have a simple for loop. Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.