How do I separate a section with an image (float: left;) and a section without images?

Question

body {
  font-family: Avenir;
}

img {
  width: 70%;
  height: 75%;
  float: left;
  margin-right: 10px;
  cursor: pointer;
}

a {
  color: grey;
}

a:hover {
  color: black;
}

.title {
  text-align: center;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>☕️Arrexi's Cafe☕️</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <h1>☕️Arrexi's Cafe☕️</h1>
  <div id="body">
    <h1 class="title">About Us
      <hr>
    </h1>
    <img src="https://dummyimage.com/600x400/000/fff" alt="Arrexi's Cafe!">
    <article id="description">Hello! Welcome to the website of <b>Arrexi's Cafe</b>!<br><br>We are a friendly community which is with many fun bots and an active chat. You can surely chill in our server! <a href="">Join us now!</a></article>
    <h1 class="title">Feedback</h1>
    <hr>
    <h3>Have joined our server, and want to give some feedback?</h3>
    Enter your suggestion in the following box then press "Submit"!
    <br>
    <textarea id="feedback"></textarea>
    <button onclick="submit()">Submit</button>
  </div>
  <script src="script.js"></script>
</body>

</html>

I used these HTML codes to try to make a website, but I want the section of the feedback be under the image.

I want the result be

instead of

Can anyone tell me how to do it?

I currently used some <br>s and a   character to simulate the result that I want

@kian that wont change anything since he changed the floating behaviour by using `float:left`. As long as thats not cleared again even wrapping it in a div wont change anything. — Fabian S., Oct 21 '21 at 07:54

score 1 · Accepted Answer · answered Oct 21 '21 at 07:49

What youre looking for is a so called clearfix: What is a clearfix?

Whats happening?

By using float:left youre actually changing the text float - beginning at the point where you set float.

To restore the regular blockish behaviour you need to clear the float again.

body {
  font-family: Avenir;
}

img {
  width: 70%;
  height: 75%;
  float: left;
  margin-right: 10px;
  cursor: pointer;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

a {
  color: grey;
}

a:hover {
  color: black;
}

.title {
  text-align: center;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>☕️Arrexi's Cafe☕️</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <h1>☕️Arrexi's Cafe☕️</h1>
  <div id="body">
    <div class="clearfix">
      <h1 class="title">About Us
        <hr>
      </h1>
      <img src="https://dummyimage.com/300x200/000/fff" alt="Arrexi's Cafe!">
      <article id="description">Hello! Welcome to the website of <b>Arrexi's Cafe</b>!<br><br>We are a friendly community which is with many fun bots and an active chat. You can surely chill in our server! <a href="">Join us now!</a></article>
    </div>

    <h1 class="title">Feedback</h1>
    <hr>
    <h3>Have joined our server, and want to give some feedback?</h3>
    Enter your suggestion in the following box then press "Submit"!
    <br>
    <textarea id="feedback"></textarea>
    <button onclick="submit()">Submit</button>
  </div>
  <script src="script.js"></script>
</body>

</html>

I wrapped your whole upper part into a div with the clearfix class. Inside that div you change the float behaviour by using float:left on the image.

By adding the clearfix to the div, there will be a after Element which sets clear:both which basically restores regular behaviour so everything after that doesnt float anymore.

Fore more information and some live examples see https://www.w3schools.com/css/css_float.asp, https://www.w3schools.com/css/css_float_clear.asp and https://www.w3schools.com/css/css_float_examples.asp.

Thank you for your answer! I totally understood your example and articles. I will accept your answer very soon because SO is limiting me to wait for a few minutes to accept an answer — ChesterWOV, Oct 21 '21 at 08:00

How do I separate a section with an image (float: left;) and a section without images?

I want the result be

instead of

1 Answers1