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

Question

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!

Answer 1 · 2019-04-25T17:06:39Z

April 25, 2019 5:06pm

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:

Welcome to the Treehouse Community

Looking to learn something new?

Filibonio Hernandez

Filibonio Hernandez

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

1 Answer

Steven Parker

Steven Parker

Filibonio Hernandez

Filibonio Hernandez

Steven Parker

Steven Parker