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?