How to make each picture and its paragraph sideways instead of vertical?-CodePudding

Both the images and their paragraphs are arranged neatly when being faced vertically, but I'm not sure how to make them face horizontally without messing it up. When I try to do it, the content messes up horribly.

  body {
  font-family: Arial, Helvetica, sans-serif;
}

header {
  background-color: rgb(255, 255, 255);
  height: 600px;
}

.navbar {
  width: 98.5%;
  margin: auto;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  outline: none;
}

.logo {
  width: 160px;
  cursor: pointer;
  margin-right: auto;
}

.navbar .dropdown {
  display: none;
  box-shadow: 0px 0px 2px #000;
  border-radius: 5px;
  left: -30%;
  outline: none;
}

.navbar ul li:hover .dropdown {
  display: block;
}

.navbar>ul>li {
  position: relative;
}

.navbar>ul>li>.dropdown {
  position: absolute;
  top: 1.4em;
}

.navbar .dropdown li {
  display: block;
  margin: 15px;
  text-align: center;
}

.navbar ul li {
  list-style: none;
  display: inline-block;
  margin: 0 20px;
  position: relative;
}

.navbar ul li a {
  text-decoration: none;
  color: black;
  border-bottom: 0px;
}

.navbar ul li a:hover {
  color: teal;
}

.navbar>ul>li::after {
  content: '';
  height: 3px;
  width: 0;
  background: teal;
  position: absolute;
  left: 0;
  bottom: 0px;
  transition: 0.5s;
}

.navbar>ul>li:hover::after {
  width: 100%;
}

button1 {
  list-style: none;
  border: none;
  background: teal;
  padding: 10px 20px;
  border-radius: 20px;
  color: white;
  font-size: 15px;
  transition: 0.4s;
}

footer {
  height: auto;
  background-color: rgb(255, 255, 255);
  padding-top: 0px;
  margin-top: 150px;
}

.socials {
  display: flex;
  align-it

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<div >
  <div >
    <img src="icon.png" >
    <ul>
      <li><a href="http://127.0.0.1:3000/Project/Home.html">Home</a></li>
      <li><a href="#">Products</a>
        <ul >
          <li><a href="#">Healthcare</a></li>
          <li><a href="#">Cosmetic</a></li>
          <li><a href="#">Misc.</a></li>
        </ul>
      </li>
      <li><a href="http://127.0.0.1:3000/Project/AboutUs.html">About Us</a></li>
      <li><a href="#">Register</a></li>
    </ul>
    <a href="#" style="text-decoration:none;">
      <button1>Login</button1>
    </a>
  </div>
  <div >
    <h1>Cosmetics</h1>
    <p> Choose from a wide variety of cosmetics, made to spark the beauty inside you.</p>
  </div>
  <div >
    <div >
      <p>Best Selling!</p>
      <img src="nail_polish.jpg" width="200" height="200">
    </div>
    <div>
      <p><b>Nail Polish</b></p>
      <p>Choose from a wide variety of colors, guaranteed to last long and easily removable.<br>
      </p>
    </div>
    <div>
      <img src="lipstick.jpg">
      <div>
        <p><b>Lipstick</b></p>
        <p> Highly pigmented lip color with a creamy smooth glide during application that leaves lips feeling hydrated, nurtured, and conditioned.<br>
        </p>
      </div>
    </div>
    <img src="brush.jpg" alt="" data-image-width="500" data-image-height="500">
    <div>
      <p><b>12pcs Brush Set</b></p>
      <p> Containing 12 high quality and durable make-up brushes.<br>
      </p>
    </div>
  </div>
</div>
<footer>
  <div>
    <ul >
      <li><a href="https://twitter.com/Clownehara" target="_blank"><i ></i></a></li>
      <li><a href="https://www.facebook.com/profile.php?id=100012662688022" target="_blank"><i ></i></a></li>
      <li><a href="https://www.instagram.com/satrianavito/" target="_blank"><i ></i></a></li>
    </ul>
    <div >
      <p>Copyright Ⓒ 2022 [Muhammad Vito Ananda Satriana]. All Rights Reserved.</p>
    </div>
</footer>

I tried using display flex but the result is messy like the pictures and paragraphs are merged.

CodePudding user response：

since no one is actually helping I will. Firstly there were alot of problems with your html. The number of div containers was not equal that's why whenever you tried the float property it would never work quite right. second tip if you're going to use divs instead of semantic html you should try to add class name on as many important elements you can think. so for containers, cards, card headers etc. or you can just use semantic html. anyway heres the answer code to your problem: HTML:

`<section >
    <h1>Cosmetics</h1>
    <p> Choose from a wide variety of cosmetics, made to spark the beauty inside you.</p>
  </section>
  <section >
    <figure >
      <p>Best Selling!</p>
      <img src="nail_polish.jpg" width="200" height="200">
      <figcaption>
       <h2>Nail Polish</h2>
      </figcaption>
      <article>
              <p>Choose from a wide variety of colors, guaranteed to last long and easily removable.</p>
      </article>
    </figure>
    <figure>
        <img src="lipstick.jpg">
      <figcaption>
        <h2>Lipstick</h2>
      </figcaption>
      <article>
         <p> Highly pigmented lip color with a creamy smooth glide during application that leaves lips feeling hydrated, nurtured, and conditioned.</p>
      </article>
    </figure>
    <figure>
          <img src="brush.jpg" alt="" data-image-width="500" data-image height="500">
      <figcaption>
        <h2>12pcs Brush Set</h2>
      </figcaption>
      <article>
       <p> Containing 12 high quality and durable make-up brushes.</p>
      </article>
    </figure>
  </section>
</div>`

I redid your HTML with proper semantics, hope thats okay, this way it's easier to target specific elements and it helps with SEO and google bots. Just replace your entire cosmetics section with that code and for CSS:

`
  figure, figure *{
  padding: 0;
  margin: 0;
}
figure img{
  float: left;
  margin-right: .5em;
}
figure{
  clear: both;
  padding: 1em;
}`

Just add this bit to you CSS code it's fine, it will mix in perfectly and it will deal with the floating and positioning of your the figure elements. if you have any question hit me up and I'll gladly help you further or explain more if you want.

CodePudding user response：

You can use flex position to align your image with your text. I used this class nail-polish for all your block of image text as a parent element :

.nail-polish {
  display: flex; // Will align your children elements
  margin: 1rem;
  gap: 1rem; // space between your children elements
}

You can also use align-self: center to center your text vertically with your image

body {
  font-family: Arial, Helvetica, sans-serif;
}

header {
  background-color: rgb(255, 255, 255);
  height: 600px;
}

.navbar {
  width: 98.5%;
  margin: auto;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  outline: none;
}

.logo {
  width: 160px;
  cursor: pointer;
  margin-right: auto;
}

.navbar .dropdown {
  display: none;
  box-shadow: 0px 0px 2px #000;
  border-radius: 5px;
  left: -30%;
  outline: none;
}

.navbar ul li:hover .dropdown {
  display: block;
}

.navbar>ul>li {
  position: relative;
}

.navbar>ul>li>.dropdown {
  position: absolute;
  top: 1.4em;
}

.navbar .dropdown li {
  display: block;
  margin: 15px;
  text-align: center;
}

.navbar ul li {
  list-style: none;
  display: inline-block;
  margin: 0 20px;
  position: relative;
}

.navbar ul li a {
  text-decoration: none;
  color: black;
  border-bottom: 0px;
}

.navbar ul li a:hover {
  color: teal;
}

.navbar>ul>li::after {
  content: '';
  height: 3px;
  width: 0;
  background: teal;
  position: absolute;
  left: 0;
  bottom: 0px;
  transition: 0.5s;
}

.navbar>ul>li:hover::after {
  width: 100%;
}

button1 {
  list-style: none;
  border: none;
  background: teal;
  padding: 10px 20px;
  border-radius: 20px;
  color: white;
  font-size: 15px;
  transition: 0.4s;
}

footer {
  height: auto;
  background-color: rgb(255, 255, 255);
  padding-top: 0px;
  margin-top: 150px;
}

.socials {
  display: flex;
  align-it
}

.nail-polish {
  display: flex;
  margin: 1rem;
  gap: 1rem;
}

.vertical-center {
  align-self: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MediCare</title>
  <link rel="stylesheet" href="Products.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<div >
  <div >
    <img src="icon.png" >
    <ul>
      <li><a href="http://127.0.0.1:3000/Project/Home.html">Home</a></li>
      <li><a href="#">Products</a>
        <ul >
          <li><a href="#">Healthcare</a></li>
          <li><a href="#">Cosmetic</a></li>
          <li><a href="#">Misc.</a></li>
        </ul>
      </li>
      <li><a href="http://127.0.0.1:3000/Project/AboutUs.html">About Us</a></li>
      <li><a href="#">Register</a></li>
    </ul>
    <a href="#" style="text-decoration:none;">
      <button1>Login</button1>
    </a>
  </div>
  <div >
    <h1>Cosmetics</h1>
    <p> Choose from a wide variety of cosmetics, made to spark the beauty inside you.</p>
  </div>
  <div >
    <div >
      <img src="https://via.placeholder.com/200x200" width="200" height="200">
      <p>Best Selling!</p>

    </div>
    <div >
      <img src="https://via.placeholder.com/200x200">
      <div class='vertical-center'>
        <p><b>Nail Polish</b></p>
        <p>Choose from a wide variety of colors, guaranteed to last long and easily removable.<br>
        </p>
      </div>
    </div>
    <div >

      <img src="https://via.placeholder.com/200x200" alt="">
      <div class='vertical-center'>
        <p><b>Lipstick</b></p>
        <p> Highly pigmented lip color with a creamy smooth glide during application that leaves lips feeling hydrated, nurtured, and conditioned.<br>
        </p>
      </div>
    </div>
  </div>

  <div >
    <img src="https://via.placeholder.com/200x200" alt="">
    <div class='vertical-center'>
      <p><b>12pcs Brush Set</b></p>
      <p> Containing 12 high quality and durable make-up brushes.<br>
      </p>
    </div>
  </div>
</div>
</div>
<footer>
  <div>
    <ul >
      <li><a href="https://twitter.com/Clownehara" target="_blank"><i ></i></a></li>
      <li><a href="https://www.facebook.com/profile.php?id=100012662688022" target="_blank"><i ></i></a></li>
      <li><a href="https://www.instagram.com/satrianavito/" target="_blank"><i ></i></a></li>
    </ul>
    <div >
      <p>Copyright Ⓒ 2022 [Muhammad Vito Ananda Satriana]. All Rights Reserved.</p>
    </div>
</footer>

</html>