shams,
I couldn't quite see what your reasoning was in your approach to the CSS.
Maybe we could start with the following, and work from there.
The contents of
test.css after I finished editing it to produce something like what I thought you might have wanted:
Code:
#wrapper
{
width: 800px ;
height: 100px ;
margin: 0px ;
border: 0px ;
padding: 0px ;
}
#LeftBar
{
background-color: #FFD700 ;
/* height: 103% ; */
height: 100px ;
/* width: 18.5% ; */
width: 148px ; /* 148px = 18.5% of 800px */
/* top: -1% ; */
margin: 0px ;
border: 0px ;
padding: 0px ;
position: absolute ;
/* float: left ; */
left: 0px ;
}
#RightBar
{
background-color: #FFD700 ;
/* height: 103% ; */
height: 100px ;
/* width: 15% ; */
width: 120px ; /* 120px = 15% of 800px */
/* top: -1% ; */
margin: 0px ;
border: 0px ;
padding: 0px ;
position: absolute ;
/* float: right ; */
left: 680px ;
}
#container
{
background-color: #EEEEEE ;
/* height: 103% ; */
/* width: 800px ; */
height: 100px ;
/* width: 67.5% ; */
width: 532px ;
margin: 0px ;
border: 0px ;
padding: 0px ;
position: absolute ;
/* float: left ; */
/* left: 2% ; */
/* top: 5% ; */
/* margin-left: -50px ; */
/* margin-top: -50px ; */
left: 148px ; /* 148px = 18.5% of 800px */
/* right: 15% ; */
}
In
test.css I tried to supply some formatting, and group together, what I viewed as related lines. In what you originally had, I commented out things for which I didn't understand the purpose. I left your original CSS lines so we perhaps we could refer to them in a discussion.
The contents of
test.html after I formatted it:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test web page</title>
<meta name="generator" content="Bluefish 2.2.3" >
<meta name="author" content="root" >
<meta name="date" content="2013-03-05T22:46:22+0430" >
<meta name="copyright" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="expires" content="0">
<meta >
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="LeftBar" >where are u left bar</div>
<div id="RightBar">where are u right bar</div>
<div id="container">
<br />
<br />
Contents goes here.
</div>
</div>
</body>
</html>
I attached an image file of what the results looks like, when I opened
test.html in various browsers I tested. If you would, perhaps you could please start with what I've provided, and guide us through the reasons you would change from that, in going towards what you originally posted.
