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

HTML

Posted by John Levy
John Levy
1,451 Points

Looking for feedback on my HTML5 code

I am trying to get the text and boxes inside the larger box on the left below the image. How do I do this? Right now whenever I try the text goes to the side of the larger box but not inside. I have attached my HTML5 code and CSS. Kind regards John

HTML5 CODE

<!DOCTYPE html>
<html>
  <link rel="stylesheet" href="new 1.css">
<body>

<div class="box2"></div>

    <table class="product">
        <tr>
            <td colspan="4" class="product_name">igbodybuildingworld</td>
        </tr>
        <tr class="what_class_did_you_want_here">

            <td class="line-right"><strong>106</strong><br/>media</td>
            <td class="line-left"><strong>32K</strong><br/>followers</td>
            <td class="line-left"><strong>605</strong><br/>following</td>
        </tr>
    </table>
</body>

<head>
<div class="box"></div>
    <style>
    .product {
        margin-top: 20px;
    }
    td[class^="line"] {
        border: 1px solid black;  
        padding: 4px;
    }
    </style>
</head>

//CSS
.box2 {

    background: url(igbodybuildingworld2.jpg);
    background-size: 150px;
    background-repeat: no-repeat;
    background-position:  top center;
    float: left;
    color: black;
    font-weight: bold; 
    font-size: 18px;
    text-align: center;
    line-height: 300px;
    background-color: white;
    width: 280px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 30px;
    padding: 5px;
    border: 1px solid black;
    height: 400px;



}

1 Answer

Indigo Timber
Indigo Timber
5,388 Points
Indigo Timber
Indigo Timber
5,388 Points

I tried making some changes to your code, hope it helps! Had some difficulty fixing the float elements. 

/* CSS */

body {
    margin: 0 auto;
}

.box {
    background-size: cover;
    border: 1px solid black;
    height: 500px;
}

#image {
    background: url("bigbodybuildingworld2.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 300px;
    width: 300px;
    margin: 50px auto;
}

.product {
    border: 1px solid black; 
    padding: 40px 0 40px;
    height: 40px
    background-color: white;
}

.line-left {
    float: left;
    margin: 0 200px 10px 10px;
}

.line-center {
    display: inline-block;
    float: left;
    margin: 0 200px 0 0;
}

.line-right {
    float: left;
    display: inline-block;
}

<!DOCTYPE html>
<html>

<head>
  <link  href="styles.css" rel="stylesheet">
</head>

<body>
    <div class="box">
        <div id="image"></div> 
    </div>

    <div class="product">
        <div class="line-left"><strong>106</strong><br/>media</div>
        <div class="line-center"><strong>32K</strong><br/>followers</div>
        <div class="line-right"><strong>605</strong><br/>following</div>
    </div>

</body>

Best regards, Daniel