CODEWITHSUNDEEP
htmlcss
Riley Shaw
Riley Shaw

Reputation: 321

Styling divs to align correctly

I think I don't perfectly understand inline, block, float, etc. and was hoping for some help. I'm trying to achieve this setup:

enter image description here

The idea is to display the most common languages our clients use. I want to have a block that has the top 5 most common, with the most common getting a spotlight section. Then just list the rest of the languages underneath.

However, my code just pushes everything to the left, and the lets the rest of the page (like the footer) next to it. I want the top language and the next 4 to be next to each other, in the center of the screen, without affecting the page below it.

body {
    font-family: Arial;
    transition: all ease .5s;
    text-align: center;
    color: rgb(58,58,58);
}

#footer ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #666;
}

#footer li {
    float: left;
}

#footer li p {
    display: block;
    color: #555;
    text-align: center;
    padding: 7px 16px;
}

br {
    display: block;
}

#footer li a {
    display: block;
    color: #555;
    text-align: center;
    text-decoration: none;
}

#footer li a:hover {
    display: block;
    color: #555;
    text-align: center;
    text-decoration: underline;
}

#language-stats li {
    display: inline-block;
    padding: 13px;
    margin: 6px;
    border-radius: 5px;
    color: rgb(58,58,58);
    background-color: rgb(210,210,210);
    font-weight: bold;
}

#top-5 {
  width: 600px;
}

#top-1 {
  float: left;
  width: 250px;
  height: 300px;
  background-color: #fff;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  text-align: center;
}

#next-4 {
  float: left;
  width: 350px;
  height: 300px;
  background-color: #f5f5f5;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Test</title>
</head>

  <div id="languages">
    
    <div id="top-5">
      <h3>Top Languages</h3>
      
      <div id="top-1">
        <svg height="70" width="60">
          <circle cx="30" cy="40" r="30" fill="#CECECE" />
          <text x="18" y="53" style="font-size: 40;
                                     stroke: #fff;
                                     fill: #fff">1</text>
        </svg>
      </div>
      <div id="next-4">
        <ul>
          <li>2: Example</li>
          <li>3: Example</li>
          <li>4: Example</li>
          <li>5: Example</li>
        </ul>
      </div>
    </div>
    
    <div id="language-stats">
      <h3>Language Stats</h3>
      <ul id="language-stats-list">
        <li>Languages Represented: 37</li>
        <li>Coolest Language: Example</li>
      </ul>
    </div>
    
  </div>
  <br />
  <hr />
  <div id="footer">
    <ul>
        <li><p><a href="#">Download CSV</a></p></li>
        <li><p><a href="#">Link to dictionary</a></p></li>
    </ul>
  </div>
</body>
</html>

(You have to see the snippet in full page to witness the issue.)

What am I missing to have the cleaner layout I desire?

Upvotes: 2

Views: 54

Answers (1)

pgallo
pgallo

Reputation: 56

In your example, if you'd like the language-stats div to appear under your floated top-1 and next-4 elements, you'll just need to add the style clear: left to language-stats. This will effectively line-break it below the other two elements.

Additionally, you'll want to add margin: 0px auto to the styles of the top-5 div- this will equally space the left and right margins of your 600px-wide element and center it on the page.

Upvotes: 2

Related Questions