body {
background: orange;
margin: 0;
margin-top: -140px;
width: 100%;
height: 1109px;
}
#container {
/*padding-top: 50px;*/
background: orange;
width: 1460px;
min-width: 1460px;
height: 100%;
margin: 0 auto;
}
/* tbody */
#tbody {
background: brown;
width: 900px;
/*height: 500px;*/
min-height: 500px;
/*height: auto;*/
left: 19%;
top: -50%;
z-index: 2;
position: relative;
border-radius: 30px;
}
/* green top */
#block1 {
background: green;
/*height: 250px;*/
min-height: 250px;
height: auto;
width: 450px;
z-index: 1;
position: relative;
left: 700px;
top: 180px;
border-radius: 30px;
}
/* red top */
#block2 {
background: red;
height: 300px;
/*min-height: 300px;*/
width: 250px;
z-index: 3;
position: relative;
left: 400%;
top: 5%;
border-radius: 30px;
vertical-align: middle;
display: table-cell;
/*overflow-y: scroll;*/
}
/* yellow top */
#block3 {
background: yellow;
/*height: 50px;*/
min-height: 50px;
height: auto;
width: 700px;
z-index: 5;
position: relative;
left: 19%;
top: -22%;
border-radius: 50px;
}
/* pink top */
#block4 {
background: pink;
/*height: 170px;*/
min-height: 170px;
height: auto;
width: 700px;
z-index: 4;
position: relative;
left: 15%;
top: -44%;
border-radius: 50px;
}
/* purple down */
#block5 {
background: purple;
/*height: 270px;*/
min-height: 270px;
height: auto;
width: 200px;
z-index: 5;
position: relative;
left: 15%;
top: -65%;
border-radius: 30px;
}
/* yellow down */
#block6 {
background: yellow;
/*height: 50px;*/
min-height: 50px;
height: auto;
width: 900px;
z-index: 4;
position: relative;
left: 20%;
top: -75%;
border-radius: 30px;
}
/* pink down */
#block7 {
background: pink;
/*height: 200px;*/
min-height: 200px;
height: auto;
width: 500px;
z-index: 3;
position: relative;
left: 50%;
top: -90%;
border-radius: 30px;
}
/* red dot */
#block8 {
background: red;
/*height: 100px;*/
min-height: 100px;
height: auto;
width: 100px;
z-index: 7;
position: relative;
border-radius: 70px;
left: 60%;
top: -62%;
}
td {
font-size: 28px;
vertical-align: middle;
text-align: center;
transform: rotate(-45deg);
}
h5 {
text-align: center;
font-size: 20px;
}
h3 {
text-align: left;
font-size: 34px;
}
h2 {
text-align: center;
font-size: 38px;
}
h1 {
text-align: center;
font-size: 68px;
}
p {
text-align: center;
font-size: 28px;
}
<!DOCTYPE html>
<html>
<head>
<title> 123 </title>
<link rel="stylesheet" type="text/css" href="Style(1).css">
</head>
<body>
<div id="container">
<div id="block1">
</div>
<div id="block2">
<h3 style="color: white">
>home <br> >photos <br> >links <br> >other <br> >other <br>
</h3>
</div>
<div id="block3">
<p> Text Text Text Text Text Text Text Text Text Text
</p>
</div>
<div id="block4">
<h1 style="color: white"> Variant 10 </h1>
</div>
<div id="block8">
<table>
<tr>
<td style="color: purple">
<p></p>
NEW 2.0
</td>
</tr>
</table>
<!-- <h5>
NEW <br>
2.0
</h5> -->
</div>
<div id="tbody">
<h2>Text Text Text Text Text <br> Text Text Text Text</h2>
<h3 style="color: red"> 1. Text Text Text Text Text </h3>
<p> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
<p>
<!-- <h3 style="color: red"> 2. Text Text Text Text Text </h3>
<p>Text Text Text Text Text Text Text Text Text Text </p> -->
</div>
<div id="block5">
<p style="color: white">Text 01!</p>
<p>Text 02!</p>
</div>
<div id="block6">
<p>Text Text Text Text Text Text Text Text Text Text </p>
</div>
<div id="block7">
</div>
</div>
<!-- </div> -->
</body>
</html>
Есть вот такой код. В чем собственно проблема? Если помещать текст(имеется ввиду очень много текста) в любой из блоков(кроме того, что в середине), то происходит что-то очень страшное = все расползается :) Пробовал все, что только смог вообраить и прогуглил много всего, но понять как это пофиксить так и не понял. Как это исправить? (Не меняя position у блоков)