Welcome to WebmasterWorld Guest from 107.22.87.205

Forum Moderators: not2easy

Message Too Old, No Replies

Help with "Margins and Padding"

Columns collapse when I shrink page (3 col. layout)

     
4:47 pm on Jan 6, 2005 (gmt 0)

10+ Year Member



Hi All,

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>

10:35 pm on Jan 6, 2005 (gmt 0)

10+ Year Member



its the nature of float left

try using abo#*$!e positoning

 

Featured Threads

Hot Threads This Week

Hot Threads This Month