раздел позиционирования и div

Question

У меня проблема с созданием простого веб-сайта.

Я хочу использовать в качестве контейнера для новостей (70% от ширины обертки), а так же, как и в случае с самыми популярными новостями, которые должны располагаться справа.

У меня есть блок отображения и поплавок слева, в то время как имеет встроенный дисплей.

Это нормально, но содержимое в стороне не ведет себя так, как ожидалось. Если я вложу в него, он будет иметь ширину обертки, а не в сторону.

Что я могу сделать? Когда я пытаюсь добавить прописку в свой список в сторону, я не могу.

jsfidle

#aside { 
    padding-left: 2em; 
    width: 29%; 
    display: inline; 
    margin: 0; 
    background-color: green; 
} 

Answer 1

Вы можете просто использовать два div элементы, чтобы разделить страницу на 70% и 30%. Я редактировал немного вашего CSS и это работает:

CSS:

.sec 
{ 
width:70%; 
float:left; 
background-color: red; 
margin-bottom: 3em; 
} 
.side 
{ 
width:30%; 
float:left; 
background-color:Green; 
} 

HTML:

<div id="wrapper"> 
//your rest of HTML 

<div class="sec"> 
          <h1>Last news</h1> 
          <article> 
            <h1>News #1</h1> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id velit deleniti ducimus, dolor architecto animi blanditiis laudantium quia fuga obcaecati, quibusdam maxime temporibus nihil porro, magnam doloribus explicabo, provident nesciunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla placeat odit eaque porro sint laudantium ad ipsam quisquam numquam error dolor, laboriosam saepe aperiam, rerum libero ullam fugit quidem, ab.</p> 
          </article> 
          <footer> 
            <ul> 
              <li>Author: admin</li> 
              <li>date: 31.12.2003</li> 
            </ul> 
          </footer> <!-- date and author #1 --> 
          <!-- news1 --> 

          <article> 
            <h1>News #2</h1> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id velit deleniti ducimus, dolor architecto animi blanditiis laudantium quia fuga obcaecati, quibusdam maxime temporibus nihil porro, magnam doloribus explicabo, provident nesciunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla placeat odit eaque porro sint laudantium ad ipsam quisquam numquam error dolor, laboriosam saepe aperiam, rerum libero ullam fugit quidem, ab.</p> 
          </article> 
          <footer> 
            <ul> 
              <li>Author: admin</li> 
              <li>date: 31.12.2003</li> 
            </ul> 
          </footer> <!-- date and author #2 --> 
          <!-- news2 --> 

          <article> 
            <h1>News #3</h1> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id velit deleniti ducimus, dolor architecto animi blanditiis laudantium quia fuga obcaecati, quibusdam maxime temporibus nihil porro, magnam doloribus explicabo, provident nesciunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla placeat odit eaque porro sint laudantium ad ipsam quisquam numquam error dolor, laboriosam saepe aperiam, rerum libero ullam fugit quidem, ab.</p> 
          </article> 
          <footer> 
            <ul> 
              <li>Author: admin</li> 
              <li>date: 31.12.2003</li> 
            </ul> 
          </footer> <!-- date and author #3 --> 
          <!-- news3 --> 

        </div> 
        <div class="side"> 
          <h2>Most popular articles</h2> 
          <ul> 
            <li>Example article #1</li> 
            <li>Example article #2</li> 
            <li>Example article #3</li> 
            <li>Example article #4</li> 
            <li>Example article #5</li> 
            <li>Example article #6</li> 
            <li>Example article #7</li> 
            <li>Example article #8</li> 
            <li>Example article #9</li> 
            <li>Example article #10</li> 
          </ul> 
        </div> 
//your footer code here... 
</div> 

DEMO