homepage Welcome to WebmasterWorld Guest from 107.21.135.68
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Help with "Margins and Padding"
Columns collapse when I shrink page (3 col. layout)
Senmar50




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

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>

 

the_nexus




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

its the nature of float left

try using abo#*$!e positoning

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved