Showing posts with label columns. Show all posts
Showing posts with label columns. Show all posts

Tuesday 2 November 2010

Three equal height columns using jQuery

I've seen lots of CSS solutions to this. They all seemed a little over the top and unreliable to me. So I decided to write my own solution using jQuery. There may be a better way to go about this using jQuery and I'd love to simplify what I've done, but it does work.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three Equal Columns using jQuery</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
font-family:Sans-serif;
margin:0 auto;
width:800px;
font-size:62.5%;
color:#FFFFFF;
}
#column1, #column2, #column3
{
float:left;
padding:10px;
font-size:1.2em;
}
#column1, #column2
{
width:180px;
}
#column1
{
background:#FF0000;
}
#column2
{
background:#000000;
}
#column3
{
background:#CCCCCC;
width:380px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js"></script>
<script>
$.fn.getBiggest = function(param, biggest)
{
if($(param).height() > biggest) return $(param).height();
else return biggest;
}

var currentlyBiggest = 0;

$(document).ready(function()
{
$('div').each(function(index)
{
currentlyBiggest = $(document).getBiggest($(this), currentlyBiggest);
});
$('div').height(currentlyBiggest);
});
</script>
</head>
<body>
<div id="column1"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
<div id="column2"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p></div>
<div id="column3"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
</body>
</html>

Wednesday 20 October 2010

Simple Grid Layout #2

I have extended the simple grid layout here to include rows of differing sizes within columns.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Grid Layout 2</title>
<style type="text/css">
body
{
margin:0 auto;
width:800px;
font-family:sans-serif;
}
.oneCol, .twoCol, .threeCol
{
float:left;
margin-left:20px;
}
.oneCol
{
width:780px;
}
.twoCol
{
width:380px;
}
.threeCol
{
width:247px;
}
.threeCol.first
{
width:246px;
}
.first
{
margin-left:0;
clear:left;
}
.row
{
background:#CCCCCC;
margin-bottom:20px;
height:20px;
}
.twoRowHeight
{
height:60px;
}
.threeRowHeight
{
height:100px;
}
</style>
</head>
<body><br />
<div class="twoCol first">
<div class="row">Column 1 of 2 columns. Row 1.
</div>
<div class="row">Column 1 of 2 columns. Row 2.
</div>
</div>
<div class="twoCol">
<div class="row">Column 2 of 2 columns. Row 1.
</div>
<div class="row">Column 2 of 2 columns. Row 2.
</div>
</div>
<div class="oneCol first">
<div class="row">Column 1 of 1 column. Row 1.
</div>
</div>
<div class="threeCol first">
<div class="row">Column 1 of 3 columns. Row 1.
</div>
<div class="row">Column 1 of 3 columns. Row 2.
</div>
<div class="row">Column 1 of 3 columns. Row 3.
</div>
</div>
<div class="threeCol">
<div class="row">Column 2 of 3 columns. Row 1.
</div>
<div class="row twoRowHeight">Column 2 of 3 columns. Row 2.
</div>
</div>
<div class="threeCol">
<div class="row threeRowHeight">Column 3 of 3 columns. Row 1.
</div>
</div>
</body>
</html>

Wednesday 13 October 2010

Simple Grid Layout

I've avoided using grids in CSS layouts for the most part. Whenever, looked into them, it always seemed more prescriptive than it should be. Below is an example of a grid system using the div tag which I hope, seems relatively straight forward. All columns are floated to the left. The '.first' class clears left so that it moves to a new row. I made a slight adjustment to the three column row so that it would be pixel perfect with the others by using the first column 1 pixel shorter. This is something which you need to take into account with columns which don't divide to a whole number.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Grid Layout</title>
<style type="text/css">
body
{
margin:0 auto;
width:800px;
font-family:sans-serif;
}
.oneCol, .twoCol, .threeCol
{
float:left;
margin-left:20px;
margin-bottom:10px;
background:#CCCCCC;
}
.oneCol
{
width:780px;
}
.twoCol
{
width:380px;
}
.threeCol
{
width:247px;
}
.threeCol.first
{
width:246px;
}
.first
{
margin-left:0;
clear:left;
}
</style>
</head>
<body><br />
<div class="twoCol first">
Two col
</div>
<div class="twoCol">
Two col
</div>
<div class="oneCol first">
One col
</div>
<div class="threeCol first">
Three col
</div>
<div class="threeCol">
Three col
</div>
<div class="threeCol">
Three col
</div>
</body>
</html>

Using overflow hidden to better align text and images into columns

I can't take credit for this. Credit must go to Soh Tanaka for this blog post 
http://www.sohtanaka.com/web-design/css-overflow-property-quick-tip/

I just tweak it a little so that it would work well within the context of this blog. Essentially it is a nice simple way of aligning text next to images without wrapping.

See demo.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Overflow Hidden</title>
<style type="text/css">
body
{
margin:0 auto;
width:600px;
font-family:sans-serif;
}
.thumb
{
float:left;
margin-top:20px;
margin-right:20px;
padding:5px;
border:1px solid #CCCCCC;
background:#F0F0F0;
}
.description
{
overflow:hidden;
}
</style>
</head>
<body>
<img src="http://farm3.static.flickr.com/2160/2271589215_935b5bc2ce_m.jpg" class="thumb" />
<div class="description">
    <h3>Heading 1</h3>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<hr />
<img src="http://farm3.static.flickr.com/2411/2214360006_32d25b3df6_m.jpg" class="thumb" />
<div class="description">
    <h3>Heading 2</h3>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</body>
</html>