0

hi guys, any ideas on how to format a page like this layout..see attached file...
it's just like, page is divided in three columns....let's say:
1st column is --> 10% of the total width
2nd column is --> 80% of the total width
3rd column is --> 10% of the total width

what's the ideal width for a page?

any ideas is greatly appreciated.. :) thank you..

Attachments 1.JPG 8.72 KB
4
Contributors
5
Replies
7
Views
9 Years
Discussion Span
Last Post by MidiMagic
0

Hello

Do you know how to use CSS?

I use <DIV>'s.

in your case in the CSS I would try...

#column1
{
margin-left:0px;
width:10%;
height:100%;
position:absolute;
}

#column2
{
margin-left:10%;
width:80%;
height:100%;
position:absolute;
}

#column3
{
margin-left:90%;
width:10%;
height:100%;
position:absolute;
}

Then in the HTML...

<div id="column1">
<!--content here -->
</div>

<div id="column2">
<!--content here -->
</div>

<div id="column3">
<!--content here -->
</div>

I am not sure if it will work as you want but it will be something similar too this.

- Hope this helps.

0

hi, xlphos....i read your code i think it should work fine..let you know i'll try it out.. thanks... :)

0

You can also try this demo. This layout is supported in all types of browser's.

<?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>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Test Page</title>
<style type="text/css">
/* <![CDATA[ */
html, body {
   background-color : #fff;
   border : none;
   font : normal normal normal 90%/1.6 Verdana, Tahoma, sans-serif;
   height : 100%;
   min-width : 800px;
   min-height : 600px;
   text-align : center;
   width : auto; }

div {
  border : none;
  margin : 0;
  padding : 0; }

div#main {
  clear : both;
  margin : 0 auto;
  width : 100%; }

div#content {
   background-color : #f0f0f0;
   color : #405060;
   clear : both;
   float : left;
   width : 100%; }

div#divL10 {
   clear : left;
   float: left;
   width : 10%; }

div#divR10 {
   clear : right;
   float: left;
   width : 10%; }

div#divC80 {
   clear : none;
   float: left;
   width : 80%; } div#divC80 div.tube { border-left : none; border-right : none; }

div.tube {
   border : 1px solid #ddd;
   padding : 1.2em;
   min-height : 600px; }
div.spacer {
   background-color : inherit;
   clear : both;
   height : .100em;
   width : 100%; }
/* ]]> */
</style>
</head>
<body>
<div id="main">
<div id="content">
<div id="divL10">
<div class="tube">
<h2>Left Column 10%</h2>
<!-- You can put more content's here -->

</div><!-- CONTENT HOLDER -->
</div> <!-- Left: column will get 10% of overall width -->

<div id="divC80"> 
<div class="tube">
<h2>Center Column 80%</h2>

<!-- You can put more content's here -->

</div><!-- CONTENT HOLDER -->
</div><!-- Center: Will get 80% of the overall width -->

<div id="divR10">
<div class="tube">
<h2>Right Column 10%</h2>

<!-- You can put more content's here -->

</div><!-- CONTENT HOLDER -->
</div> <!-- Right: column will get the last 10% of the overall width -->

</div>
<div class="spacer"></div>
</div>
</body>
</html>
0

what's the ideal width for a page?

The ideal width of a page is 100% of the browser window.

Never use pixels or other absolute measures to set widths. Set the widths of items on the page as percentages of the page width.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.