4 replies [Last post]
boxofgeese
boxofgeese's picture
Offline
newbie
Last seen: 2 years 41 weeks ago
Timezone: GMT-4
Joined: 2013-06-26
Posts: 3
Points: 4

Hey everyone! Thanks in advance for your help. I've been a long time lurker and I finally have an issue I couldn't solve by just searching the forum...

I'll try to make this as clear as possible. First, a brief description..
I have one big div about 700px wide that is the main body of my site. INSIDE that div, on the right side, I have three small 200px-wide divs floated, one on top of the other, starting right at the top of the div. The main body of the big 700px div is just text with the occasional image, so as it is now, all the text just fills up the left side of the screen, until it overflows past the right-floated mini-200px-divs, and continues on filling up the whole page.

Fine and dandy so far.

My problem arose when I wanted to add a miscellaneous picture to one of my posts, and I wanted text to wrap around it. Here's where the weird part happens...I floated this picture left, but it seemingly won't appear any higher up than that 3rd right-floated mini-200px-div. I checked my clears to make sure nothing is clearing any left floats.

Here are some more specifics, and my workflow, so to speak (much abbreviated for the sake of keeping this post short):

<BIG OL' 700px DIV>
 
<mini-200px div #1> (in its attributes, it has float:right and clear:none) <end of mini div>
<mini-200px div #2> (in its attributes, it has float:right and clear:right, in order to appear beneath mini #1) <end of mini div>
<mini-200px div #3> (in its attributes, it has float:right and clear:right, in order to appear beneath mini #2) <end of mini div>
 
<p> Blah blah blah, a lot of text, this displays at the top of the page, filling up the space left by the right-floated mini-divs</p>
 
 
<HERES THE TROUBLE IMG src> (in its attributes, it has float:left and clear:none - so based on the other floats and clears, there should be no problem with this image floating right where I place it! But when I try it, it seems to be "pushed down" so its top margin is perfectly aligned with the top border of mini-div #3 [and size isn't an issue. the image is small so it can easily fit in the space on the left])
 
 
<p>Here's the text that is supposed to wrap about that image. The text does indeed wrap, but the image seems to be restricted from moving above the 3rd mini-div </p>
 
 
</END OF BIG OL 700px DIV>

My site is pretty big and code-intensive, so I figured this would be a better approach than having you guys stare through huge amounts of code. If need be I can be more specific though. I don't know if this is violating some basic rule of CSS and my brain is just totally overlooking it. I checked EVERYTHING. There's no dumb mistakes like missing brackets or misspelled codes, there are no additional floats or clears that should get in the way of this... what the heck?

Thanks guys!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 32 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Clear is problematic

The clear property is not naturally restricted to the element to which you apply it. I can see in my mind what's happening, but I haven't been able to put it into words for you. I hope my code will be sufficient.

When presenting a minimal test case, it is easier for us if you post code we can paste into our text editors and use. Your problem statement is good, it just needs to be separated from the code. I've edited it, and think it's what you intended. Below your code is the way I would approach the issue. For examples of clearing/enclosing/containing float elements, see enclosing float elements.

Study the methods I use. Notice that I use the div element to aggregate groups of elements. This allows us to apply styles to the group as a whole, instead of treating each particular separately. That's why it's called cascading style sheets. I think this must be one of the more difficult things to get your mind wrapped around.

<!DOCTYPE html>
 
<html>
<head>
  <meta content="text/html; charset=utf-8"
        http-equiv="Content-Type">
 
  <title>test document</title>
  <base href="#">
  <style type="text/css">
/*<![CDATA[*/
 
  html, body {
    font: 100%/1.5 sans-serif;
    margin: 0;
    }
 
  div {
    border: 1px solid black;
    padding: 5px;
    }
 
  #bigun {
    margin: 1em auto;
    width: 700px;
    }
 
  .mini1 {
    float: right;
    width: 200px;
    }
 
  .mini2 {
    float: right;
    clear: right;
    width: 200px;
    }
 
  #trouble {
    clear: none;
    float: left;
    }
 
  hr {
    clear: both;
    }
 
  #bigun2 {
    margin: 1em auto;
    overflow: hidden;
    width: 700px;
    }
 
  #skinnycol {
    float: right;
    width: 200px;
    }
 
  #trouble2 {
    float: left;
    }
 
  /*]]>*/
  </style>
</head>
 
<body>
  <div id="bigun">
    <h1>Test case</h1>
 
    <div class="mini1">
      <p>Ut semper condimentum neque, ut feugiat orci congue sed. Fusce.</p>
    </div>
 
    <div class="mini2">
      <p>Ut semper condimentum neque, ut feugiat orci congue sed. Fusce.</p>
    </div>
 
    <div class="mini2">
      <p>Ut semper condimentum neque, ut feugiat orci congue sed. Fusce.</p>
    </div>
 
    <p>Blah blah blah, a lot of text, this displays at the top of the page,
    filling up the space left by the right-floated mini-divs</p><img alt=
    "[A drawing of the IM wizard logo]"
         id="trouble"
         src="imlogo.gif">
 
    <p>Here&#39;s the text that is supposed to wrap about that image. The text
    does indeed wrap, but the image seems to be restricted from moving above
    the 3rd mini-div</p>
  </div><!-- end test case, begin solution -->
  <hr>
 
  <div id="bigun2">
    <h1>Solution</h1>
 
    <div id="skinnycol">
      <div>
        <p>Ut semper condimentum neque, ut feugiat orci congue sed. Fusce.</p>
      </div>
 
      <div>
        <p>Ut semper condimentum neque, ut feugiat orci congue sed. Fusce.</p>
      </div>
 
      <div>
        <p>Ut semper condimentum neque, ut feugiat orci congue sed. Fusce.</p>
      </div>
    </div>
 
    <p>Blah blah blah, a lot of text, this displays at the top of the page,
    filling up the space left by the right-floated mini-divs</p>
 
    <p><img alt="[A drawing of the IM wizard logo]"
         id="trouble2"
         src="imlogo.gif"> Here&#39;s the text that is supposed to wrap about
         that image. The text does indeed wrap, but the image seems to be
         restricted from moving above the 3rd mini-div</p>
  </div>
</body>
</html>

Don't hesitate to ask for clarification if you need it.

cheers,

gary

AttachmentSize
imlogo.gif 12.38 KB

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 32 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Addendum

It doesn't particularly matter to the solution, but I moved the image to within one of the p elements. The specs don't define how adjacent inline and block elements should interact1. Most times, now, there is no problem, but I consider it to be a Best Practice to not have inline and block elements as siblings.

cheers,

gary

1 I suspect this is at root the reason no browser can pass the test suite for {display: run-in;} (css3, was dropped in css2.1). Firefox has not implemented it except for test purposes, for this reason.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

boxofgeese
boxofgeese's picture
Offline
newbie
Last seen: 2 years 41 weeks ago
Timezone: GMT-4
Joined: 2013-06-26
Posts: 3
Points: 4

Thanks for your reply!! I

Thanks for your reply!! I think that might be my best bet - grouping all those right floats into one column. I'll try it and I'll post to let you know if it worked.

By the way, if you want to see the actual site/problem in action, go here:
www.diazepamband.com

It's right on the main page, the first post at the top.

Thanks again! I'll let you know if it works.

boxofgeese
boxofgeese's picture
Offline
newbie
Last seen: 2 years 41 weeks ago
Timezone: GMT-4
Joined: 2013-06-26
Posts: 3
Points: 4

I'd like to thank you for

I'd like to thank you for your help. It worked like a charm. Such an easy solution. I definitely had one of those "face-in-palm" moments.

It's good to know there's a site like this where people are willing to take their time to sift through strangers' code just to help out. Thanks again!!!!