Floating / Avoiding text wrapping?

HTML & CSS
1

I saw on a website some where that to fix the text wrapping around a div floated to the left (e.g. when the text drops further down the page than the height of the floated div) you can set a left margin. But this creates a weird overlapping effect; see my attached index.html file…

How should one fix this?

2

You can replace

p {margin-left: 320px}

with

p {margin-left: overflow:hidden;}

3

Thanks for your swift response; I used your suggestion but slightly altered (see the attached file)…

4

I think Ralph meant to say this

p {margin-left: 0; overflow:hidden;}

or just

[FONT=Courier New]p {overflow:hidden;}

[/FONT]

5

Oops, thanks Ray. :blush:

6

Just one thing i’ve noticed is that the text ‘Div floated left’ is not visible???

I made the #left background to be semi-transparent just to make sure the text hadn’t slipped behind the float for some silly reason…



<html>
  <head>
    <title>Clearing Floats Again!</title>
    <style type="text/css">
      
      html, body { 
                   margin:  0px;
                   padding:  0px; }
      
      #wrapper {
                 width:  850px;
                 min-height:  600px;
                 margin:  20px auto;
                 border:  1px solid; }  

      #left {
              float:  left;
              width:  300px;
              margin:  20px 20px;
              min-height:  300px;
              background-color:  rgba(255,255,100,0.3); }

      #wrapper p {
                   margin-left: 320px;
                   margin-right:  20px;
                   overflow:  hidden;
                   text-align:  justify; } 

    </style>

  </head>

  <body>
    <div id="wrapper">
      
      <div id="left">
        <p>Div Floated Left</p>
      </div>
      
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna.
        In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor
        libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.  Lorem ipsum
        dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna.  In nisi
        neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero
        sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.  Lorem ipsum dolor sit
        amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna.  In nisi neque, aliquet
        vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget
        blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna.
        In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor
        libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.  Lorem ipsum
        dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna.  In nisi
        neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero
        sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.  Lorem ipsum dolor sit
        amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna.  In nisi neque, aliquet
        vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget
        blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
      </p>       
 
    </div>

  </body>

</html>
7

There’s no real point using overflow if you want to stick with the left margin too. To add a space to the left, maybe use padding instead:

#wrapper p {
  [COLOR="Red"]padding-left: 20px;[/COLOR]
  margin-right:  20px;
  overflow:  hidden;
}
8

Great! Thank you; I’ve been using this to try and better understand a few things…

9

Yeah, that’s because the #wrapper p {margin-left: 320px} is applying to it too!

So, a bit of reworking needed. Personally, I would wrap that right <p> in a div with a class, since if you have more <p>s there you may be in trouble. Anyway, give that right <p> a class (or better, its container) and target the styles just to the <p>s on the right.

E.g.

<div id="wrapper">
  <div id="left">
        <p>Div Floated Left</p>
  </div>
  <div id="content">
        <p>Main content</p>
        <p>Main content</p>
  </div>
</div>

#content {
    padding-left: 20px;
    overflow: hidden;
}
10

Generally speaking, if you want more space between text and a float then you would increase the margin of the float. It looks like you already have a 20px right margin on the float, if you wanted more space between it and the text you could have increased the floats right margin.