Почему эта панель движется, когда я изменяю размер экрана? ⇐ Html

[Anonymous]

Белая панель в правой классифицировании как .newsledtter , когда я изменяю размер экрана, выходит из места в отличие от того, что выше, которое плавает вправо. Но если я плаваю вправо, он плавает к середине страницы. Я собираюсь сделать это отзывчиво и мне нужно сделать это, как приведенный выше .newsledtter < /code> для этого: < /p>

Код: Выделить всё

* {
margin: 0;
padding: 0;
}

@font-face {
font-family: SketchFont;
src: url(Fonts/Sketch_Block.ttf);
}

body {
background: #ebebeb;
width: 80%;
height: 1300px;
}

.container {
width: 100%;
}

.mainHeader nav {
width: 95%;
height: 40px;
position: relative;
left: 30px;
top: 60px;
background: -webkit-linear-gradient(rgba(90, 215, 240, 0.75), rgb(33, 171, 198));
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(rgba(90, 215, 240, 0.75), rgb(33, 171, 198));
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgba(90, 215, 240, 0.75), rgb(33, 171, 198));
/* For Firefox 3.6 to 15 */
background: linear-gradient(rgba(90, 215, 240, 0.75), rgb(33, 171, 198));
/* Standard syntax */
/*margin: 100px 50px 0 150px;*/
}

.mainHeader nav ul {}

.mainHeader nav ul li {
float: right;
display: inline;
text-align: center;
border: 1px solid #ADADA8;
border-bottom: none;
border-top: none;
border-left: none;
padding-top: 20px;
}

.mainHeader nav ul li.last {
border-right: none;
}

.mainHeader nav ul li a {
text-decoration: none;
/*margin:10px Use to replace paddings right/left but causes hovedr errors*/
font-family: Arial;
position: relative;
top: -10px;
color: white;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
}

.mainHeader nav ul li a:hover {
background: -webkit-linear-gradient(#FFA313, #FB9F0E);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#FFA313, #FB9F0E);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#FFA313, #FB9F0E);
/* For Firefox 3.6 to 15 */
background: linear-gradient(#FFA313, #FB9F0E);
/* Standard syntax */
}

.topArea {
width: 95%;
height: 300px;
position: relative;
left: 30px;
top: 10px;
/*margin: -50px 50px 0 150px;*/
background: -webkit-linear-gradient(rgba(90, 215, 240, 0.75), rgb(33, 171, 198));
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(rgba(90, 215, 240, 0.75), rgb(33, 171, 198));
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgba(90, 215, 240, 0.75), rgb(33, 171, 198));
/* For Firefox 3.6 to 15 */
background: linear-gradient(rgba(90, 215, 240, 0.75), rgb(33, 171, 198));
/* Standard syntax */
}

.topArea .topAInfo {
margin: 20px;
padding-top: 60px;
width: 60%;
margin: 50px;
font-family: ;
}

.topArea .topAInfo h2 {
font-family: SketchFont;
font-weight: normal;
}

.topArea .topAInfo p {
line-height: 25px;
font-family: cursive;
font-size: 15px;
}

.bg {
width: 100%;
height: 1200px;
position: relative;
left: 10%;
background: linear-gradient(blue, white, white, blue);
/* Standard syntax */
/*background-image:url(bg2.jpg);*/
background-repeat: no-repeat;
}

.middleArea {
background: linear-gradient(white, white, #55C4E9);
/* Standard syntax */
;
height: 600px;
width: 95%;
position: relative;
left: 30px;
top: 10px;
}

.middleArea .middleAInfo {
padding: 30px 0 0 30px;
}

.middleArea .middleAInfo p {
color: #49CBF0;
font-size: 30px;
font-weight: 400;
}

.middleArea .latestNews {
width: 250px;
height: 300px;
background: #0099cc;
float: right;
position: relative;
top: -60px;
}

.middleArea .latestNews hr {
position: relative;
top: 50px;
color: black;
width: 90%;
margin-left: 10px;
}

.middleArea .latestNews h2 {
padding: 10px 10px 10px 10px;
color: white;
}

.middleArea .latestNews p.date {
color: white;
font-size: 13px;
font-weight: bold;
padding: 10px 10px 10px 20px;
}

.middleArea .latestNews p {
color: white;
font-size: 13px;
position: relative;
left: 10px;
width: 225px;
}

.middleArea .latestNews a {
color: blue;
font-size: 15px;
font-family: Arial;
}

.middleArea .rightInfo .newsLetter {
background:  white;
width: 250px;
height: 170px;
position: relative;
top: 250px;
left: 75.6%;
}< /code>





Home

[*]








[list]

[url=#]Contact[/url]

[*]
[url=#]Products[/url]

[*]
[url=#]About[/url]

[*]
[url=#]Home[/url]

[/list]




Here is just a simple title


This is just a little bit of dummy text. This is just a little bit of dummy text. This is just a little bit of dummy text. This is just a little bit of dummy text.





Welcome to


A dummy website!!




Latest News



March 28, 2015

New advanced update with double speed and a whole bunch of cool new st.. [url=#]more>>[/url]

March 28, 2015

New advanced update with double speed and a whole bunch of cool new st.. [url=#]more>>[/url]

Подробнее здесь: https://stackoverflow.com/questions/293 ... the-screen