June 28th, 2004, 04:15 PM
|
|
PHP/PERL/.NET Coder
|
|
Join Date: May 2001
Location: Daytona Beach, Florida
Posts: 36
Time spent in forums: 41 sec
Reputation Power: 8
|
|
|
3 column madness
I am having a problem with the 3 columns in the code below. the left and center columns div's are next to each other where they are supposed to be, but the center content always sits below the left columns content. You can see from the colored borders I put in to try to figure out the problem. Any ideas? thank you
Code:
<HTML>
<HEAD>
<title>
Example
</title>
<style>
#addNewModule {
padding-top: 10px;
padding-left: 5px;
padding-bottom: 10px;
}
#addNewModule a
{
border: 1px solid #000;
background-color: #1C4F9B;
padding: 5px;
}
#bodyWrapper {
border: 1px solid #FFF;
background-color: #559CEC;
width: 100%;
}
#header {
background: #EEE;
}
#header h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #000;
padding-left: 15px;
padding-top: 20px;
width: 100%;
}
#header #headerLeftColumn {
float: left;
width: 700px;
}
#header #loginControl {
float: right;
width: 200px;
}
/* begin content selectors */
#container {
float: left;
width: 100%;
margin-right: -200px;
border: 1px solid red;
}
#content
{
border: 1px solid yellow;
margin-right: 200px;
}
#left
{
float: left;
width: 150px;
border: 1px solid #FFF;
}
#middle {
margin-left: 200px;
/*padding-top: 0px;*/
/*padding-left: 5px;*/
border: 1px solid orange;
}
#sidebar {
float: right;
width: 150px;
border: 1px solid #000;
}
#footer {
background: #999;
border: 1px solid #cecea5;
clear: both;
}
/* custom selectors */
#module {
position:relative;
width: 100%;
padding: 2px;
background: #FFF;
border: 1px solid #000000;
font-size: 10px;
/*margin-bottom: -10px;*/
}
#title {
background-color: #C2DBF5;
padding: 3px;
border: 1px solid #144678;
text-align: left;
color: Black;
font-weight: bold;
font-size: 14px;
}
#moduleItem {
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
#moduleItem h1 {
font-weight: bold;
font-size: 12px;
margin-bottom: 0px;
}
#moduleItem p {
margin-top: 0px;
margin-bottom: 10px;
}
#module #footer {
background-color: #C2DBF5;
border: 1px solid #144678;
padding: 4px;
text-align: left;
color: black;
font-weight: normal;
font-size: 10px;
}
.clearing {
height: 0;
clear: both;
}
.last {
margin-bottom: 0;
}
/* type selectors */
body {
color: #000000;
background-color: #E8E8E8;
font-family: Verdana, sans-serif;
font-size: smaller;
margin: 10px 10px 0px 10px;
/*text-align: center;*/
}
</style>
</HEAD>
<BODY>
<div id="bodyWrapper">
<DIV id="container">
<DIV id="content">
<DIV id="left">
<div id="module">
<div id="moduleItem"> Left Column </div>
</div></DIV>
<DIV id="middle">
<div id="module">
<div id="moduleItem"> Text Here </div>
</div></DIV>
</DIV>
</DIV>
<DIV id="sidebar">Right Column </DIV>
<div class="clearing"> </div>
</div> <!--bodyWrapper-->
</BODY>
</HTML>
__________________
"Mankind cannot define memory, yet it defines mankind"
|
Dev Shed Forums Sponsor:
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
