2 Columns CSS example

Simply copy and paste the following code inside an html page and run it from a browser (tested on IE & Mozilla).
If you want to see the live result (we believe this is the best way to learn what is the script about), try it here (new window).

<?xml version="1.0" encoding="UTF-8"?> <!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>2 Columns example</title> <meta http-equiv="content-language" content="en" /> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> /*the following class surrounds the 2 columns to set a fixed width for the 2 columns*/ .topcolumns{width:606px;height:auto;} /*the float value tells the browser to add following content on the right side*/ .leftcol{float:left;width:200px;height:auto;border:1px solid orange;background-color:#fefefe} /*the margin tells the browser to add the content on the right and not under or on top*/ .rightcol{margin-left:202px;width:400px;height:auto;border:1px solid red;background-color:#cfcfcf;color:#343434} </style> </head> <body> <h1>Example of 2 columns</h1> <div class="topcolumns"> <div class="leftcol"> Some text here<br /> Or a menu... text, links, images, videos...<br /> <p> The width is fixed (200px) and the height automatically fits the amount of text. </p> </div> <div class="rightcol"> A lot text can be added here,<br /> A lot text can be added here,<br /> A lot text can be added here,<br /> A lot text can be added here,<br /> A lot text can be added here,<br /> A lot text can be added here,<br /> A lot text can be added here,<br /> <p> The width is fixed (400px) and the height automatically fits the amount of text. </p> A lot text can be added here,<br /> A lot text can be added here,<br /> A lot text can be added here,<br /> A lot text can be added here,<br /> A lot text can be added here,<br /> A lot text can be added here,<br /> A lot text can be added here,<br /> </div> </div> <p> Some text under the columns </p> </body> </html>

Note:
- The topcolumns class forces the browser not to move the right column on resize,
- You may change the values of the CSS style to change the design of the borders, colors, columns' size, margin and padding.

Comments

Post the first comment now
or discuss about it at this address:
Forum - CSS

Webmaster Corner

The Millionaire league
Dozens of Easy and Automatic Ways to Make Money Online Everyday!

Niche Annihilation Method
Crush Your Competition!
Download the method Now

iPowerWeb
Incredible Membership Packages - Web Hosting!

One Month Free Trial! ProStores - an eBay Company
Gain customers, increase sales, and boost profits with your own Web Store.

→ Get Google Pay-Per-Click Ads Free!
→ Automated Cash Formula $$$

2 Columns CSS example

2 Columns CSS example

Comments

Webmaster Corner

Categories