CODEWITHSUNDEEP
htmlcss
FranckH
FranckH

Reputation: 155

CSS and DIV 3 columns with " TILES "

I'm trying to do a website that would look like this :

enter image description here

So each cell has a size based on content. I'm stuck with the CSS part of it any idea on how I could do this ?

For a real example of what I'm trying to do :

http://yourquestions.mcdonalds.ca/

Thanks

Upvotes: 3

Views: 1901

Answers (2)

Tommy Jinks
Tommy Jinks

Reputation: 757

You have two possible ways around this problem.

  1. Use a jQuery API which does it for you (Masonry is a good start).
  2. Split your data into three sections (See working example)

table {
  float: left;
  margin-right: 0.2em;
}
table.left tr td {
  background-color: red;
}

table.middle tr td {
  background-color: blue;
}

table.right tr td {
  background-color: green;
}
<table class="left">
<tr>
  <td style="height:10em">
	<div>Left 1</div>
  </td>
</tr>
<tr>
  <td>
	<div style="height:2em">Left 2</div>
  </td>
</tr>
<tr>
  <td>
	<div style="height:3em"> Left 3</div>
  </td>
</tr>
</table>

<table class="middle">
<tr>
  <td>
	<div style="height:1em">Middle 1</div>
  </td>
</tr>
<tr>
  <td>
	<div style="height:4em">Middle 2</div>
  </td>
  </tr>
  <tr>
    <td>
	  <div style="height:7em">Middle 3</div>
	 </td>
  </tr>
</table>

<table class="right">
  <tr>
	<td>
	  <div style="height:5em">Right 1</div>
	</td>
	</tr>
  <tr>
	<td>
	  <div style="height:5em">Right 2</div>
	 </td>
  </tr>
  <tr>
    <td>
		<div style="height:8em">Right 3</div>
	</td>
  </tr>
</table>

Upvotes: 1

codewizard
codewizard

Reputation: 1627

If you don't need to support browsers under ie10 you can do this natively in CSS. Just give your container a column style...

ul {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

<ul>
     <li>List Item</li>
     <li>List Item</li>
     <li>List Item</li>
     <li>List Item</li>
     <li>List Item</li>
     <li>List Item</li>
     <li>List Item</li>
     <li>List Item</li>
</ul>

You can also specify how much room is in-between each column. See: http://www.w3schools.com/css/css3_multiple_columns.asp for more info

Upvotes: 1

Related Questions