Member Avatar for cguan_77

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..

1.JPG 8.72 KB
  • 4 Contributors
  • 5 Replies
  • 88 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by MidiMagic
Member Avatar for Xlphos

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.

Member Avatar for cguan_77

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

Member Avatar for essential

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>
Member Avatar for cguan_77

thanks for the help.. :)

Member Avatar for MidiMagic

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.