Проблемы с позиционированием

Question

Я работаю над этим шаблоном для одного из моих личных проектов, я постоянно сталкиваюсь с проблемами, поскольку я новичок в html и css. Чтобы упростить понимание и объяснение, я сделал снимок экрана и временные измененные цвета фона для разделов на разные цвета, так что легче видеть, где он находится на страницах.

Пожалуйста, смотрите скриншот ниже:

Я пытаюсь поставить эту темную цветную коробку внутри синей области рядом с красной коробке. Теперь я думаю об этом. Некоторые из этих разделов могут даже не понадобиться. Действительно ли мне нужен синий сингл поверх фона светло-голубого?

Темная коробка не хочет плавать рядом с красным полем по какой-либо причине .. Она продолжает двигаться под другими элементами.

Это мой HTML

<div class="three-reasons"> 
     <div class="reason-one"> 
      <div class="news-container"> 
       <h2>Recent News</h2> 
       <h3>TechTarget<span> August 13, 2015</span></h3> 
       <p>Adios, Legacy network architectures: Making the jump to NSX</p> 
       <h3>Dallas Business Journal<span> August 13, 2015</span></h3> 
       <p>What Nexis is doing on the Hill to influence future cyber security legislation</p> 
       <div class="side-div"></div> 
      </div> 
     </div> 
    </div> 
    <div class="client-showcase"> 
     <h1>Client Showcase</h1> 
     <img src="images/our-clients.png" class="client-logos" alt="Our Clients" /> 
    </div> 
    <footer> 
     <div class="footer-content"> 
      <p>Copyright &copy; 2015 - 2016 Nexishost, inc. All Rights Reserved.</p> 
      <ul> 
       <li><a href="#">Terms & Conditions</a></li> 
       <li><a href="#">Privacy Policy</a></li> 
      </ul> 
     </div> 
    </footer> 
</body> 
</html> 

вот мой CSS

.three-reasons { 
    width: 980px; 
    margin: 50px auto 0 auto; 
    background-color: lightblue; 
} 

.news-container { 
    width: 220px; 
    background-color: red; 
} 

.side-div { 
    width: 220px; 
    height: 138px; 
    float: right; 
    background-color: #474747; 
} 

.reason-one { 
    width: 470px; 
    background-color: blue; 
} 

.reason-one h2 { 
    color: #000; 
    font-size: 15px; 
    font-weight: normal; 
    padding-bottom: 8px; 
    border-bottom: 1px solid #dedede; 
    font-family: 'Open Sans', sans-serif; 
} 

.reason-one h3 { 
    font-size: 11px; 
    color: #333; 
    padding: 0; 
    font-family: Arial, Helvetica, sans-serif; 
} 

.reason-one span { 
    color: #999; 
    font-size: 11px; 
    font-style: italic; 
    font-weight: normal; 
    font-family: Arial, Helvetica, sans-serif; 

} 

.reason-one p { 
    color: #333; 
    max-width: 220px; 
    font-size: 13px; 
    margin-bottom: 13px; 
    font-family: Arial, Helvetica, sans-serif; 

} 

Answer 1

Проблема заключается в том, что полная ширина DIV в верхней части страницы закрывается до серого элемента , Вот код из вашего вопроса извлечен и правильно выровнен:

<div class="three-reasons"> 
    <div class="reason-one"> 
     <div class="news-container"> 
     </div> 
    </div> 
</div> 
<div class="client-showcase"> 
</div> 

Я также удалил содержимое, чтобы сделать это более ясному (обратите внимание, тщательно совместив ваш HTML сэкономит вам боль).

Поскольку .client-showcase div полностью находится за пределами .three-reasons div, он никогда не появится в нем. Именно по этой причине он появляется под ним и не будет плавать рядом с красным полем.

Я построил здесь небольшую структуру, что achieves what you want - вы правы, много разделов не нужно.

<div class='container'> 
    <div class='box-1'> 
    </div> 
    <div class='box-2'> 
    </div>  
</div> 

Контейнер - светло-голубая коробка, ширина 980px. Внутри это две коробки. Эти боксы имеют ширину 220px и 200px, и они имеют display: inline-block, чтобы они выстроились рядом друг с другом. Вы можете поставить

.container { 
    width: 980px; 
    background-color: lightblue; 
} 

.box-1, 
.box-2 { 
    width: 220px; 
    height: 200px; 
    background-color: red; 
    display: inline-block; 
} 

Вы можете поместить содержание в них сейчас и удалить жестко запрограммированные высоты, like this - обратите внимание, как высота контролирует высоту контейнера и vertical-align: top; было добавлено, чтобы сделать их выстраиваться с верхней части контейнера.

Answer 2

я думаю, вы должны попробовать этот кусок кода. это не является эффективным, но работает

.side-div { 
    width: 220px; 
    height: 138px; 
    float: right; 
    background-color: #474747; 
    position:absolute; 
    top:100px; 
    left:250px; 
} 

Answer 3

news-containerdiv только 220px width. Увеличьте ширину до 470 пикселей.

Для плавающей side-div направо, поместите его над другим содержанием -

<div class="news-container"> 
    <div class="side-div"></div> 
    <h2>Recent News</h2> 
    <h3>TechTarget<span> August 13, 2015</span></h3> 
    <p>Adios, Legacy network architectures: Making the jump to NSX</p> 
    <h3>Dallas Business Journal<span> August 13, 2015</span></h3> 
    <p>What Nexis is doing on the Hill to influence future cyber security legislation</p> 
</div> 

https://jsfiddle.net/fn7kxckk/