0
Так что я пытаюсь добиться этого эффекта колонок ниже: 
шахматном колонны эффект
И используя код ниже, я был в состоянии достигнуть левой части изображения. Три поля слева расположены хорошо. Я не уверен, как добавить правый столбец/поле без эффекта левой стороны. (Обратите внимание, что белый патч справа - это место, куда будет идти изображение, не беспокойтесь об этом).
HTML:
<html>
<head>
<title>Exodus - Testing</title>
<link rel=StyleSheet href="main.css" type="text/css" media=screen>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="wrap">
<div class="user_con">
</div>
<!-- <div class="gen_info">
<div> -->
<div class="rules">
</div>
<div class="song_con">
</div>
<div class="status_bar">
</div>
</div>
</body>
CSS:
.wrap {
width: 900px;
height: 700px;
border: 1px solid black;
}
/* TOP LEFT USER SECTION */
.user_con {
width: 430px;
height: 150px;
margin: 10px;
background-color: rgba(23,23,23,1.0);
}
/* RIGHT COLUMN (INFORMATION GENERAL) */
/* .gen_info {
width: 430px;
height: 650px;
margin: 10px;
display: inline;
float: right;
background-color: rgba(23,23,23,1.0);
} */
/* LEFT COLUMN (RULES) */
.rules {
width: 430px;
height: 350px;
margin: 10px;
background-color: rgba(23,23,23,1.0);
}
/* BOTTOM LEFT COLUMN (MUSIC AND CONNECTION INFO) */
.song_con {
width: 430px;
height: 125px;
margin: 10px;
background-color: rgba(23,23,23,1.0);
}
/* STATUS BAR (DOWNLOAD BAR) */
.status_bar {
width: 880px;
height: 5px;
margin: 10px;
background-color: rgba(44,44,44,1.0);
}
я попробовать добавить поплавки и дисплеи, но никто не работал, по крайней мере, как я это сделал. Я прокомментировал CSS и HTML для правильного столбца для создания левой стороны.
Любая помощь была бы потрясающе благодарна!