Search code examples
htmlcssposition

Positioning issues

I'm working on this template design for one of my personal projects, I keep running into issues as I'm new to html and css. To make things easier to understand and explain I've taken a screenshot and temporary changed background colors for the divs to different colors that way it's easier to see where its at on the pages.

Please see screenshot below: enter image description here

I'm trying to place that dark colored box inside the blue area next to the red box. Now, that I'm thinking about it. Some of these divs might not even be necessary. Do I really need that blue div on top of the lightblue background ?

The dark colored box doesn't want to float right next to the red box for some reason.. It keeps going under the other elements.

This is my 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>

here is my 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;

}
Solution

  • The problem is that the full width div at the top of your page is closing before the grey element. Here is the code from your question extracted and aligned correctly:

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

    I've also removed the content to make this even clearer (note, aligning your HTML carefully will save you pain).

    As the .client-showcase div is completely outside the .three-reasons div it will never appear within it. This is the reason that it is appearing underneath and won't float next to the red box.

    I've built you a little structure here that achieves what you want - you're right, a lot of the divs aren't necessary.

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

    The container is the light blue box, it's 980px wide. Inside it are two boxes. These boxes are both 220px wide and 200px high and they have display: inline-block set to make them line up beside each other. You can put 

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

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

    You can put content inside them now and remove the hard-coded heights, like this - note how the height controls the height of the container and that vertical-align: top; has been added to make them line up with the top of the container.