私は流動的なレイアウト デザインと 3 つの列を持つ Web サイトに取り組んでいます。3 つの列は左にフロートされ、それぞれの周囲に 1 ピクセルの境界線があります。ページのサイズを変更すると、列の周囲の境界線を除いてすべてが調整されます。テキストが境界の外側にはみ出します。これを防ぐ方法はありますか？
<head>
<title>Liquid Layout</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<style type="text/css">
* {
margin: 0px 0px;
padding: 0px 0px;
}
/* MAIN WRAPPER */
#wrapper {
width: 90%;
margin-right: auto;
margin-left: auto;
}
@font-face {
font-family: 'Andika';
src: url('AndBasR-webfont.eot');
src: url('AndBasR-webfont.eot?#iefix') format('embedded-opentype'),
url('AndBasR-webfont.woff') format('woff'),
url('AndBasR-webfont.ttf') format('truetype'),
url('AndBasR-webfont.svg#AndikaBasicRegular') format('svg');
font-weight: normal;
font-style: normal;
}
/* BODY */
body {
background-image: url(gold.jpg);
background-repeat: repeat;
}
/* HEADER */
#header {
background-color: #A60000;
}
#header img {
float: left;
}
#title {
float: left;
width: 60.95%;
height: 240px;
font-family: Copperplate Gothic Light, sans-serif;
background-color: #A60000;
color: #FFFFFF;
font-weight: bold;
text-transform: uppercase;
text-align: center;
font-size: 4em;
letter-spacing: 3px;
line-height: 75px;
padding: .5em 0em 0em 0em;
}
.slogan {
height: 50px;
font-family: Copperplate Gothic Light, sans-serif;
background-color: #A60000;
color: #EBC137;
font-size: .25em;
text-align: center;
letter-spacing: 3px;
}
hr.break {
//padding: .1em 0em 0em 0em;
}
/* NAVIGATION */
#nav {
float: left;
width: 60.95%;
height: 56px;
padding: 0em 0em;
background-color: #A60000;
overflow: hidden;
}
#nav ul {
padding: 0em 0em;
list-style-type: none;
margin-left: 3.4em;
}
#nav li {
text-align: center;
float: left;
//width: 170px;
}
#nav a {
color: #FFFFFF;
display: block;
text-decoration: none;
letter-spacing: 4px;
line-height: 50px;
font-size: 1.5em;
text-transform: uppercase;
font-family: Copperplate Gothic Light, sans-serif;
padding: 0px 50px 0px 0px;
}
#nav a:hover {
color: #3CA0D0;
}
#main {
float: left;
width: 100%;
background-color: #3CA0D0;
}
/* PLAYER OF THE WEEK */
#featured {
clear: both;
float: left;
margin-top: 1em;
margin-right: 1em;
margin-bottom: .5em;
margin-left: 1.5em;
border: 3px solid #A60000;
width: 27%;
//height: 605px;
}
#featured img {
float: left;
padding: .5em .5em .5em .5em;
}
#featured ul {
list-style: none;
padding: .5em .5em 0em 0em;
}
#featured li {
font-family: Georgia, Serif;
letter-spacing: .05em;
line-height: 1.5em;
color: #000044;
}
#featured_main {
clear: both;
padding: 0em .5em .5em .5em;
text-align: justify;
font-family: Georgia, Serif;
letter-spacing: .05em;
line-height: 1.3em;
color: #000044;
}
/* LATEST NEWS */
#news {
float: left;
margin-top: 1em;
margin-right: 1em;
margin-bottom: .5em;
border: 3px solid #A60000;
width: 27%;
//height: 605px;
}
h1.videos {
padding: .5em .5em 0em .5em;
font-size: 1em;
font-family: Tahoma, Geneva, sans-serif;
letter-spacing: 1px;
color: #000044;
}
p.morgan, p.pia, p.gold {
padding: .5em .5em 0em .5em;
overflow: hidden;
font-family: Andika;
letter-spacing: .05em;
line-height: 1.3em;
color: #000044;
text-align: justify;
}
a:link {
font-size: 1em;
color: #000044;
}
a:visited {
color: #000044;
}
/* MULTIMEDIA VIDEOS */
#videos {
float: left;
margin-top: 1em;
margin-right: 1em;
margin-bottom: .5em;
border: 3px solid #A60000;
width: 38%;
//height: 605px;
}
#videos_inner {
text-align: center;
}
p.title {
padding: .5em 0em 1em 0em;
font-family: Tahoma, Geneva, sans-serif;
font-size: 1.2em;
font-weight: bold;
letter-spacing: 2px;
}
/* FOOTER */
#footer {
clear: both;
background-color: #A60000;
}
#footer_inner {
text-align: center;
padding: .3em;
color: #FFFFFF;
font-family: Copperplate / Copperplate Gothic Light, sans-serif;
font-size: 15px;
}
#footer a:link {
font-family: Copperplate / Copperplate Gothic Light, sans-serif;
color: #FFFFFF;
font-size: 15px;
}
#footer a:hover {
color: #FFFFFF;
font-size: 18px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="celebrate4.jpg" alt="US Women's National Team" />
</div> <!--end div header -->
<div id="title">
U.S. Women's
National Team
<p class="slogan">Greatness Has Been Found</p>
</div> <!--end div title-->
<hr class="break">
<div id="nav">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="http://www.ussoccer.com/Teams/US-Women/Rosters/120527-Olympic-Roster.aspx">Roster</a></li>
<li><a href="http://www.ussoccer.com/Teams/US-Women/Schedule-Results/2012.aspx">Schedule</a></li>
<li><a href="http://www.ussoccerstore.com/">Store</a></li>
</ul>
</div> <!--end div nav -->
</div> <!--end div wrapper -->
<div id="wrapper">
<div id="main">
<div id="featured">
<img src="abby.png" alt="Abby Wambach, Forward" />
<ul>
<li><b>Name:</b> Abby Wambach </li>
<li><b>DOB:</b> June 2, 1980 </li>
<li><b>Position:</b> Forward </li>
<li><b>Appearances:</b> 191 </li>
<li><b>Goals:</b> 146 </li>
<li><b>Hometown:</b> Rochester, NY </li>
</ul>
<div id="featured_main">
<p> One of the world's best players in the air, Wambach is the second all-time leading scorer in international soccer history behind only Mia Hamm (158). Wambach surpassed former U.S. WNT teammate Kristine Lilly (130) earlier in 2012 to move into second place. She has 141 goals through the group stage of the 2012 London Olympics. Wambach is a five-time U.S. Soccer Female Athlete of the Year, most recently recognized for her 2011 campaign that included eight goals and four assists. Her ability to wear down defenses with her physical play, aerial game and hard running has long been a key to the USA's success. Has developed into one of the most dangerous goal scorers in the world since debuting for the USA in 2001. Has the best goals per game ratio in U.S. history, having scored 125 goals in her 166 games through the end of 2011. Of her 125 goals, 51 have come with her head.</p>
</div> <!--end div featured_main -->
</div> <!--end div featured -->
<div id="news">
<div id="new_inner">
<h1 class="videos"><a href="http://www.womenssoccerunited.com/profiles/blogs/alex-morgan-wins-sportswoman-of-the-year-award">Alex Morgan Named Team Sports Woman of the Year</a></h1>
<p class="gold">USWNT forward Alex Morgan was awarded the Sportswoman of the Year Award (Team Sport) last night at the 33rd Salute to Women in Sports Gala in New York. The prestigious award was given to Alex Morgan for her exceptional performances in a team sport over a 12 month span...</p>
<h1 class="videos"><a href="http://www.ussoccer.com/News/Womens-National-Team/2012/08/Pia-Sundhage-to-Return-Home-to-Pursue-Opportunities-in-Sweden.aspx">Head Coach Pia Sundhage Resigns</a></h1>
<p class="pia">U.S. Women's National Team head coach Pia Sundhage has decided to return home to pursue opportunities in Sweden. "After the Olympics we had discussions and early in the process it became clear that Pia was very interested in returning home to Sweden," said U.S. Soccer President Sunil Gulati. "It certainly wasn't an easy decision for U.S. Soccer or Pia. She deserves a tremendous amount of credit for the amazing success with the U.S. Women's National Team...</p>
<h1 class="videos"><a href="http://www.ussoccer.com/News/Womens-National-Team/2012/08/US-WNT-vs-Japan-Gold-Medal-Match.aspx">U.S. Women Win Fourth Olympic Gold</a></h1>
</div> <!--end div news_inner -->
<p class="gold">The U.S. Women's National Team captured the gold medal at the 2012 London Olympics with a 2-1 victory against Japan. U.S. midfielder Carli Lloyd, the gold medal hero of the 2008 Olympics, led the way once again with both goals for the United States as they upended 2011 FIFA Women's World Cup champion Japan and captured their third-consecutive Olympic championship...</p>
</div> <!--end div news -->
<div id="videos">
<div id="videos_inner">
<p class="title">Multimedia Highlights</p>
<iframe width="450" height="253" src="http://www.youtube.com/embed/Nd3udbFc5tw" frameborder="0" allowfullscreen></iframe> <br /> <br />
<iframe width="450" height="253" src="http://www.youtube.com/embed/7a4rNNXOOjY" frameborder="0" allowfullscreen></iframe>
</div> <!--end div videos_inner -->
</div> <!--end div videos -->
</div>
</div> <!--end div wrapper -->
<div id="wrapper">
<div id="footer">
<div id="footer_inner">
For more information about the U.S. Women's National Team, contact <a href="mailto:mkm49@pitt.edu">Michelle McCullough</a>.
</div><!--end div footer_inner-->
</div><!--end div footer-->
</div> <!--end wrapper div -->
</body>