Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

[SOLVED] How to use float for the figure element and the p element? (This is a personal project.)

Hey everyone, I am doing this personal project to practice my HTML and CSS skills, I am basically building a website for a made up bakery shop.

I am using the figure element just to play around with it but ran into a problem, I am trying to put one figure element to the left and the p element to the right of that figure. As for the other figure, it's the same thing but vice versa. I got the figure element to float where they need to go but I am having trouble figuring out how to float the <p> element where it needs to go and have it lined up with the figure element. It just looks jacked up and the more I play around and try to fix it the more jacked up it looks. Anyways the code I am about to show you is the closest I've gotten it to get the <p> element to go where it needs to go. this is my HTML code.

<DOCTYPE! html>
<head>
  <title>Charlie's Cake Factory</title>
  <link rel="stylesheet" href="styles.css" type="text/css" />
  <meta name:"viewport" content:"width=device-width"/>
</head>

<body>
<div>
  <header class="main-header clearfix" id="top">
    <span><a href="#about">Welcome To</a></span>
    <h1><a href="#about">Charlie's Cake Factory</a></h1>


  <nav>
    <ul class="main-nav clearfix">
      <li><a href="index.html">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  </header>

  <div class="column1 clearfix">
    <figure class="fig-left">
      <h2>Our Cake of the Day</h2>
      <img class="cake" src="img/cake.jpg" alt="A delicious cake"/>
      <figcaption> Come try out our dadada. </figcaption>
    </figure>
    <p>Here we have a scrumtious cake that will just melt it your mouth.</p>
    <p>Lorem ipsum dolor sit amet, id ubique alienum eum, veritus delicata id cum. At solet cetero pro, qui an utinam percipitur. Eum suas eirmod suscipiantur no, vel no nemore ornatus detracto, tota forensibus vel no. Ei mollis voluptatum sit, dicat democritum vis ad, ei qui malis tacimates definiebas. At insolens consectetuer est.
Perpetua complectitur ei mei, quas partem discere has ne. Vis ut tota reque ancillae, no laudem vivendo cotidieque vim. An eam eros partem sapientem, tale omittantur eu eam, cu sit aperiri senserit elaboraret. Aliquam partiendo an quo, id usu meis lobortis. Sit tale docendi ad, no cum mucius salutatus. Ei maiorum constituto scribentur quo, te mei quas tacimates interesset.</p>
  </div>

  <div class="column2 clearfix">
    <figure class="fig-right">
      <h2> Selection of our Bakery Goods</h2>
      <img class="bakery-selection" src="img/bakery2.jpg" alt="a selction of bakery food"/>
      <figcaption>selections upon selections of our cooking Goods</figcaption>
    </figure>
    <p>Here we have huge selection of what we put out every single day come take alook here or come in person we'd love have you here.</p>
    <p>Lorem ipsum dolor sit amet, id ubique alienum eum, veritus delicata id cum. At solet cetero pro, qui an utinam percipitur. Eum suas eirmod suscipiantur no, vel no nemore ornatus detracto, tota forensibus vel no. Ei mollis voluptatum sit, dicat democritum vis ad, ei qui malis tacimates definiebas. At insolens consectetuer est.
Perpetua complectitur ei mei, quas partem discere has ne. Vis ut tota reque ancillae, no laudem vivendo cotidieque vim. An eam eros partem sapientem, tale omittantur eu eam, cu sit aperiri senserit elaboraret. Aliquam partiendo an quo, id usu meis lobortis. Sit tale docendi ad, no cum mucius salutatus. Ei maiorum constituto scribentur quo, te mei quas tacimates interesset.</p>
</div>

  <div class="column3 clearfix">
    <h2>Come and Visit Us! </h2>
    <p>We would love to have you drop by and say hello!</p>
     <img class="shop" src="img/bakery-shop.jpg" alt="A picture of our store."/>
    <p><strong>Adress:</strong></p>
    <address>
     1234 we bake your bakery goods,<br />
     your, cake, 5678
    </address>
  </div>

  <div>
    <footer>
      <p><small>&copy; 2019 Charlie's Cake Factory</small></p>
    </footer>
  </div>
</div>
</body>

and my CSS code if you're interested and please ignore the side notes.

@font-face {
  @font-famliy:'Abolition Regular';
  src: url('../fonts/abolition-regular-webfont.eot');
  src: url('../fonts/abolition-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/abolition-regular-webfont.woff') format('woff'),
       url('../fonts/abolition-regular-webfont.ttf') format('truetype');
}

/* base layout */
* {
  box-sizing: border-box;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
}

header {
  background-color: lightgreen;
  text-align: center;
  margin-bottom: 50px;
}

/* styles layout */
.main-header {
padding: 12px;
}

.main-nav li {
  display: inline;
  border-style: solid;
  border-color: blue;
  border-width: 2px;
  float: right;
}

.column3 {
  text-align: center;
}

footer {
  background-color: lightgreen;
  margin-top: 40px;
  padding: 25px 0px;
}

/* floats   */ /* still trying to figure out how to align every thing look back at css basics course. */
/* .column1 figure {
 float: left;
 display: block;
}

.column1 p {
  float: right;
  display: block;
}

.column2 figure {
  float: right;
  display: block;
}

.column2 p {
  float: left;
  display: block;
} */

.fig-left, .fig-right {
  width: 46.5%;

}

.fig-left {
  float: left;
}

.fig-right {
  float: right;
}

.column1 p {
  float: right;
}




/* figure out stuff up there ^. */

/* images */
.cake {
  width: 25em;
  height: 15em;
}

.bakery-selection {
  width: 25em;
  height: 15em;
}

.shop {
  width: 35em;
  height: 25em;
}


/* pseudo links */
header a:link {
  color: white;
}

header a:visited {
  color: white;
}

/* Float clear fix */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Let me know what you guys think and any tips on how to make the code a little better would be appreciated. Thanks and have a good one!

1 Answer

Steven Parker
Steven Parker
220,695 Points

It's not quite clear what you are shooting for (a wireframe or other mock-up would help), but floats are notoriously difficult to manage.

A newer technology that gives far more control is flexbox. Removing the floats and adding this (no changes to the HTML) should provide an example:

.column1, .column2 {
  display: flex;
  align-items: center;
}

.fig-left, .fig-right, .column1 p, .column2 p {
  flex: 1;
}

.fig-right {
  order: 2;
}

.column2 p:first-of-type {
  order: 1;
}

You can get even better results by refactoring the HTML and CSS specifically for flexbox. Plus, you can re-arrange the layout if it's not what you intended.

Some of the courses here cover flexbox in detail. Plus, there are some really fun (and free) additional learning resources for flexbox:

Hey Steven hows it going, thanks for responding but I already figured this one out I wanted to use floats instead flexbox just to have practice with it. Thanks for the links I'm definitely going to use them.

Steven Parker
Steven Parker
220,695 Points

Enjoy those, I found them a lot of fun.

And there's a few ways you can let the community know when you no longer need an answer to a question:

  • if it has one or more good answers, mark one as "best answer"
  • if none of the answers are particularly good, put "[Solved]" in the title
  • if it has no answers at all you can delete it

Happy coding!