Содержимое не будет перемещаться справа от страницы

Question

Я просто играю с созданием веб-сайта, извиняя грязный код, совершенно новый для этой игры.

В основном я пытаюсь разделить веб-сайт с содержанием каждого раздела, идущим влево или вправо, чередуясь. Как вы можете видеть, мне удалось сделать то, что слева (раздел 2), однако я не могу сделать это справа (раздел 3). Панель навигации также фиксирована, но не отображается на JSFiddle. Мне также интересно, почему мой текст отлично отображен на моем мониторе 1920x1080, но на моем ноутбуке 1366x768 он переполняется из div, помните, что фоны каждого раздела будут в конечном итоге быть изображением, поэтому я не могу повтори это.

Я загрузил JSFiddle, так как меня смущало то, что я должен был сделать, чтобы загрузить код здесь, надеюсь, что это не проблема.

Я ценю вашу помощь и снова извиняюсь за невероятный грязный код!

<section id="screen1"> 
    <div class="hLogo">Title</div> 
    <nav> 
     <ul> 
      <li> 
       <a href="#">1</a> 
      </li> 
      <li> 
       <a href="#">2</a> 
      </li> 
      <li> 
       <a href="#">3</a> 
      </li> 
      <li> 
       <a href="#">4</a> 
      </li> 
      <li> 
       <a href="#">5</a> 
      </li> 
      <li> 
       <a href="#">6</a> 
      </li> 
     </ul> 
     <img class="ad" src="css/asc.jpg" /> 
    </nav> 
</section> 
<section id="screen2"> 
    <div class="content left nobg"> 
     <div class="scrTitle">About</div> 
     <p class="scrContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros nisi, consequat sit amet sodales vitae, molestie eu elit. Nullam gravida laoreet nulla sit amet pretium. Vivamus nisi est, imperdiet a venenatis vel, porttitor vitae dui. Vivamus laoreet tortor in diam interdum, ac dapibus ante pretium. Vivamus gravida leo sit amet placerat lobortis. Sed odio arcu, tempus non gravida ut, egestas ut velit. Ut vitae enim fringilla, consequat massa quis, interdum sem. Donec vel sollicitudin urna. Suspendisse eget mi neque. Phasellus adipiscing nunc vitae nulla molestie tempor. Curabitur porttitor pretium augue, sit amet ornare metus.</p> 
    </div> 
</section> 
<section id="screen3"> 
    <div class="content right nobg"> 
     <div class="scrTitle">About</div> 
     <p class="scrContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros nisi, consequat sit amet sodales vitae, molestie eu elit. Nullam gravida laoreet nulla sit amet pretium. Vivamus nisi est, imperdiet a venenatis vel, porttitor vitae dui. Vivamus laoreet tortor in diam interdum, ac dapibus ante pretium. Vivamus gravida leo sit amet placerat lobortis. Sed odio arcu, tempus non gravida ut, egestas ut velit. Ut vitae enim fringilla, consequat massa quis, interdum sem. Donec vel sollicitudin urna. Suspendisse eget mi neque. Phasellus adipiscing nunc vitae nulla molestie tempor. Curabitur porttitor pretium augue, sit amet ornare metus.</p> 
    </div> 
</section> 

Answer 1

Чтобы устранить проблему с разделом 3 не будет права, вы можете просто добавить этот бит кода в CSS:

.scrContent2 { 
    font-size: 75%; 
    overflow: hidden; 
    width: 20%; 
    float: right; 
} 

Это означает, что ваш HTML нужно будет меняться к разделу 3 следующим образом:

<p class="scrContent2"> 

Вот jsfiddle этого .. http://jsfiddle.net/jw5du15v/5/

Answer 2

Попробуйте так: DEMO

CSS:

.right { 
    margin-right: 10%; 
    text-align:right; 
    float:right; 
} 
.left { 
    margin-left: 10%; 
    float: left; 
    text-align:left: 
} 

HTML:

<div class="content nobg"> 
      <div class="scrTitle left">About</div> 
      <p class="scrContent right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros nisi, consequat sit amet sodales vitae, molestie eu elit. Nullam gravida laoreet nulla sit amet pretium. Vivamus nisi est, imperdiet a venenatis vel, porttitor vitae dui. Vivamus laoreet tortor in diam interdum, ac dapibus ante pretium. Vivamus gravida leo sit amet placerat lobortis. Sed odio arcu, tempus non gravida ut, egestas ut velit. Ut vitae enim fringilla, consequat massa quis, interdum sem. Donec vel sollicitudin urna. Suspendisse eget mi neque. Phasellus adipiscing nunc vitae nulla molestie tempor. Curabitur porttitor pretium augue, sit amet ornare metus.</p> 
     </div> 

Answer 3

Используйте CSS, чтобы плавать ваши страницы влево и вправо.

Попробуйте

.content left nobg { 

    float:left; 
} 

.content right nobg { 

    float:right; 
}