CSS 3 Col Page Design
i designing site template , want have 3 colums body content. have floated first col left, floated second right , left third centre col without positioning. centre col left under left col when testing.
please can advice best way achieve desired result?
template code:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- templatebegineditable name="doctitle" -->
<title>untitled document</title>
<!-- templateendeditable -->
<!-- templatebegineditable name="head" -->
<link href="includes/css/layout.css" rel="stylesheet" type="text/css" />
<link href="includes/css/style.css" rel="stylesheet" type="text/css" />
<!-- templateendeditable -->
</head>
<body>
<div id="top">
<div id="bnheader">
<div id="bnlogo"><a href="http://www.bluespotnetwork.com"><img src="../office/billing/images/logo.gif" alt="" border="0"/></a></div>
</div>
<div id="bncontentwrapper">
<div id="top_menu">
<ul>
<li><a href="#" class="home">home </a></li>
<li><a href="#" class="domain">domain </a></li>
<li><a href="#" class="hosting">hosting </a></li>
<li><a href="#" class="design">design & print</a></li>
<li><a href="#" class="downloads">downloads </a></li>
<li><a href="#" class="support">support </a></li>
<li><a href="#" class="contact">contact </a></li>
<li><a href="#" class="support">support </a></li>
<li><a href="#" class="legal">legal </a></li>
</ul>
</div>
<p></p>
<div id="bncolleft"></div>
<div id="bncolright"></div>
<div id="bncolcentre"></div>
</div>
</div>
</body>
</html>
css layout code:
@charset "utf-8";
/* css document */
#top{
position:absolute;
top:0px;
left:0px;
width:100%;
height:295px;
}
#bnheader {
position:relative;
width:950px;
height:295px;
margin-left:auto;
margin-right:auto;
}
#bnlogo {
position:relative;
float:left;
width:249px;
height:294px;
}
#bncontentwrapper {
position:relative;
top:35px;
width:950px;
min-height:500px;
margin-left:auto;
margin-right:auto;
}
#top_container{
background-color:#00162c;
border-bottom:3px solid #036;
color:#fff;
height:295px;
margin:0;
padding:0;
text-align:center;
}
#top_menu{
height:30px;
line-height:30px;
margin:0;
padding:0;
text-align:left;
}
#top_menu ul{
list-style:none;
margin:0;
padding:0;
}
#top_menu ul li{
float:left;
margin:0;
padding:0;
}
#top_menu ul li a,#top_menu ul li a:visited{
display:block;
height:30px;
line-height:30px;
padding:0;
text-align:center;
width:105px;
}
#top_menu ul li a.down,#top_menu ul li a.down:visited,#top_menu ul li a.down:hover{
border-right:1px solid #ebebeb;
color:#333;
font-weight:700;
width:99px;
}
#bncolleft {
float:left;
width:33%;
min-height:300px;
background-color:#099;
}
#bncolright {
float:right;
width:33%;
min-height:300px;
background-color:#609;
}
#bncolcentre {
left:33%;
width:33%;
min-height:300px;
background-color:#6f6;
}
/*#content:after {
content:' ';
clear:both;
display:block;
height:0;
overflow:hidden
}
*/
css style code:
@charset "utf-8";
/* css document */
#top{
background-color:#001429;
}
body{
background-color:#31659c;
}
#top{
border-bottom-width: medium;
border-bottom-style: solid;
border-bottom-color: #036;
}
#bnheader {
background-color:#001429;
}
#bncontentwrapper {
background-color:#fff;
border: thin solid #31659c;
}
#top_container{
text-decoration: none;
}
#top_menu{
background-color: #f5f5f5;
background-image: url(../../../office/billing/templates/bluespot/images/top_menu_bg.gif);
background-repeat: repeat-x;
}
#top_menu ul{
text-decoration: none;
}
#top_menu ul li{
text-decoration: none;
}
#top_menu ul li a,#top_menu ul li a:visited{
color:#666;
text-decoration: none;
}
#top_menu ul li a.down,#top_menu ul li a.down:visited,#top_menu ul li a.down:hover{
background-color:#fff;
border-right:1px solid #ebebeb;
color:#333;
font-weight:700;
text-decoration: none;
}
#top_menu ul li a:hover{
background-color:#369;
color:#fff;
text-decoration: none;
}
you should not have give "column 3" width, as:
#bncolcentre {
left:33%;
width:33%;
min-height:300px;
background-color:#6f6;
}
you can leave out left: 33%; , width: 33%;, because content flow between 2 outlying floated divs.
beth
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment