2011-09-19 7 views
0

の底に行かないちょっとそこ私は現在、以下のウェブサイト(スクリーンショット)を持っている:右カラムは、本体

http://postimage.org/image/25ahko3b8/

私は望んでいますどのようなすべての方法を伸ばして私の右列にあります(たとえそれを押し下げるための十分なコンテンツがない場合でも)。

どのように私のCSSでこれを達成できますか?

HTMLコード:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 

<head> 
    <link rel="stylesheet" type="text/css" href="swaggersstyle.css"> 
     <title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title> 


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<!-- include Cycle plugin --> 
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('.slideshow').cycle({ 
     fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... 
    }); 
}); 
</script> 
</head> 


<body> 
    <img src="final.jpg" id="banner"> 
    <ul id="nav"> 
     <li class="links"><a href="index.html">Home</a></li> 
     <li class="links"><a href="planning.html">Location</a></li> 
     <li class="links"><a href="construction.html">Facilities</a></li> 
     <li class="links"><a href="evaluation.html">Attractions</a></li> 
     <li id = "endlink"><a href="evaluation.html" id="lastlink">Bookings</a></li> 
    </ul> 


<div id="mainc"> 

    <p>Make Yourself at Home</p> 
    <p>Swaggers Backpackers is a converted old house located within  walking distance of all the best parts of Oamaru. Explore the old victorian era buildings and shops of the city centre, or see the penguin colonies down the street. Swaggers is owned and operated by camp mum Agra, who makes all guests feel welcome, informed, and perhaps a bit mothered. </p> 

    <div class="slideshow"> 
     <img src="1.jpg" width="600" height="450" /> 
     <img src="2.jpg" width="600" height="450" /> 
     <img src="3.jpg" width="600" height="450" /> 
    </div> 


</div> 

<div id="rightcolumn"> 
<p>hghadgadgadg</p> 
<p>easfasf</p> 
<p>safSFS</p> 
<p>afafafadf</p> 
<p>safasf</p> 
<p>saasfasf</p> 
<p>fasfsaf</p> 
</div> 

<div id ="footer"> 
<p> fsafasfasf </p> 
</div> 

</body> 
</html> 

CSS:

html{ 
    font-family: sans-serif; 
    background-color:#464E54; 
} 

body{ 
    width: 960px; 
    margin: auto; 
    background-color: white; 
    border: 5px solid black; 
    padding: 0; 
} 

#banner{ 
    padding: 0px; 
    margin: 0; 
    display: block; 
} 

#nav { 
    list-style-type: none; 
    padding: 0px; 
    margin: 0px; 
    overflow: hidden; 
    border-bottom: 1px solid #7f7f7f; 
    border-top: 1px solid #7f7f7f; 

} 

#mainc { 
    float: left; 
    width: 654px; 
    background-color: white; 
    margin: 0; 
    padding-left: 8px; 
    padding-right: 4px; 
} 

#rightcolumn { 
    padding-left: 3px; 
    float: left; 
    background-color: #dad8bf; 
    width: 290px; 
    border-left: 1px solid #7f7f7f; 
} 

#footer { 
    clear: both; 
    position: relative; 
    bottom: 0.5px; 
    margin: 0; 
    background-color: #dad8bf; 
    border-top: 1px solid #7f7f7f; 
} 

#footer p{ 
    margin: 0; 
} 

.links { 
    float: left; 
    margin: 0px; 
    border-right: 1px solid #7f7f7f; 
} 

#endlink { 
    float: left; 
    margin: 0px; 
    border-right: none; 
} 

#lastlink{ 
    display: block; 
    width: 184px; 
    font-weight: bold; 
    color: #444444; 
    background-color: #dad8bf; 
    text-align: center; 
    padding: 4px; 
    text-decoration: none; 
    text-transform: uppercase; 
    margin-top: 0px; 
} 

a:link { 

    display: block; 
    width: 183px; 
    font-weight: bold; 
    color: #444444; 
    background-color: #dad8bf; 
    text-align: center; 
    padding: 4px; 
    text-decoration: none; 
    text-transform: uppercase; 
    margin-top: 0px; 
} 

a:visited { 

    display: block; 
    width: 183px; 
    font-weight: bold; 
    color: #444444; 
    background-color: #dad8bf; 
    text-align: center; 
    padding: 4px; 
    text-decoration: none; 
    text-transform: uppercase; 
    margin-top: 0px; 
} 

a:hover { 
    background-color: #999999; 
} 

a:active{ 
    background-color: #999999; 
} 

.slideshow { 
    height: 483px; 
    width: 632px; 
    margin: auto; 
} 

.slideshow img { 
    padding: 0px; 
    border: 1px solid #ccc; 
    background-color: #eee; 
} 

みんなありがとう! :)

+0

可能であれば、指定された高さを設定せずにこれを実行できるようにしたい。乾杯:) – AndyNZ

答えて

0

これを行うには、mainc divに代わりにrightcolumn背景色を適用します。左の列の内容をdiv内にラップし、白い背景を付けます。これにより、右の列が左の列まで伸びることができます。

デモ:http://jsfiddle.net/4Q96Z/

HTML

<div id="mainc"> 

    <div id="leftcolumn"> 
     <p>Make Yourself at Home</p> 
     <p>Swaggers Backpackers is a converted old house located...</p> 
     <div class="slideshow"> ... </div> 
    </div> 

    <div id="rightcolumn"> 
     <p>hghadgadgadg</p> 
     <p>hghadgadgadg</p> 
    </div> 

</div> 
0

それはあなたが実際のページではなく、画像を追加することができれば素晴らしいことが、ちょうどこれを行うだろう:すべての

まず、あなたが必要両方の列のコンテナdivをコンテナに指定すると、CSSは次のようになります。

#container{width:YOUR_WIDTH; height:auto; overflow: hidden;} 

次に、列を設定する必要があります。あなたは、メインカラムは、サイドバーよりも常に長くなります知っている場合は、それ以外の場合は、両方の列に、このCSSを適用し、何もする必要はありません。

#rightcolumn { 
padding-left: 3px; 
float: left; padding-bottom:50000px; margin-bottom:-50000px; 
background-color: #dad8bf; 
width: 290px; 
border-left: 1px solid #7f7f7f;} 

これは私が数年前に発明となった技術でありますかなり知られています。秘密は、同じパディングと負のマージン値を追加することです。あなたのコンテナにオーバーフローがあるので、カラムは使用可能な最大高さに調整されます(長い列でコンテナボックスの限界を「押す」ことによって決定されます)。それ以外は隠されます。