Databases
StackOverflow2013
Postsdbo
POHow to use CSS float without hiding parts of a DIV
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to use CSS float without hiding parts of a DIV
    primarykey
    data
    text
    <p>When CSS float is used on a DIV, other DIVs that are not floated continue to occupy the space of the floated DIV. While I am sure this is intentional, I do not know how to achieve the effect I am looking for. Please consider this example:</p> <pre><code>&lt;html&gt; &lt;div style="width:400px"&gt; &lt;div style="width:150px;float:right;border:thin black solid"&gt; Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.&lt;/div&gt; Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. &lt;div style="background-color:red;border:thin black solid"&gt;Some sample text&lt;/div&gt; Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. &lt;/div&gt; &lt;/html&gt; </code></pre> <p>If you paste this HTML in a browser (or examine its <a href="http://jsfiddle.net/MS5z5/" rel="nofollow noreferrer">jsfiddle</a>), you'll notice that "Some sample text" is red, and that the red background extends all the way through the floated DIV. While I am sure there is a way to obscure the parts of the red background I don't want, it would still leave the border cropped off and hidden underneath the DIV. Ideally, I want the background color and border to only occupy valid text space, and not creep underneath the floated DIV. Is this effect possible?</p> <p>Please note that I am using the float property not as a replacement for columns, but as a block that will have the text flow around it. So far none of the proposed solutions takes this into account. For clarity, here are some images.</p> <p>This is what I get:</p> <p><img src="https://i.stack.imgur.com/h8Fod.png" alt="Bad"></p> <p>This is what I want:</p> <p><img src="https://i.stack.imgur.com/ZY6uF.png" alt="Good"></p> <p>You'll notice that in both examples, the final text wraps around the floated part as the text reaches the bottom. My second example I can achieve by directly specifying the width of the div containing "Some sample text". I do not want to specify the width. It seems redundant since I want the same width as that of the text around it. But perhaps that isn't possible?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USKirk Woll
    1. USKirk Woll
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to use CSS float without hiding parts of a DIV
      1. USBenAlabaster
      1. VTFavorite
    2. VO
      singulars
      1. POHow to use CSS float without hiding parts of a DIV
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POHow to use CSS float without hiding parts of a DIV
      1. USKarim
      1. VTFavorite
    1. COI want to award a bounty to the answer that explicitely states that it's impossible, because this answer (which closes the debate) doesn't have enough attention, and the response with the maximum votes... doesn't answer the question... although it provides valuable information
      singulars
      1. POHow to use CSS float without hiding parts of a DIV
      1. USSamuel Rossille
    2. CO@SamuelRossille: I'm not sure what I am missing here (the images above no longer show what was desired). I posted some fiddle links under the accepted answer (at present Kirk Woll's answer) that would seem to indicate cletus's answer was correct (the text still wraps under the right float). Perhaps there was different behavior in older browsers (this thread is over three years old).
      singulars
      1. POHow to use CSS float without hiding parts of a DIV
      1. USScottS
    3. CO@ScottS, yeah, sorry. That was back in the bad'ol days where SO didn't have its own internal image hosting solution. I looked to see if I could recover those images, but to no avail.
      singulars
      1. POHow to use CSS float without hiding parts of a DIV
      1. USKirk Woll
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload