Forum Moderators: not2easy
Happy New Year to everyone! I'm having a problem with columns collapsing when I shrink my page. The center column falls to the bottom. I tried different margins and padding settings. I still can't get it right. Can someone please help? Thanks in advance.
Senmar
CSS
body {
background-color: #eda;
border-style: solid;
border-width: medium;
border-color: #0054A6;
font-family: quicktype, "times new roman", san serif;
margin: 0%;
}
#container {
width: 100%;
margin: auto;
background-color: #ffffec;
color: # 0054A6;
border: 3px solid #eda;
line-height: 130%;
}
#top {
padding: .3em 0 .3em .5em;
font-size: .85em;
font-weight: bold;
color: #ffffec;
background-color: #0054A6;
border-style: ridge;
border-width: medium;
border-color: #ffffff;
width: 98%;
height: 55px;
margin: 0px;
text-align: center;
}
h3 { text-align: center;
}
.initialcap { font-size: 2.5em;
font-family: forte;
}
.navlink {
background: white;
width: 100%;
height:35px;
}
.navlink td {
color: #333333;
border:1px solid #CDCDCD;
border-left-color: #E1E1E1;
border-left-style: none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.7em;
font-weight:bold;
line-height: 33px;
text-align: center;
text-decoration:none;
}
.navlink a {
text-decoration:none;
display:block;
}
.navlink a {
text-decoration:none;
display:block;
}
* html .navlink td a {width: 100%;
}
.navlink td a:hover {
color: #FFFFFF;
background-color: #ffffec;
line-height: 33px;
display:block ;
}
.navlink td a:visited {text-decoration:none
}
#leftnav {
float: left;
width: 19%;
padding: .1em;
background-color: #ffffec;
color: #0054A6;
margin-top: 2%;
font-size: .8em;
}
#rightnav {
float: right;
width: 18%;
margin: 0px;
padding: .1em;
background-color: #ffffec;
color: #0054A6;
margin-top: 2%;
border-top: medium solid #eda;
border-bottom: medium solid #eda;
font-size: .8em;
}
.bluedk {
background-color:#0054A6;
color:#fff;
padding: 0px;
margin: 0px;
text-align: center;
}
.bluelt {
background-color:#0054A6;
color:#fff;
padding: 0px;
margin: 0px;
text-align: center;
}
#content {
margin-left: 21%;
margin-right: 21%;
padding: .2em;
background-color: #ffffff;
color: #000080;
margin-top: 2%;
font-size: .82em;
border-style: solid;
border-width: medium;
border-color: #eda;
}
.button {
width: 130px;
height: 26px;
line-height: 26px;
border: 1px solid #000;
text-align: left;
font-size: 12px;
font-weight: bold;
font-family: verdana, arial, sans-serif;
}
.button a {
display: block;
width: 100%;
color: #000099;
background: #ffffec;
text-decoration: none;
border-style: double;
border-width: medium;
}
.button a:hover {
background: #0193fe;
}
#footer {
clear: both;
margin: 0px;
padding: .5px;
color: #0054A6;
background-color: #0054A6;
border-top: 3px solid #000080;
}
.pagenav {
text-decoration: none;
text-align: center;
font-size: 1em;
font-weight: bold;
}
HTML
<div id="container">
<div id="top">
<div class="head1"><p><span class="initialcap">C</span>OMMITTEES of
<span class="initialcap">C</span>ORRESPONDENCE for
<span class="initialcap">D</span>EMOCRACY and
<span class="initialcap">S</span>OCIALISM </p></div>
</div>
<div id="leftnav">
<div class="button">
<a href="/">HOME</a>
<a href="/">ABOUT</a>
<a href="/">JOIN</a>
<a href="/">DONATE</a>
<a href="/">CONTACT</a>
<a href="/">PUBLICATIONS</a>
<a href="/">MESSAGE BOARD</a>
<a href="/">EMAIL</a>
</div>
<div class="bluedk">
<p>OUR HISTORY</p>
</div>
<p> nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrudt.</p>
</div>
<div id="rightnav">
<div class="bluelt">
<p>DONATE</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing</p>
<div class="bluedk">
<p>CONTACT US</p>
</div>
<p> nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrudt.</p>
</div>
<div id="content">
<h3>ABOUT US</h3>
<p class="pagenav">
<a href="">Vision</a>¦
<a href="">Leadership</a>¦
<a href="">ByLaws</a>¦
<a href="">Advisory Board</a>¦
<a href="">Donate</a>
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. .</p>
</div>
<div id="footer">
<p>
</p>
</div>
</div>
</body>
</html>
try using abo#*$!e positoning
