Blog « The Choppr

Way to Align Checkboxes and Their Labels Consistently (cross-browsers)

So, the problem is how to align checkbox and its label and looking the same in all browsers. You align them in one browser and then check with another they can be completely messed up.

Let’s have the standard code first:


<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
</form>

And is one solution that I find working perfect for my need:


label {
    display: block;
    padding-left: 15px;
    text-indent: -15px;
}
input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: bottom;
    position: relative;
    top: -1px;
    *overflow: hidden;
}

This code assumes that you’re using a reset like Eric Meyer’s that doesn’t override form input margins and padding (hence putting margin and padding resets in the input CSS).

The Best Way to Test Layout Design Across Multiple Browsers & OSs?

What is a good method for testing website layout designs across multiple browsers and operating systems?

Screen capturing services are a great way to do this.

BrowserShots (Free)

http://browsershots.org/

BrowserCam & LitmusApp (Paid)

http://www.browsercam.com
http://litmusapp.com

These kinds of services are nice because they allow you to specify a certain amount of time to wait for the page to load, and allow you have them perform actions (clicking links etc). Then you get a nice array of screenshots you can quickly browse to ensure your site looks like you expected across your desired platforms.

How would you this, WITHOUT tables?

tiles

This layout can be done quite simply with 2 HTML tables, one nested inside the other, or even with a single table. However, can it be done only with CSS??? Here is a solution I found, it’s pretty cool check it out.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>The Challenge</title>
<style type="text/css">
div     {
    text-align: center;
    width: 175px;
    height: 175px;
    line-height: 35px;
}

div div {
    float:left;
    width: 35px;
    height: 35px;
}

#orange, #maroon,
#blue  , #green  {
    float:right;
}

#orange, #silver {
    background-color: silver;
    width: 140px;
}

#navy  , #maroon {
    background-color:maroon;
    height:140px;
    line-height:140px;
}

         #navy   {
            background-color:navy ;
         }

#green , #red    {
    background-color:red;
    width: 70px;
}

#yellow, #blue   {
    background-color:blue;
    height: 70px;
    line-height: 70px;
}

         #yellow {
             background-color:yellow;
         }

         #white  {
             background-color:white ;
         }

         #green  {
             background-color:green ;
         }

         #orange {
             background-color:orange;
         }
</style>
</head>
<body>
  <div>
    <div id="silver">1</div>
    <div id="maroon">2</div>
    <div id="navy">3</div>
    <div id="red">4</div>
    <div id="blue">5</div>
    <div id="yellow">6</div>
    <div id="white" >7</div>
    <div id="green" >8</div>
    <div id="orange">9</div>
  </div>
</body>
</html>

via jsbin

What is The Best Way to Create Rounded Corners Using CSS?

Well there are couple of options when it comes to round corners.

Images

The old fashion way is using images. Some say that the other ways (JS for example) aren’t nearly as good: No anti-aliasing and senseless markup.

jQuery

All those JS fans would say go with jQuery, CSS support is minimal, images are too fiddly, to be able to select the elements you want to have round corners in jQuery makes perfect sense to even though some will no doubt argue otherwise. However, Javascript definitely has the highest scope for failure, and flickering in my experience. Here are couple of plugins you might consider using.

http://www.methvin.com/jquery/jq-corner-demo.html
http://plugins.jquery.com/project/jquery-roundcorners-canvas

CSS 3 and border-radius

With support for CSS3 being implemented in newer versions of Firefox, Safari and Chrome, it will also be helpful to look at “Border Radius”. But how about IE and Opera. You can always follow the “twitter way” handling this issue and my fave, downgrade the rounded corner feature to pointed corners on their website to IE users. Not a big deal really. Right?


    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;

Like any other CSS shorthand, the above can also be written in expanded format, and thus achieve different Border Radius for the topleft, topright, etc.


    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 7px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 3px;
    -webkit-border-top-rightright-radius: 10px;
    -webkit-border-top-left-radius: 7px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-rightright-radius: 3px;

Here couple more links if you’d like to see more examples and solutions:

Are Fluid Websites Worth Making Anymore?

First of all it depends on your audience and your content. Amazon and Wikipedia are only couple of examples and are one of the most visited websites in the world. When asking a question like this or even thinking of creating a fluid layout the first thing that pops-out in most front end developers is “How is it going to look in IE6?”. Well we all want to stop supporting IE6 but that’s not the case with all there visitors that are using it. According to w3Schools 13% of the Web uses IE6. That’s a good reason to support IE6. Simple ideological dislike is not enough to dump IE6. Some people are arguing that in most modern browsers you can hold control and scroll your mouse wheel to basically re-size any website. So why should we make the layout fluid, browsers have the problem solved. Well most users aren’t that savvy to know all the features and shortcuts. You have to realize most computer users don’t even KNOW HOW to zoom in the browser! Most users are so far from the understanding of computers that we have. We always have to remember that fact. Making a website fluid, by adding a min/max-width attribute seems to be the best of both worlds. You support fluidity, but you limit it at a certain width (say, 800px and 1200px). So, it is up to you to decide and when you go to your next meeting and client says “I want my layout to be fluid” here are some things you talk about before you take the final decision:

Text is hard(er) to read when lines are very long.
Your audience may have larger or smaller resolutions than normal, and picking an ‘incorrect’ static width will annoy them.
Maintaining a fluid site can be, but doesn’t have to be much more difficult than its static counterpart.

Force IE7 Standards on IE8

Following the previous post here are couple of ways emulate and force your browser to go with the IE7 standards while opened with IE8.

First, to do that you’d need to have XHTML Transitional doctype.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Then you’d need add the following line above all your meta tags:


<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

The solution, is to set the X-UA-Compatible value via an HTTP header ala:


<?php
    header('X-UA-Compatible: IE=EmulateIE7');
?>

IE8 Conditional Comments

Here is an email that I received yesterday from Mike M of VoloMike and a problem that he found when trying to use conditional comments for IE8.

“So last night I discovered to my horror that if you are trying to do custom CSS for IE8 using conditional comments, your XHTML or HTML will be required to pass strict W3C validation. Otherwise, the browser may announce itself as IE7 through its conditional comments. Also, on intranets (such as when testing your website), it will announce itself as IE7.

For instance, I noticed that in IE8 they fixed the old float left/right problem where the float right would drop below (next line) of the float left. So, any CSS repositioning tweaks (via IE conditional comments) you may have been doing to bring up the rightside float by x pixels is only going to put that right float up in the air somewhere. So, I introduced an IE8 conditional comment to trigger some custom CSS to bring it back down, and to my horror I couldn’t get it to fire on my intranet.

So, the only way to trap for IE8 appears to be to use a browser quirk (such as finding something in the DOM that only applies to IE8), or asking jQuery to identify it, or using a CSS hack (one that fires only for IE8) to style it.”

Best Page Width and Screen Resolution Trends

Liquid layouts are decidedly out-of-fashion. Fixed-width, centered layouts have become the dominant design pattern for the Web, and for good reason too. Fixed-width layouts allow designers to define strict proportions between columns, and keep line-lengths under control. Another thing that is not considered anymore by designers and developers is the 800×600 resolution, more and more people buy larger screens with better resolutions. Only about 4% of the users are still using the 800×600 resolution on their monitors. That means that we can increase the width of our pages, which will decrease the height and we can put more content to the top of the our pages.

Below you can see a list of random selected, fixed width, web pages

Best Buy – 802px
Buy.com – 1025px
Microsoft – 950px
eBay – 955px
Apple – 998px
About – 976px
Live Journal – 1011px
ESPN – 960px
CNN – 1018px
BBC – 1010px
News – 1014px
ABC – 1018px
MSNBC/MSN – 1012px
CBC – 1002px
Yahoo – 966px
NYT – 988px
Youtube – 991px
Facebook – 980px
Myspace – 976px
Hi5 – 983px
WordPress – 976px
Flickr – 966px
Photobucket – 976px
IMDB – 1029px

Most of the pages will fit inside 1024×768 (except IMDB & Buy.com), which will cover around 93% of your visitors [ source: W3School Display Statistics ].

In conclusion, if you select your next web site to have fixed width you can choose for your width to be anywhere between 960px to 1020px.

Note: the average width from the sites above is 982px, which will give you 980px page width with 1px for left & right border.

Tip: You can also have 100% header & footer with fixed width body.

3 Free Fixed Width CSS Templates

Here you can find and use the code for three of the most popular fixed width layouts. I’ve created the structure and added some basic CSS so you can easily use them as a base for your templates.

2 Column Fixed Width Layout

This is your generic two column layout with left sidebar, you can easily move the sidebar to the right by changing its float from left to right.

The HTML Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>The Choppr - 2 Columns / Left Sidebar / Fixed Width / Centered</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">@import "style.css";</style>
</head>
<body>

<div id="container">

    <div id="header">
        <p>Luis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris.</p>
    </div>

    <div id="body">

        <div id="left-sidebar">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing, nunc quis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
        </div>

        <div id="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing, nunc quis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
        </div>
    </div>

    <div id="footer">
        <p>Luis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris.</p>
    </div>
</div>

</body>
</html>

The CSS Code:


html, body {
    padding: 0px;
    margin: 0px;
    height: 100%;
}

div#container {
    width: 980px;
    margin: 0 auto;
    border: 1px solid #000;
}

div#header {
    height: 100px;
    background: #ba6f19;
    border-bottom: 1px solid #000;
    padding: 10px;
}

div#body {
    overflow: hidden;
    width: 980px;
}

div#content {
    width: 760px;
    float: left;
    padding: 10px;
}

div#left-sidebar {
    width: 179px;
    float: left;
    padding: 10px;
    background: #ba6f19;
    border-right: 1px solid #000;
}

div#footer {
    height: 100px;
    background: #ba6f19;
    border-top: 1px solid #000;
    padding: 10px;
}

3 Column Fixed Width Layout

This is your generic three column layout with left and right sidebars. To have full height sidebars I’ve added a page background image (repeat-y) that keeps each sidebar background to go all the way down to the footer.

The HTML Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>The Choppr - 3 Columns / Left/Right Sidebars / Fixed Width / Centered</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">@import "style.css";</style>
</head>
<body>

<div id="container">

    <div id="header">
        <p>Luis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris.</p>
    </div>

    <div id="body">

        <div id="left-sidebar">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing, nunc quis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
        </div>

        <div id="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing, nunc quis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
        </div>

        <div id="right-sidebar">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing, nunc quis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
        </div>
    </div>

    <div id="footer">
        <p>Luis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris.</p>
    </div>
</div>

</body>
</html>

The CSS Code:


html, body {
    padding: 0px;
    margin: 0px;
    height: 100%;
}

div#container {
    width: 980px;
    margin: 0 auto;
    border: 1px solid #000;
}

div#header {
    height: 100px;
    background: #ba6f19;
    border-bottom: 1px solid #000;
    padding: 10px;
}

div#body {
    overflow: hidden;
    width: 980px;
    background: url("page-back.gif") repeat-y top left;
}

div#content {
    width: 560px;
    float: left;
    padding: 10px;
}

div#left-sidebar {
    width: 179px;
    float: left;
    padding: 10px;
}

div#right-sidebar {
    width: 179px;
    float: left;
    padding: 10px;
}

div#footer {
    height: 100px;
    background: #ba6f19;
    border-top: 1px solid #000;
    padding: 10px;
}

Full Width Header and Footer (Fixed Layout)

And finally, there is header and footer backgrounds extending the full width of the page, however, the main sections of the layout header, footer & body are fixed width.

The HTML Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>The Choppr - Fluid Header/Footer / Fixed Body / Sticky Footer</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">@import "style.css";</style>
</head>
<body>

<div id="container">

    <div id="main">

        <div id="header-outer">

            <div id="header">
                <p>Luis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris.</p>
            </div>
        </div>

        <div id="body">

            <div id="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing, nunc quis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing, nunc quis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
            </div>
        </div>
    </div>
</div>

<div id="footer-outer">
    <div id="footer">
        <p>Luis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris.</p>
    </div>
</div>

</body>
</html>

The CSS Code:


html, body {
    height: 100%;
    padding: 0px;
    margin: 0px;
}

/* IE7 Fix */
* html #container {
    display: table;
    height: 100%
}

/* Opera Fix */
body:before {
    content: "";
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px;
}

div#container {
    height: 100%;
    height: auto !important;
    min-height: 100%;
}

div#main {
    overflow: auto;
    padding-bottom: 100px;
}

div#header-outer {
    width: 100%;
    background: #ba6f19;
    border-bottom: 1px solid #000;
}

div#header {
    width: 660px;
    height: 100px;
    margin: 0px auto;
    padding: 10px;
}

div#body {
    width: 680px;
    margin: 0px auto;
    height: 100%;
    height: auto !important;
    min-height: 100%;
    margin-bottom: -100px;
}

div#content {
    padding: 10px;
}

div#footer-push {
    height: 100px;
}

div#footer-outer {
    background: #ba6f19;
    border-top: 1px solid #000;

    width: 100%;
    position: relative;
    height: 100px;
    margin-top: -101px;
    clear: both;
}

div#footer {
    width: 660px;
    height: 100px;
    margin: 0px auto;
}

div#footer p {
    padding: 20px;
    margin: 0px;
}

2 Column Fluid Layout (100% height) with Left/Right Sidebar

Following the previous article, where I described how you can create a 3 column fluid layout with expanding 100% of the page height, I’ve decided to post another two similar layouts (both expand 100% of the page height):

The HTML Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>The Choppr - 2 Columns / Left Sidebar / Fluid Width / Scticky Footer</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">@import "style.css";</style>
</head>
<body>

<div id="container">

    <div id="main">

        <div id="header">
            <p>Luis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris.</p>
        </div>

        <div id="body">
            <div id="left-sidebar">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing, nunc quis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
            </div>

            <div id="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing, nunc quis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
            </div>
        </div>

    </div>
</div>

<div id="footer">
    <p>Luis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris.</p>
</div>

</body>
</html>

The CSS Code:


html, body {
    height: 100%;
    padding: 0px;
    margin: 0px;
}

body {
    background: url("left-sidebar-back.gif") repeat-y top left;
}

/* IE7 Fix */
* html #container {
    display: table;
    height: 100%
}

/* Opera Fix */
body:before {
    content: "";
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px;
}

div#container {
    height: 100%;
    height: auto !important;
    min-height: 100%;
}

div#main {
    overflow: auto;
    padding-bottom: 100px;
}

div#header {
    height: 100px;
    background: #ba6f19;
    border-bottom: 1px solid #000;
    padding: 20px;
}

div#body {
    overflow: hidden;
    height: 100%;
}

div#content {
    margin: 0px 0px 0px 300px;
    padding: 20px;
}

div#left-sidebar {
    width: 260px;
    float: left;
    padding: 20px;
}

div#footer {
    background: #ba6f19;
    border-top: 1px solid #000;

    position: relative;
    height: 100px;
    margin-top: -101px;
    clear: both;
}

div#footer p {
    padding: 20px;
    margin: 0px;
}

And here is the other one:

The HTML Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>The Choppr - 2 Columns / Right Sidebar / Fluid Width / Scticky Footer</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">@import "style2.css";</style>
</head>
<body>

<div id="container">

    <div id="main">

        <div id="header">
            <p>Luis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris.</p>
        </div>

        <div id="body">
            <div id="right-sidebar">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing, nunc quis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
            </div>

            <div id="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing, nunc quis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim tincidunt lobortis. Pellentesque fermentum fermentum justo. Nam sodales tempor tortor. Mauris sit amet tellus. Integer at dolor non felis vestibulum luctus. Ut pretium massa a metus condimentum faucibus. Quisque convallis, risus quis dapibus tempor, sem mi aliquam risus, eu ullamcorper metus sapien sit amet nunc. Fusce enim.</p>
            </div>
        </div>

    </div>
</div>

<div id="footer">
    <p>Luis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris.</p>
</div>

</body>
</html>

The CSS Code:


html, body {
    height: 100%;
    padding: 0px;
    margin: 0px;
}

body {
    background: url("right-sidebar-back.gif") repeat-y top right;
}

/* IE7 Fix */
* html #container {
    display: table;
    height: 100%
}

/* Opera Fix */
body:before {
    content: "";
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px;
}

div#container {
    height: 100%;
    height: auto !important;
    min-height: 100%;
}

div#main {
    overflow: auto;
    padding-bottom: 100px;
}

div#header {
    height: 100px;
    background: #ba6f19;
    border-bottom: 1px solid #000;
    padding: 20px;
}

div#body {
    overflow: hidden;
    height: 100%;
}

div#content {
    margin: 0px 300px 0px 0px;
    padding: 20px;
}

div#right-sidebar {
    width: 260px;
    float: right;
    padding: 20px;
}

div#footer {
    background: #ba6f19;
    border-top: 1px solid #000;

    position: relative;
    height: 100px;
    margin-top: -101px;
    clear: both;
}

div#footer p {
    padding: 20px;
    margin: 0px;
}

Way to Align Checkboxes and Their Labels Consistently (cross-browsers)

The Best Way to Test Layout Design Across Multiple Browsers & OSs?

How would you this, WITHOUT tables?

What is The Best Way to Create Rounded Corners Using CSS?

Are Fluid Websites Worth Making Anymore?

Force IE7 Standards on IE8

IE8 Conditional Comments

Best Page Width and Screen Resolution Trends

3 Free Fixed Width CSS Templates

2 Column Fluid Layout (100% height) with Left/Right Sidebar

Recent Posts

Categories

Twitter Updates