How to indent around floats

HTML-CSS
1

This does not look like what I intended.

<!-- test-2.html -->
<!DOCTYPE html>           
  <html lang="en">                
    <head>                     
      <meta charset = "UTF-8">    
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Space around left-box</title> 
      <style>
        main {
          max-width: 5.6in;
          border: 2px solid blue;
          margin-left: auto;
          margin-right: auto;
          padding: 1rem;
         }
         h1, h2 {
          padding: 0;
          margin: 0;
         }
         p {
          margin-top: 0;
          margin-bottom: 0
          ;
         }
         #left-box {
          float: left;
          min-width: fit-content;
          max-width: 200px;
          background: #eee;
          font-size: 0.8em;
          padding: .5rem;
          margin-left: 0;
          margin-right: 1rem;
          border: 1px solid #aaa;
          display: grid;
        }
        #left-box ul {
          list-style: none;
          margin-top: 0;
          margin-left: 0;
          padding-left: 0;
        }
        .text-block {
          display: block;
          border: 1px solid red;
          margin: 0.5% 3% 0 10%;
        }
      </style>
    </head>  

    <body>                
      <main>
        <h1>How can I get the same indentation around a "float; left"? </h1>
        <p>The &lt;div id="left-box"> floats to the left. There is a 1rem padding for the content of &lt;main>. </p>
        <div id="left-box">
          <ul>
            <li><a href="#sec1">Section 1</a></li>              <li><a href="#sec2">Section 2</a></li>
            <li><a href="#sec3">Section 3</a></li>
          </ul>
        </div>
        <section id="sec1">
          <h2>Section 1 &lt;h2> align to the left.</h2>
          <div class="text-block">
            <p>The text in this section is inside <code>.text-block {display: block; margin: 0.5% 3% 0 10%; border: 1px solid red;}</code>. I want this to be indented like that seen in section 2 below. However it buts up against the left box.</p>
            <p>Ideally, the first letter of the paragraph would align below the "o" of "Section" and other lines would start there until they could go below the "left-box."</p>
          </div>
        </section>

        <section id="sec2">
          <h2>Section 2 &lt;h2> aligns in the left left.</h2>
          <div class="text-block">
            <p>Notice the exaggerated indentation of this paragraph. It is inside the same class="text-block" as the paragraph in Section 1 above. </p>
          </div>
        </section>

        <section id="sec3">
          <h2>Section 3 &lt;h2> also aligns in the left left.</h2>
          <div class="text-block">
            <p>Thank you for taking the time to read this and for teaching us.</p>
          </div>
        </section>
      </main>
    </body>
  </html>
2

I’m not really sure what you are asking or what layout it is you are trying to create.

float should be used to float text content around an element, that is its purpose.

You do not need to use it for layout, use flexbox/grid. If you want the navigation and section to be side by side put them inside a container and use flebox or grid to create a two-column layout.

If you want sec1 to be below the floated element you have to clear it clear: left but then I’m also not sure why the navigation is floated.

3

Thank you, @lasjorg .
I hope this shows what I to create. Of course this indentation is very exaggerated, My attempts to do this with grid have not worked.
Consider that we don’t know how many links will be in the “left-box” or how big the content of the sections will be.

indent
indent715×534 154 KB

This is what I am trying to create. The first three lines under the Section 1 <h1> are indented the same as the other sections.
Again, Thank you.

4

I don’t really understand the layout you are going for.

If you just want to indent the first line you can use text-indent.

If you want to push the paragraph you can use margin or padding left.

If you want the shape to guide the text shape-outside is an option although I doubt it would work with the layout as it is now.

I don’t understand what you mean by “the same as the other sections”. The indentation you have is not lining up with anything as far as I can tell.

5

Thanks again, @lasjorg .
The easiest way to see what I want might be to change the " float: left;" to " float: right;" in #left-box .
See how the text wraps around the #left-box (now really right-box)?
I want to see the same with #left-box on the left.

All <h?>'s line up against the padding of .
The .text-block {margin: 0.5% 3% 0 10%;} moves all content so that everything is offset under each <h?>.

The content of #left-box and each .text-box can change in size. At times there may more than one against the #left-box.

I will try the margin / padding outside of the .text-box. I have read the link to LogRocket. I doubt that will work as the <h?>s would not be separated from the text.

6

@lasjorg Lasse, I tried the above without success. It is as if #left-box is on top of the paragraph and any margin or padding relates to s border, not #left-box.
Is there a way to capture the width of #left-box? At that line of text?
If so, I would try p { margin-left: calc(that-width + something); }

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.