Three columns CSS styles for regular PC browsers and mobile device

First, let us create 3 columns layout for a regular browser in such a way that in HTML file the middle column content would come first, and then would come right column or left column.

I use left column for Google ads and right column for navigation that is why I place right column before the left column. It is hard to understand from the picture. Let me explain you how I achieved it.

First, I created a page div (yellow). Inside it, I placed a header div, a content (green) div and a footer div. Inside the content (green) div, I put the middle-right (red) div float: right. Inside the red middleright div I put the middle div float: left. That way, content of the middle div is coming first.

Below the middle div, I put the right div float: right; and closed the red middle-right div. Below the middle-right red div, I put the left div float: left and closed the content div.

In other words, inside the content div I put two divs>: the middle-right div float: right and the left div float: left. But in HTML file before putting content of the left div, I put two divs inside the middleright div: the middle div (float: left) and then the right div (float: right). Then I closed the middleright div. Then I put the left div floating left. Closed the content div. Put footer div and closed the page div. The whole page architecture is shown below without any contents.

Here, I give you real page architecture. The page has content, Google ad on the left and navigation on the right column. Usually, navigation is located on the left column. I placed it on the right because visitors make much more clicks on the ad if it is placed on the left column. I performed experiments with different ad location and for my site the left column for ads works much better than the right.

Clip Art Free

This my page has the same layout and uses the same css files.

HTML PAGE:

<!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">
<head>
<title>Mobile CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta name="title" content=""/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<meta name="owner" content="Serge Skudaev"/>
<meta name="author" content="Sergey Skudaev"/>
<meta name="robots" content="noindex,nofollow"/>
<meta name="revisit after" content="2 weeks"/>
<link href="cstyle.css" rel="stylesheet" type="text/css" media="Screen"/>
<link href="mobile.css" rel="stylesheet" type="text/css"
media="handheld"/>

</head>
<body>
<div id="page">
<div id="header">
<h1>Header</h1>
</div>
<div id="content">
<div id="middle_right">
<div id="middle">
<h1>Introduction to Programming</h1>

<p>Programming in PHP, as programming in any computer languages or scripts is not as impossible as you may think. An average person can master computer programming. You maybe think that to be a good computer programmer you should be very good in math, but it is not necessary true.</p><p>I, was a biologist in my country and when came to US, computer programmers were in great demand. All immigrants, regarding their previous background rushed to learn computer programming. I was hesitated, because I thought biology and computer programming are to different, but my wife convinced me that I could master computer programming and I grateful to her, because I love programming much more than biology. I became addictive to programming.</p>

<p>You do not have to be good in math to be good in computer programming. Actually, programming is closer to packaging than to math. You are surprise that I compare programming with packaging? Yes, it is similar and I will show you how.</p>

<p>Any programming language deals with variables. Variables are used to hold different pieces of data. What is a variable? You may think of a variable as of a packaging box. Different type of data required different type of boxes. In computer programming we have to deal with numbers and text. So we have to use variables that hold numbers and pieces of text or strings of text.</p>

<p>There may be whole numbers and numbers with fractions. Variable that holds the whole number is called INTEGER. Variable that holds number with decimal points is called float or double.</p>

<p>Variable that holds a piece of text is called string. Any program usually starts with declaration variables and their data types. For example, in C++ or Java you have to declare variable name and exact data type:</p>

</div>

<div id="right">
<?
Include('menu.php');
?>
</div>
</div>
<div id="left">
</div>
</div>
<div id="footer">
<h1>footer</h1>
</div>
</div>
</body>
</html>

Regular CSS: style.css
html {
font-size:100%;
}
body {
border:0;
width:100%;
background:#fff;
text-align:center;
margin:0px;
padding:0px;
font-size:85%;
}
DIV#page {
top:0;
margin-top:0px;
margin-right:auto;
margin-left:auto;
text-align:left;
width:950px;
padding:0;
background:#:#993366;
margin-bottom:0px;
}
DIV#header
{
height:120px;
width:950px;
text-align:center;
background:#ffff00;
}
DIV#content {
position:relative;
top:0;
text-align:left;
width:950px;
height:900px;

background:#ff0000;
margin:0
}
DIV#middle_right {
float:right;
width:770px;
height:900px;
padding-left:0px;
padding-right:0px;
margin:0;
background:#00eeff;
}
DIV#middle {
float:left;
top:0;
width:555px;
height:900px;
padding-top:1px;
margin-left:0px;
margin-right:0px;
background:#cyan;
margin-bottom:0;
padding-left:25px;
padding-right:10px;
}
DIV#left {
float:left;
width:159px;
height:900px;
color:#ffffff;
background:#993366;
padding-left:10px;
padding-right:10px;
margin:0;
}
DIV#right {
float:right;
width:159px;
height:900px;
padding-left:10px;
padding-right:10px;
margin:0;
color:#ffffff;
background:#:#993366;
}
DIV#footer {
margin-top:-20px;
padding-top:20px;
width:950px;
height:90px;
background:#9999ff;
}

I set the footer margin-top to – 20px because for some
unknown reason in Firefox the footer was displayed 20px
lower than my 3 columns bottom edge. As a result, the
content of the footer was moved up. To fix it, I set
padding-top to 20px. That way negative margin and
positive padding cancel each other and footer content is
displayed as if it does not have margin and padding.

h1 {
font-size:150%;
color:#465D7C;
font-family:Arial, Helvetica, sans-serif;
}
h2 {
font-size:100%;
color:#465D7C;
}
li {
list-style-type:none;
line-height:120%;
font-size:83%;
color:#ff9966;
}
ul li a.menu {
color:#dddddd;
font-family:Verdana, sans-serif;
font-size:83%;
background:#465D7C;
text-decoration:underline;
}
li {
list-style-type:none;
line-height:120%;
font-size:82%;
color:#ff9966;
margin-left:-40px;
padding-left:5px;
}

It is important to set the same background color for left div, right div and middle_right div in production version. That way you do not have to set height for any div except header and footer.

The length of the page div, content div, middle_right div and middle div will be determined by length of your main contents. If the left and right columns contents are shorter than main contents, page div will be seen under the left div and middle_right div will be seen under the right div, but if you set the same background color for all of them, then they will not be seen. On my site www.poetry-anthology.com I leave middle column white and for all the rest divs I set background color to #465D7C;

3. One column layout CSS styles for mobile device

Mobile CSS

Since, mobile browsers do not support floating blocks, in mobile.css, I set all blocks to position: absolute. The left properties for all blocks were set to 0px. The header height was set to 12px, and the middle column top to 12px; as well, so that it would be displayed right away after the header. The left block and the footer block are set to display: none. So, they are not displayed. The whole mobile.css file is displayed below.

Pocket PC browser.

DIV#header
{
position:absolute;
left:0px;
top:0px;
height:12px;
text-align:center;
background:#ffff00;
}

#middle {
position:absolute;
left:0px;
top:12px;
padding-left:5px;
margin-left:10px;
padding-right:0px;
margin-right:0px;
}
#right {
position:absolute;
left:0px;
padding-left:0px;
margin-left:0px;
background:#993366;
}
#left {
display:none;
}
#footer {
display:none;
}
li {
list-style-type:none;
line-height:120%;
font-size:83%;
color:#ff9966;
}
ul li a.menu {
color:#dddddd;
font-family:Verdana, sans-serif;
font-size:77%;
background:#993366;
text-decoration:none;
}
table {
align:left;
width:200px;
}
li {
list-style-type:none;
line-height:100%;
font-size:120%;
color:#ff9966;
margin-left:-40px;
padding-left:5px;
}
a.menu2:visited {
font-family:Arial, Helvetica, sans-serif;
color:#336699;
font-size:85%;

text-decoration:underline;
background:#C898B2;
}
a.menu2:hover {
font-family:Arial, Helvetica, sans-serif;
color:#465DBB;
font-size:85%;
text-decoration:underline;
background:#C898B2;
}
a.menu2:link,a.menu2:active {
font-family:Arial, Helvetica, sans-serif;
background:#C898B2;
color:#336699;
font-size:85%;
text-decoration:underline
}
h1, h2, h3{font-size:77%; font-family:Arial, Helvetica, sans-serif;
color:#993366;}

For IE 6

html {
font-size:100%;

}

body {
border:0;
width:100%;
text-align:center;
margin:0px;
padding:0px;
font-size:85%;
background:#ffffff;
}

DIV#page {
top:0;
margin-top:0px;
margin-right:auto;
margin-left:auto;
text-align:left;
width:1000px;
padding:0;
background:#993366;
margin-bottom:0px;
}

DIV#header {
left:0;
top:0;
width:1000px;
height:110px;
color:#fff;
background:url("images/h.jpg") 0 0 repeat-x;
margin:0;
padding:0;
text-align:center;
border-bottom:1px solid #CCC;
}

DIV#headerad
{
height:20px;
width:1000px;
text-align:center;
background:#ffffff;
border-bottom:1px solid #CCC;
}

DIV#content {
position:relative;
top:0;
text-align:left;
width:1000px;
background:#ffffff;
margin:0;
}

DIV#middle_right {
float:right;
width:809px;
padding-left:0px;
padding-right:0px;
margin:0;
background:#ffffff;
}

DIV#middle {
float:left;
top:0;
width:570px;
padding-top:0px;
margin-left:0px;
margin-right:0px;
background:#ffffff;
margin-bottom:0;
padding-left:25px;
padding-right:5px;
}

DIV#left {
float:left;
width:171px;
color:#ffffff;
background:#993366;
padding-left:10px;
padding-right:10px;
margin:0;
}

DIV#right {
float:right;
width:171px;
padding-left:10px;
padding-right:10px;
margin:0;
color:#ffffff;
background:#993366;
}
DIV#footer {
margin-top:-20px;
padding-top:20px;
width:1000px;
height:90px;
background:#9999CC;
}

h1 {
font-size:150%;
color:#465D7C;
font-family:Arial, Helvetica, sans-serif;
}
h2 {
font-size:100%;
color:#465D7C;
}
li {
list-style-type:none;
line-height:120%;
font-size:83%;
color:#ff9966;
}
ul li a.menu {
color:#dddddd;
font-family:Verdana, sans-serif;
font-size:83%;
background:#465D7C;
text-decoration:underline;
}
li {
list-style-type:none;
line-height:120%;
font-size:82%;
color:#ff9966;
margin-left:-40px;
padding-left:5px;
}

You can change background colors and font colors for all blocks to what ever you like. I made them different in color on purpose, so that you could better see each block (div). You can play with font sizes as well and choose what is better for you. Be creative! Good Luck!

Please rate the tutorial

Learn SQL Programming By Examples [Kindle Edition]2.99

Learn PHP Programming by Examples [Kindle Edition] $2.99

Learn Visual Basic 6.0 [Kindle Edition] $1.99

How to Build Your Own Web Site from Scratch [Kindle Edition] $1.49

New-trip.com website source code

Comments

Register to add comments ( 1000 char ) for css_layout_for_pc_mobile.php.

Computer Programming Web programming Tips

Three columns CSS styles for regular PC browsers and mobile device

HTML PAGE: