Блочная верстка [Помогите!]

zwar · October 2, 2012

Привет всем! Я уже заморочился... Такая простая задача, а решить никак не могу. Сижу уже третий час над этой фигней... Придумал "левый" способ как это сделать, но не хочу заниматься "лево-писанием".

Проблема собственно в чем:

Вот что у меня:

А мне надо чтобы эти 2 блока были рядом и по центру. Ну никак не получается

В чем моя ошибка? HELP!

Вот HTML код:

<html>
<head>
<title>Players Table</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<CENTER>
<DIV ID="container">
<div class="tableContent">
<div class="playerNickname">Player1</div>
<div class="statusTable">Status</div>
</div>
<div class="tableContent">
<div class="playerNickname">Player2</div>
<div class="statusTable">Status</div>
</div>
<div class="tableContent">
<div class="playerNickname">Player3</div>
<div class="statusTable">Status</div>
</div>
<div class="tableContent">
<div class="playerNickname">Player4</div>
<div class="statusTable">Status</div>
</div>
<div class="tableContent">
<div class="playerNickname">Player5</div>
<div class="statusTable">Status</div>
</div>
<div class="tableContent">
<div class="playerNickname">Player6</div>
<div class="statusTable">Status</div>
</div>
<div class="tableContent">
<div class="playerNickname">Player7</div>
<div class="statusTable">Status</div>
</div>
<div class="tableContent">
<div class="playerNickname">Player8</div>
<div class="statusTable">Status</div>
</div>
<div class="tableContent">
<div class="playerNickname">Player9</div>
<div class="statusTable">Status</div>
</div>
<div class="tableContent">
<div class="playerNickname">Player10</div>
<div class="statusTable">Status</div>

</div>
<br><form>
<div align="center"><button id="button">Submit</button></div>
</form>
</CENTER>
</DIV>
</body>
</html>

Вот CSS код:

/*******Styles CSS*******/
#container{
display: table;
width: 550px;
background-color: #F5DEB3;
border: 1px solid #000000;
border-spacing: 5px;
}

.playerNickname{
display: table;
width: 100px;
background-color: #FAFAD2;
border: 1px solid #000000;
}

.statusTable{
display: table;
width: 100px;
background-color: #FAFAD2;
border: 1px solid #000000;
float: right;
}

.tableContent{
float: top;
}

#button{
display: table;
width: auto;
background-color: #FFE4E1;
border: 1px solid #000000;
width: 500px;
height: 25px;
}
/*******Styles CSS*******/

Softlink · October 2, 2012

Забирайте - http://jsfiddle.net/Softlink/HFzDw/

p.s. вы там черти что нагородили.

zwar · October 2, 2012

Спасибо большое! В CSS я не очень силен =)))

Sign In

Блочная верстка [Помогите!]

Question

zwar

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Softlink

Link to comment

Share on other sites

zwar

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information