Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by SABCD ABCD
SABCD ABCD
3,414 Points

How do I position these 4 divs into: 2 divs on the left, 2 divs on the right?

Hi guys,

In the Experience section of this mock site, I want to position 2 of the light green divs to the left, and two on the right.

How do I do this?

* {
 box-sizing: border-box;
}


body {
    margin: 0;
    size: border-box;
    font-family: sans-serif;
}

/********************************
Header area
*********************************/

.main-header {
    height: 850px;
    width: 100%;
    background: black;
}

.title {
    color: rgba(255, 255, 255, 0.7);
    display: block;
    font-family: sans-serif;
    width: 100%;
    text-align: center;
    font-size: 2em;
    padding-top: 170px;
    text-transform: Uppercase;
}


/********************************
Intro para
*********************************/

.intro {
    text-align: center;
    line-height: 2;
    font-size: 1.5em;
}


/********************************
content area
*********************************/
.awards,
.experience {
    padding: 10px 0 100px 50px;
    height: 300px;
    width: 100%;
}

.awards {
    background: lightblue;
    margin-top: 20px;
}

.sub1,
.sub2 {
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    font-size: 1.5em;
    margin-bottom: 40px;
}


/******************************** Experience section */

.sub1,
.sub2 {
    color: steelblue;
}

.cirle1 {
    height: 100px; 
    width: 100px;
    border-radius: 100%;
    background: white;
}

.logo1,
.logo2,
.logo3,
.logo4 {
    height: 50px;
    width: 300px;
    background: #33ff77;
    text-align: center;
    color: white;
    font-size: 1.2em;
    display: table-cell;
    vertical-align: middle;
}

.logo1 {
    float: left;
}

.logo2 {
    float: right;
}

.logo3 {
    float: left;
}

.logo4 {
    float: right;
}   




/********************************
footer
*********************************/

.main-footer {
    background: #33ffcc;
    width: 100%;
    text-align: center;
    padding: 30px 0 30px 0;
}

.top-link {
    text-decoration: none;
}

<!DOCTYPE html>
<html>
<head>
    <title>Sanjay S. | Coder</title>
    <link rel="stylesheet" href="style.css">

</head>
<body>
    <header id="top" class="main-header">
        <span class="title">
            <h1>Sanjay Sudhakaran</h1>
            <h3>Front-End Web Developer | Designer</h3>
        </span>
    </header>
        <p class="intro"> In 1999, I was introduced to the family pc for the first time. <br> 
        It took me by surprise and I had completely fallen in love with the computer and all of its features.<br>
        From that point, I became more interested in how the computer actually worked.<br>
         Eventually, I learned about coding and the rest is history.<br></p>

    <div class="awards">
        <p class="sub1">AWARDS</p>
        <div class="cirle1">
        </div>
    </div>
    <div class="experience">
        <p class="sub2">EXPERIENCE</p>
        <div class="logo1">
            <p>CSS3</p>
        </div> 

        <div class="logo2">
            <p>HTML5</p>
        </div> 

        <div class="logo3">
            <p>JavaScript</p>
        </div> 

        <div class="logo4">
            <p>Graphic Design</p>
        </div> 

    </div>
</body>
<footer class="main-footer">
    <p>&copy All rights reserved by SSCorp</p>
    <a href="#top" class="top-link">Back to top &raquo;</a> 
</footer>
</html>

2 Answers

Tony Nguyen
Tony Nguyen
24,934 Points
Tony Nguyen
Tony Nguyen
24,934 Points

Hey Sanjay, if you are referring to this section below:

    <div class="experience">
        <p class="sub2">EXPERIENCE</p>
        <div class="logo1">
            <p>CSS3</p>
        </div> 

        <div class="logo2">
            <p>HTML5</p>
        </div> 

        <div class="logo3">
            <p>JavaScript</p>
        </div> 

        <div class="logo4">
            <p>Graphic Design</p>
        </div>

if so you need to add this code here:

.experience {
  padding: 0;
}

This will make your "experience" div remove it's padding so that it doesn't shift to the right. However may I ask if that was what you needed help with?

Andreas Anastasiades
Andreas Anastasiades
2,916 Points
Andreas Anastasiades
Andreas Anastasiades
2,916 Points

Not so sure what the problem is that you'er having now.

If it's uncontrolled floating, try adding this in between logo2 & logo3;

        <div class="logo2">
            <p>HTML5</p>
        </div> 

        <div style="clear:both;"></div> 

        <div class="logo3">
            <p>JavaScript</p>
        </div>

And change your css to;

.logo1, .logo2, .logo3, .logo4 {
    float: left;
}

Instead of floating, you could also use "display: inline-block;"