HTML/CSSでスタイルを整えたい。

まず、左右に2等分(①②)。
その後、#footerの上下中央に③を配置したいです。

現在のコードは下記なんですが、
現在のコード
めちゃくちゃになってしまって＞＜、

完成形はこれです。
demo

【不明点】
・①の背景が赤くならない。
・①と②が左右2等分になってくれない。
・③のfooter-middle-oneとfooter-middle-twoが横並びになってくれない。

ボロボロで大変申し分けないのですが、ぜひ宜しくお願いいたします。

行動規範の内容に同意します

回答2件

もう少し、簡単なコードで実装できたので！
説明は下に書いてあります！！
（htmlのコードを貼ったのでローカルで保存するとそのまま確認できます！）

.footerというクラスのwidthとheightを変えると全体も勝手に変わるようになってます！

何か質問等あればどうぞ！！

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <title>ajax</title>
6  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
7  <style>
8    *{
9      box-sizing:border-box;
10      -webkit-box-sizing:border-box;
11    }
12    /* ■まず、フッター全体を黄色に */
13    .footer{
14      width: 1200px; /* widthとheightは自由に変えても大丈夫 */
15      height: 800px;
16      margin: 0 auto;
17      background-color:yellow;
18      padding: 0px 40px;
19    }
20
21    .footer__inner{
22      width: 100%;
23      height: 100%;
24      background: pink;
25      padding: 20px;
26    }
27
28    .footer__infos{
29      width: 100%;
30      height: 100%;
31      position: relative;
32      overflow: hidden;
33    }
34
35    .footer__info{
36      float: left;
37      width: 50%;
38      height: 100%;
39    }
40
41    .footer__info--left{background: red;}
42    .footer__info--right{background: blue;}
43    .footer__info--center{
44      width: 50%;
45      height: 90%;
46      background: #fff;
47      position: absolute;
48      top: 50%;
49      left: 50%;
50      transform:translate(-50%, -50%);
51      -webkit-transform:translate(-50%, -50%);
52    }
53
54  </style>
55</head>
56<body>
57  <footer class="footer">
58    <div class="footer__inner">
59      <div class="footer__infos">
60        <div class="footer__info footer__info--left"></div>
61        <div class="footer__info footer__info--right"></div>
62        <div class="footer__info--center"></div>
63      </div>
64    </div>
65  </footer>
66</body>
67</html>

投稿2015/12/23 01:39

編集2015/12/24 04:09

MasakazuFukami

総合スコア1869

b1ackc0ffee

2015/12/24 04:07

ありがとうございます！コードをどうやって取得するかわからなかったのですが、教えていただけますでしょうか？

MasakazuFukami

2015/12/24 04:10

すいませんうまく貼れていなかったようです！上記解答を更新しました！どうぞ！

行動規範の内容に同意します

html
1<footer>
2	<div id="footer">
3		<div id="footer-contents">
4		
5			<!-- 左① -->
6			<ul id="footer-left">
7				<li id="footer-left-one"></li>
8				<li id="footer-left-two"></li>
9				<li id="footer-left-three"></li>
10			</ul>
11			
12			<!-- 右② -->
13			<div id="footer-right">右側アイコン</div>
14			
15			<!--  中央③ -->
16			<div id="footer-middle">
17				<div id="footer-middle-one">PRODUCED BY</div>
18				<div id="footer-middle-two"><span id="loginStatus">ログイン中：<span id="usrId">GUEST</span>様</span></div>
19				<br style="clear: both">
20			</div>
21			
22		</div>
23	</div>
24</footer>

css
1#footer-contents{
2  padding: 10px;
3  background-color:pink;
4  position: relative;
5  max-width: 2000px;
6  width:1500px;
7  margin: 0 auto;
8  height: 55px;
9}
10#footer-left{
11  float:left;
12  width:50%; 
13  height:55px;
14  margin: auto;
15  padding: 0px;
16  background-color:red; /*なんで赤くならないの？ */
17}
18#footer-middle{
19  position: absolute;
20  top: 20px;
21  left: calc( ( 100% - 500px ) / 2 );
22  margin: auto;
23  width:500px;
24  height: calc( 100% - 40px );
25  background-color:white;
26}
27#footer-middle-one {
28  float:left;
29  text-align: left;
30  width: 174px;
31}
32#footer-middle-two{
33  float:left;
34  text-align: left;
35}
36#footer-right{
37  float:right;
38  margin: auto;
39  width: 50%;
40  height: 55px;
41  background-color:aqua;
42  text-align: right;
43}

cssは全部のっけるながーくなりそうだったので
直したとこをあげます（たぶん・・・
１．CSSのコメントアウトが//ではない
２．footer-right がwidth 100%だった
３．middle-one の height 0px
簡単に br style clear both にしてます（clearfix）
たしかこんな感じだったはず

投稿2015/12/22 15:16

編集2015/12/22 15:28