fluid layout, right div overlapping center div on smaller screens
hi im doin 3 column layout 100% width when view on smaller screens right div's content on lappes center divs content
here code below.
<!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" />
<title>ntcg brixton community church lambert road</title>
<style type="text/css">
#container {
margin:0 auto;
background-color: #fff;
width: 100%;
}
body {
width:100%;
height:100%;
background-color:#000;
margin:0;
color: #333;
}
#header,#navigation {
overflow: hidden;
}
#header
{
padding: 20px;
background-color: #2b0d0d;
}
#header h1 {
margin: 0;
color: #fff;
}
#navigation
{
float: left;
width: 100%;
background-repeat: repeat-x;
background-color: #900;
margin-top: 4px;
padding-left: 20px;
margin-bottom: 4px;
}
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navigation li a:hover {
background-repeat: repeat-x;
background-color: #003;
}
#content-container1
{
float: left;
width: 100%;
background: #fffd66;
}
#content-container2
{
float: left;
width: 100%;
background:#d66;
}
#section-navigation
{
float: left;
width: 25%;
display: inline;
margin-top: 0;
margin-right: 2%;
margin-bottom: 0;
margin-left: 2%;
padding-top: 20px;
padding-right: 0;
padding-bottom: 20px;
padding-left: 0;
overflow: hidden;
}
#content
{
float: left;
width: 40%;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 2%;
padding-top: 20px;
padding-right: 0;
padding-bottom: 20px;
padding-left: 0;
}
#content h2 { margin: 0; }
#aside
{
float: right;
width: 22%;
display: inline;
margin-top: 0;
margin-right: 2%;
margin-bottom: 0;
margin-left: 1%;
padding-top: 20px;
padding-right: 0;
padding-bottom: 20px;
padding-left: 0;
overflow: hidden;
}
#aside h3 { margin: 0; }
#footer
{
clear: both;
text-align: center;
padding: 20px;
height: 1%;
color: #999;
background-color: #000;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>ntcg brixton community church </h1>
</div>
<div id="navigation">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">mens dpt</a></li>
<li><a href="#">womens dept</a></li>
<li><a href="#">youth dept</a></li>
<li><a href="#">evangelism dept</a></li>
<li><a href="#">senior citizens club</a></li>
<li><a href="#">heads of department</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">announcements</a></li>
</ul>
</div>
<div id="content-container1">
<div id="content-container2">
<div id="section-navigation">
</div>
<div id="content">
<h2>
page heading
</h2>
</div>
<div id="aside">
<h3>
aside heading
</h3>
</div>
<div id="footer">
copyright © 2013 ntcg brixton community church
| lambert road | newtestament church of god | england , wales | reg. charity no. 250306</div>
</div>
</div>
</div>
</body>
</html>
yup. that's happens % based or liquid layouts. eventually, gets ugly on ultra wide & ultra narrow displays.
the bad: (liquid)
http://alt-web.com/templates/3-col-liq-layout.shtml
the beautiful: (semi-liquid)
http://alt-web.com/templates/3-col-semi-liq-layout.shtml
nancy o.
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment