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!
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
John Levy
1,451 PointsLooking 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

Daniel Pitulia
5,388 PointsI 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