Creating Multi column Layouts with Html5

Creating Multi column Layouts with html5

The print industry has had columns for years, and web designers have looked at those publications with envy to Creating Multi column Layouts . Narrow columns make it easier for readers to read your content, and with displays getting wider, developers are looking for ways to preserve comfortable column widths. After all, nobody wants to follow multiple lines of text across the monitor any
more than they want a line of text to flow across the whole page of a newspaper. There have been some pretty clever solutions in the past ten years, but none of those solutions are as simple and easy as the method provided by the CSS3 specification to Creating Multi column Layouts.

Splitting Columns to Creating Multi column Layouts with html5

Each month, AwesomeCo publishes a newsletter for its employees. The company happens to use a popular web-based email system. Emailbased newsletters don’t quite look good and are very hard to maintain.They’ve decided to put the newsletter on the intranet site and are planning to just send emails to employees with a link to pull up the Newsletter in their browsers. For a mocked-up version of this new newsletter, on the following page  to Creating Multi column Layouts.
The new director of communications, who has a background in print publications, has decided that she would like the newsletter to look more like an actual newsletter, with two columns instead of one. If you’ve ever tried to split some text into multiple columns using divs and floats, you know how hard that can be. The first big hurdle you run into is that you have to manually decide where to split the text. In publishing software such as InDesign, you can “link” text boxes together so that when one fills up with text, the text flows into the linked text area. We don’t have anything quite like that on the W e b just yet, but we have something that works really well and is quite easy to use. We can take an element and split its contents into multiple columns, each with the same width. We’ll start with the markup for the newsletter. It’s fairly basic HTML. Since its content will change once it’s written, we’re just going to use
placeholder text for the content. If you’re wondering why we’re not using the new HTML5 markup elements like section and such for this newsletter, it’s because our fallback method isn’t compatible with those elements in Internet Explorer to Creating Multi column Layouts.

Creating Multi column Layouts with html5

Creating Multi column Layouts with html5

<body>
<div id="header">
<h1>AwesomeCo Newsletter</h1>
<p>Volume 3, Issue 12 </p>
</div>
<div id="newsletter">
<div id="director_news">
<div>
<h2>News From The Director</h2>
</div>
<div>
<p>
Lorem ipsum dolor...
</p>
<div class="callout">
<h4>Being Awesome</h4>
<p>
&quot;Lorem ipsum dolor sit amet...&quot;
</p>
</div>
<p>
Duis aute irure...
</p>
</div>
</div>
<div id="awesome_bits">
<div>
<h2>Quick Bits of Awesome</h2>
</div>
<div>
<p>
Lorem ipsum...
</p>
<p>
Duis aute irure...
</p>
</div>
</div>
<div id="birthdays">
<div>
<h2>Birthdays</h2>
</div>
<div>
<p>
Lorem ipsum dolor...
</p>
<p>
Duis aute irure...
</p>
</div>
</div>
</div>
<div id="footer">
<h6>Send newsworthy things to
<a href="mailto:[email protected]"> [email protected]</a>.
</h6>
</div>
</body>

To split this into a two-column layout, all we need to do is add this to our style sheet to Creating Multi column Layouts:

#newsletter{
-moz-column-count: 2;
-webkit-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
-moz-column-rule: 1px solid #ddccb5;
-webkit-column-rule: 1px solid #ddccb5;
}

Now we have something much nicer. We can add more content, and the browser will automatically determine how to split the content evenly. Also, notice that the floated elements float to the columns that contain them to  Creating Multi column Layouts.

$("#newsletter").columnize({ columns: 2 });

People without JavaScript are going to be stuck with a single column of text, but they’ll still be able to read the content, because we marked it up in a linear fashion, so we have them covered. However, we can use JavaScript to detect browser support for certain elements. If we retrieve a CSS property that exists, we’ll get an empty string. If we get a null value back, we don’t have that property available here to Creating Multi column Layouts.

<script
charset="utf-8"
src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'
type='text/javascript'>
</script>
<script
charset="utf-8"
src="javascripts/autocolumn.js"
type='text/javascript'>
</script>
<script type="text/javascript">
function hasColumnSupport(){
var element = document.documentElement;
var style = element.style;
if (style){
return typeof style.columnCount == "string" ||
typeof style.MozColumnCount == "string" ||
typeof style.WebkitColumnCount == "string" ||
typeof style.KhtmlColumnCount == "string";
}
return null;
}
$(function(){
if(!hasColumnSupport()){
$("#newsletter").columnize({ columns: 2 });
}
});
</script>

We simply check for column support, and if none exists, we apply our plug-in.Refresh the page in Internet Explorer,and you’ll now see your two column newsletter. It may not be perfect, on the preceding page, so you’ll need to use a little CSS or JavaScript to fix any elements that don’t quite look right, but I’m leaving that exercise up to you Make Creating Multi column Layouts. Take advantage of conditional comments like we used  JavaScript ,  to target specific versions of Internet Explorer if needed. Separating your content into multiple columns can make your content easier to read. However, if your page is longer, your users might find it annoying to have to scroll back to the top to read the columns. Use this with care to Creating Multi column Layouts.

andcombd