2016-05-17 6 views
0

だから私は周りを回って、3列のレイアウトを作成しようとしています。私はフッターを下の2つのdivsのサイドバーの間に移動させるのに問題があります。基本的に私の中間の欄は私のサイドバーのように完全には下がらないので、私の中央の欄は切り取られているので、その下にフッターを置くことができ、それは私のサイドバーと並んでいます。余白は、私ができることを知っているものですが、もっと良い方法があると信じているので、それをしたくありません。2つのdivの間にフッターを配置するにはどうすればよいですか?

What I have so far

ここでは、これまで私が持っているものだ

<!DOCTYPE html> 
<html> 
<head> 
    <title>First</title> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 
    <header></header> 

    <div id="first-column"></div> 

    <div id="middle-column"></div> 

    <div id="third-column"></div> 

    <footer></footer> 

</body> 
</html> 

CSS

html, body { 
    height: 100%; 
    margin: 0; 
} 

header { 
    background-color: #444444; 
    width: 100%; 
    height: 20%; 
} 

#first-column { 
    width: 15%; 
    height: 80%; 
    background-color: #d8d8d8; 
    float: left; 
} 

#middle-column { 
    width: 70%; 
    height: 70%; 
    float: left; 
    background-color: red; 
} 

#third-column { 
    width: 15%; 
    height: 80%; 
    background-color: #d8d8d8; 
    float: left; 
} 

footer { 
    background-color: #222222; 
    height: 10%; 
    width: 70%; 
    position: absolute; 
    bottom: 0; 
    margin-left: 100px; 
} 

答えて

1

これを解決するには、いくつかの方法があります。このレイアウトを作成するためにできる最も基本的な変更は、

あなたの左の列のwidth15%に設定されています。フッターのmargin-left100pxから15%に変更すると、それらはすべて並んで表示されます。

https://jsfiddle.net/7ufL979v/

+0

ありがとうございました。 – Dominic

1

あなたが言及としてmargin-leftを使用したくない場合は、代わりに右に3番目の列をフロートすることができますし、あなたの場合も、(他のボックスのようなあなたのフッターをフロートすることができますposition: absoluteおよびmargin-leftを削除してください)。

#third-column { 
    width: 15%; 
    height: 80%; 
    background-color: #d8d8d8; 
    float: right; 
} 

footer { 
    background-color: #222222; 
    height: 10%; 
    width: 70%; 
    bottom: 0; 
    float: left; 
} 

浮動ボックスは左と右のとは違ってあなたはまた、これを解決するために、より近代的な方法であり、実際のレイアウトを生成するために構築された、using flexboxに見てみたいことがあります。

0

あなたは、真ん中の列の一番下に置くだけです。

関連する問題