Making 3 columns which is bordered tabless

The code below at http://dot.kr/x-test/tablessLayout02.php has no border in the title line which is red backgrounded of the page.

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>layOut</title>
<style type="text/css">
* { margin:0; padding:0;}
.contentWrapper{
float: left;
width: 100%;
}
.bolor{
background-color:#ffff88;
}
.folor{
color:#000;
}
#center3liquid{
margin: 0 200px 0 200px; 
background-color:#777;
}
[COLOR="#FF0000"]#centerFix3liquid{
margin: 0 220px 0 220px; 
background-color:#ff88cc;
}[/COLOR]
#left3column{
float: left;
width: 200px; 
margin-left: -100%;
background: #bbb;
}
[COLOR="#FF0000"]#leftFix3column{
float: left;
width: 220px; 
margin-left: -100%;
background: #88ffcc;
}[/COLOR]
#right3column{
float: left;
width: 200px;
margin-left: -200px; 
background: #bbb;
}
[COLOR="#FF0000"]#rightFix3column{
float: left;
width: 220px;
margin-left: -220px; 
background: #88ffff;
}[/COLOR]
#screen { 
width:400px;
background-color:#bbb;
margin:auto;
padding:5px;
}
#title { 
background-color:#ffaaaa;
margin:auto;
padding:5px;
}
#left2liquid{
margin-right: 200px;
margin-top:15px;
}
#right2column{
float: left;
width: 200px;
margin-left: -200px; 
background: #ff88ff;
}
#sideBar {
 float: left;
 width: 230px; 
 margin-left: -230px; 
 background: #aaffff;
}
.wFull{width:100%}
.w10{width:10px}
.w200{width:200px}
.w300{width:300px}
.w400{width:400px}
.h5 {height:5px}
.h10 {height:10px}
.h30 {height:30px}
.h50 {height:50px}
.m5 {margin:5px;}
.m-t5 {margin-top:5px;}
.m-t10 {margin-top:10px;}
.m-l5 {margin-left:5px;}
.m-r5 {margin-right:5px;}
.m-b5 {margin-bottom:5px;}
.p2{padding:2px} 
.p3{padding:3px} 
.p-t5{padding-top:5px;}
.p-l5{padding-left:5px;}
.p-r5{padding-right:5px;}
.b1_555 { border:1px solid #555}
.alignLeft{text-align:left}
.alignCenter{text-align:center}
.alignRight{text-align:right}
.bColorWhite{background-color:#ffffff}
.marginAuto{margin:auto}
.clearBoth{clear:both}
.guest-login {
 float:left;
 width:180px;
 background: #bbb ;
 padding:0px 0px 3px 50px;
}
.guest-login p{margin:0}
.guest-login span, .guest-login strong {
 border:1px solid #555;
 background:#ffff88;
 padding:2px;
 overflow:hidden;
 display:block;
 text-align:center;
}

.guest-login span {
 float:left;
 margin:0 3px 0 0;
}

.top span {
 float:right;
 margin:0 0 0 3px;
}

.hr {
 clear:both;
 border:1px solid #555;
 background: #ffff88;
 padding:2px;
 margin:4px 0px;
}
.hr hr {
 position:absolute;
 left:-999em;
}
.guest-login div { clear:both }
</style>

</head>

<body>

<div class="contentWrapper">
<div id="left2liquid">
 <a href="">my domain</a>
</div></div>

<div id="sideBar">
<div class="guest-login" >
  <div class="top folor">
    <p><span>00</span><strong>Guest</strong> </p>
  </div>
  <div class="hr"><hr></div>
  <div>
    <p class="folor"><span>00</span> <strong>Login</strong></p>
  </div>
</div>
</div>

<form>
<div class="clearBoth h30 alignCenter p-t5 b1_555 bolor">
<a href="" class="w10 b1_555 p-l5 p-r5 bColorWhite">+</a>
<input type="text" class="w300">
<input type="submit" value="search">
</div>
</form>

<div class="clearBoth h30 m-t5 p-t5 b1_555 bolor">
   <div class="w400 alignCenter p2 b1_555 marginAuto bColorWhite"> (navigator)  sun > earth > asia (ancestors of Korea) </div>
</div>

<div class="h5 clearBoth"></div>
[COLOR="#FF0000"]<div class="contentWrapper">
  <div id="centerFix3liquid" class="h30 alignCenter">
      <p>title (liguid width)</p>
  </div>
</div>

<div id="leftFix3column">
<div class="alignCenter">
 <p class="m5"> left (fixed width)</p>
</div>
</div>

<div id="rightFix3column">
<div class="m5 alignCenter">
<p> right (fixed width) </p>
</div>
</div>[/COLOR]

<div class="h5 clearBoth"></div>
<div class="contentWrapper">
  <div id="center3liquid">
        <div id="screen">
<p><a href="index.php?bone=ffff88">bone=ffff88</a></p>
        </div>  

<div class="h30 bolor folor b1_555 alignCenter m5 p5"> footer</div>  
  </div>
</div>

<div id="left3column">
<div class="m5">
<p>brothers and sisters of Korea</p>
<p>China</p>
<p>Japan</p>
<p>India</p>
<p><a href="index.php?left=150">left=150</a></p>
</div>

<div class="h30 bolor folor b1_555 alignCenter m-t5 m-r5 m-b5 p5"> brothers and sisters</div>  
</div>
<div id="right3column">
<div class="m5">
<p>kids of Korea</p>
<p>Seoul</p>
<p>Pusan</p>
<p>Daejeon</p>
<p><a href="index.php?right=150">right=150</a></p>
</div>
<div class="h30 bolor folor b1_555 alignCenter m-t5 m-l5 m-b5 p5"> kids</div>  
</div>

</body>
</html>

I like to make a border of the title line as a whole and the border of the left fixed width and the border of right fixed width each.
I modified the code above like the below for what I like to make.

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>layOut</title>
<style type="text/css">
* { margin:0; padding:0;}
.contentWrapper{
float: left;
width: 100%;
}
.bolor{
background-color:#ffff88;
}
.folor{
color:#000;
}
#center3liquid{
margin: 0 200px 0 200px; 
background-color:#777;
}
#centerFix3liquid{
margin: 0 220px 0 220px; 
background-color:#ff88cc;
}
#left3column{
float: left;
width: 200px; 
margin-left: -100%;
background: #bbb;
}
#leftFix3column{
float: left;
width: 220px; 
margin-left: -100%;
background: #88ffcc;
}
#right3column{
float: left;
width: 200px;
margin-left: -200px; 
background: #bbb;
}
#rightFix3column{
float: left;
width: 220px;
margin-left: -220px; 
background: #88ffff;
}
#screen { 
width:400px;
background-color:#bbb;
margin:auto;
padding:5px;
}
#title { 
background-color:#ffaaaa;
margin:auto;
padding:5px;
}
#left2liquid{
margin-right: 200px;
margin-top:15px;
}
#right2column{
float: left;
width: 200px;
margin-left: -200px; 
background: #ff88ff;
}
#sideBar {
 float: left;
 width: 230px; 
 margin-left: -230px; 
 background: #aaffff;
}
.wFull{width:100%}
.w10{width:10px}
.w200{width:200px}
.w300{width:300px}
.w400{width:400px}
.h5 {height:5px}
.h10 {height:10px}
.h30 {height:30px}
.h50 {height:50px}
.m5 {margin:5px;}
.m-t5 {margin-top:5px;}
.m-t10 {margin-top:10px;}
.m-l5 {margin-left:5px;}
.m-r5 {margin-right:5px;}
.m-b5 {margin-bottom:5px;}
.p2{padding:2px} 
.p3{padding:3px} 
.p-t5{padding-top:5px;}
.p-l5{padding-left:5px;}
.p-r5{padding-right:5px;}
.b1_555 { border:1px solid #555}
.alignLeft{text-align:left}
.alignCenter{text-align:center}
.alignRight{text-align:right}
.bColorWhite{background-color:#ffffff}
.marginAuto{margin:auto}
.clearBoth{clear:both}
.guest-login {
 float:left;
 width:180px;
 background: #bbb ;
 padding:0px 0px 3px 50px;
}
.guest-login p{margin:0}
.guest-login span, .guest-login strong {
 border:1px solid #555;
 background:#ffff88;
 padding:2px;
 overflow:hidden;
 display:block;
 text-align:center;
}
.guest-login span {
 float:left;
 margin:0 3px 0 0;
}

.top span {
 float:right;
 margin:0 0 0 3px;
}

.hr {
 clear:both;
 border:1px solid #555;
 background: #ffff88;
 padding:2px;
 margin:4px 0px;
}

.hr hr {
 position:absolute;
 left:-999em;
}
.guest-login div { clear:both }
</style>
</head>
<body>
<div class="contentWrapper">
<div id="left2liquid">
 <a href="">my domain</a>
</div></div>

<div id="sideBar">
<div class="guest-login" >
  <div class="top folor">
    <p><span>00</span><strong>Guest</strong> </p>
  </div>
  <div class="hr"><hr></div>
  <div>
    <p class="folor"><span>00</span> <strong>Login</strong></p>
  </div>
</div>
</div>

<form>
<div class="clearBoth h30 alignCenter p-t5 b1_555 bolor">
<a href="" class="w10 b1_555 p-l5 p-r5 bColorWhite">+</a>
<input type="text" class="w300">
<input type="submit" value="search">
</div>
</form>

<div class="clearBoth h30 m-t5 p-t5 b1_555 bolor">
   <div class="w400 alignCenter p2 b1_555 marginAuto bColorWhite"> (navigator)  sun > earth > asia (ancestors of Korea) </div>
</div>

<div class="h5 clearBoth"></div>
<div class="clearBoth h30 b1_555 bolor p-t5">
[COLOR="#FF0000"]<table class="wFull">
  <tr>
   <td class="w200 b1_555 alignCenter bColorWhite">left (fixed width)</td>
   <td class="alignCenter folor">title (Korea : a kid of Asia)</td>
   <td class="w200 b1_555 alignCenter bColorWhite">right (fixed width)</td>
  </tr>
</table>[/COLOR]
</div>

<div class="h5 clearBoth"></div>
<div class="contentWrapper">
  <div id="center3liquid">
        <div id="screen">
<p><a href="index.php?screen=200">screen=200</a></p>
        </div>  

<div class="h30 bolor folor b1_555 alignCenter m5 p5"> footer</div>  
  </div>
</div>

<div id="left3column">
<div class="m5">
<p>brothers and sisters of Korea</p>
<p>China</p>
<p>Japan</p>
<p>India</p>
<p><a href="index.php?left=300">left=300</a></p>
</div>
<div class="h30 bolor folor b1_555 alignCenter m-t5 m-r5 m-b5 p5"> brothers and sisters</div>  
</div>

<div id="right3column">
<div class="m5">
<p>kids of Korea</p>
<p>Seoul</p>
<p>Pusan</p>
<p>Daejeon</p>
<p><a href="index.php?right=150">right=150</a></p>
</div>
<div class="h30 bolor folor b1_555 alignCenter m-t5 m-l5 m-b5 p5"> kids</div>  
</div>

</body>
</html>

But the code above has a table.
How can I make it tabless with the result at http://dot.kr/x-test/tablessLayout03.php of the code above?

Hi,

I’m not sure if this is what you are going for:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
p { margin:0 0 1em; }
.wrap {
	border:1px solid #000;
	clear:both;
	overflow:hidden;
	text-align:center;
	min-width:500px;
}
.inner {
	background:red;
	border-right:221px solid green;
	border-left:200px solid green;
	padding:1px 0;
}
.left, .right {
	margin:0 0 0 -220px;
	position:relative;
	zoom:1.0;
	float:left;
	width:220px;
}
.right {
	margin:0 -220px 0 0;
	float:right
}
</style>
</head>

<body>
<div class="wrap">
		<div class="inner">
				<div class="left">left (fixed-width)</div>
				<div class="right">left (fixed-width)</div>
				<p>rest of content</p>
		</div>
</div>
</body>
</html>


Is this page just for testing?

If its a real page then you would seldom build one like that as you should start with some real content and then build with the content in mind. Forcing your content into a pre-defined layout is not the best idea as they both need to work together.