divの下にdivを配置しdivの下にフッタを配置

Question

こんにちは私は2つの問題があります...私の写真を見ると「カートに入れる」と言う送信ボタンが写真の下にあり、灰色のフッターが私の名前はページの一番下にあるはずです。私はこれを行う方法を理解しようと1時間を費やしましたが、私は方法が分かりません。 私はクラスの画像を保存するphp関数を使用しています。 bookdetailsとsubmitボタンのIDは.cart .... footerはちょうどフッタです。私はこれをする必要があります...私のページの様子はここにあります

私はここにいますピクチャを表示するためのコード

ここで

for($row = 0; $row < sizeof($array);$row++){ 
    echo '<div class="book-details"><img src="images/'.$array[$row]['isbn'].'.jpg" alt="'.$array[$row]['title'].'" >'.'<br/>'.$array[$row]['title'].'<br/>by '.$array[$row]['author'].'<br/><input type="radio" name="orders['.$array[$row]['title'].']" value="hardcover" >Hardcover: $'.$array[$row]['hardcover'].'<br/><input type="radio" name="orders['.$array[$row]['title'].']" value="softcover" >Softcover: $'.$array[$row]['softcover'].'<br/><input type="radio" name="orders['.$array[$row]['title'].']" value="e-book" >E-Book: $'.$array[$row]['e-book']."</div>"; 
}; 
echo '<div class = "cart"><input type="submit" value="Add Selected Items to  Cart"></div>'; 
echo '</form>'; 

は私のCSSは

.book-details { 
    width:auto; 
    height: auto; 
    display: inline-block; 
    float: left; 


} 
.cart{ 

    width:auto; 
    height: auto; 
    display: block; 
    float: right; 

} 

ですあなたは私が写真を下記の追加選択した項目とその下にフッターを置くことができますか？ありがとう

Answer 1

ブック詳細表示をブロックに変更してみてください。

とフッターのため、この試してみてください。

.footer { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height:100px; 
}