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 How to Make a Website Debugging HTML and CSS Problems Use Developer Tools

Malcolm Stretten
Malcolm Stretten
3,814 Points
Posted by Malcolm Stretten
Malcolm Stretten
3,814 Points

Positioning captions below images that are floated

I am going mad trying to just position captions below some images. The images are in two columns and 3 rows. I have used floats to structure the table of images. But I CANNOT get the caption text to align underneath each image.

Here is the HTML...

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Malcolm James Stretten | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Changa+One Open+Sans:400,400italic,700,700italic,800' rel='stylesheet'type='text/css'> <link rel="stylesheet" href="css/mainJS.css"> <meta name="viewport" content="width=device-width, initial-scale =1.0">

</head> <body> <div class = "main-header"> <img class="logo1" src ="img/jamesstretten2.png"><h2>Songs</h2></div>

<nav>
<ul>
<li><a href="#">Songs</a></li>
<li><a href="#">Other Music</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="container">

<img class="floating-box" src="img/ColdAsTheMoon-thumb.jpg"> <img class="floating-box" src="img/NothingLastsForever-thumb.jpg"> <img class="floating-box" src="img/LifesTooShort-thumb.jpg"> <img class="floating-box" src="img/HardLesson-thumb.jpg"> <img class="floating-box" src="img/SeaOfTroubles-thumb.jpg"> <img class="floating-box" src="img/InHollywood-thumb.jpg"> </div>

<div class="bottom"> <p>© 2016 James Stretten</p> </div> </body> </html>

Here is the css...

@charset "UTF-8"; /* CSS Document */

/*************** GENERAL ****************/

  • { box-sizing: border-box; }

body { margin: 0; padding: 0; height: 100%; font-family: 'Open-sans' sans-serif; background: #0d3869; color: #fff; }

html { height: 100%; }

p { font-size: 0.8em; line-height: 1.2em; color: #fff; font-weight: normal; letter-spacing: 1px; }

h2 { font-size: 1.2em; font-weight: 100; letter-spacing: 1px; color: #fff; padding-top: 10px; }

a:link { text-decoration: none; color: #fff; } a:visited { color: #fff; } a:hover { color:#CC0066 }

.rule { color: #ff0000; }

.smalltext { font-size: 10px; color: #fff; }

/* ================================= Base Layout Styles ==================================== */

/Navigation/

nav { text-align: center;

}

nav ul { list-style: none; font-size: 12px; margin: 0 0px; padding: 0; background-color:#0099CC; max-width: 100%; }

nav li { display: inline-block; }

nav a { font-weight: 400; padding: 15px 10px; }

.main { max-width: 100%; margin-bottom: 10px;

}

.logo1 { display: block; margin-left: auto; margin-right: auto; max-width: 80%; margin-bottom: -20px; padding-top: 10px; border-bottom: solid red 2px;
}

/* ---- Layout Containers ---- */

wrapper {

min-height: 100%;
position: relative;

}

content {

padding-bottom: 50px;

}

.container { max-width: 80%; font-weight: normal; letter-spacing: 1px; margin-left: auto; margin-right: auto;

}

.main-header { background-color: #0d3869; text-align: center;

}

.bottom { display: block; background:#0099CC; width:100%; height:40px; position:absolute; margin-left: auto; margin-right: auto; bottom:0; opacity: 0.70; }

.floating-box { display: block; width: 46%; margin:2%; border: 1px solid red; margin-top: 8%; }

.caption { font-size: 9px; color: red; width: 40%; text-align: left;

}

4 Answers

Russell Sawyer
seal-mask
.a{fill-rule:evenodd;}techdegree
Russell Sawyer
Front End Web Development Techdegree Student 15,705 Points
Russell Sawyer
.a{fill-rule:evenodd;}techdegree
Russell Sawyer
Front End Web Development Techdegree Student 15,705 Points

All you need to do is put all the elements inside a <div></div> tag that you want to float together and then float the div.

This course will give you the basics. :sparkles:

Malcolm Stretten
Malcolm Stretten
3,814 Points
Malcolm Stretten
Malcolm Stretten
3,814 Points

Russell - thanks for this but can you be more precise. The images are already wrapped in the div 'container'. Can you you do a snippet of html and css to show what you mean?

This is the existing HTML snippet...

<div class="container"> <img class="floating-box" src="img/ColdAsTheMoon-thumb.jpg"> <img class="floating-box" src="img/NothingLastsForever-thumb.jpg"> <img class="floating-box" src="img/LifesTooShort-thumb.jpg"> <img class="floating-box" src="img/HardLesson-thumb.jpg"> <img class="floating-box" src="img/SeaOfTroubles-thumb.jpg"> <img class="floating-box" src="img/InHollywood-thumb.jpg"> </div>

Here is the existing 'floating-box' and 'container' classes...

.floating-box { display: block; width: 46%; margin:2%; border: 1px solid red; margin-top: 8%; float: left; }

.container { max-width: 80%; font-weight: normal; letter-spacing: 1px; margin-left: auto; margin-right: auto;

}

Sean Warrener
Sean Warrener
4,398 Points
Sean Warrener
Sean Warrener
4,398 Points

I'm having the same issue where the header will float to the right of the select field: https://w.trhou.se/gnfck3un0q

Here's a snapshot of my workspace for reference.

Malcolm Stretten
Malcolm Stretten
3,814 Points
Malcolm Stretten
Malcolm Stretten
3,814 Points

Sean

Another guy called Russell supplied this answer:

If you want to float an image with a caption together you need to put each image and its corresponding header in its own <div></div> tag.

<div class="wrapper"> <div> <img src="picture1.jpg"> <h2>Caption</h2> </div> <div> <img src="picture2.jpg"> <h2>caption</h2> </div><div> <img src="picture3.jpg"> <h2>Caption</h2> </div> </div> <!-- /wrapper --> The caption will stay with the image and you can style it together with the image inside the same <div> tag. You will want to put all the <div> tags inside a <div> tag I like to call .wrapper. It allows you to use the .clearfix class to fix the parent element when it collapses.

Malcolm

Russell Sawyer
seal-mask
.a{fill-rule:evenodd;}techdegree
Russell Sawyer
Front End Web Development Techdegree Student 15,705 Points
Russell Sawyer
.a{fill-rule:evenodd;}techdegree
Russell Sawyer
Front End Web Development Techdegree Student 15,705 Points

If you want to float an image with a caption together you need to put each image and its corresponding caption in its own <div></div> tag.

<div class="wrapper">
  <div>
    <img src="picture1.jpg">
    <h2>Caption</h2>
  </div>
  <div>
    <img src="picture2.jpg">
    <h2>caption</h2>
  </div>
  <div>
    <img src="picture3.jpg">
    <h2>Caption</h2>
  </div>
</div> <!-- /wrapper -->

The caption will stay with the image and you can style it together with the image inside the same <div> tag. You will want to put all the <div> tags inside a <div> tag I like to call .wrapper. It allows you to use the .clearfix class to fix the parent element when it collapses.

All this is explained in this course.

Malcolm Stretten
Malcolm Stretten
3,814 Points
Malcolm Stretten
Malcolm Stretten
3,814 Points

Russell

Thank you very much for this - really helpful. Another guy called Sean said he was having the same problem. I'll point him to your answer.

Malcolm