Geek Answers Handbook

How to use float CSS without hiding div parts

When CSS float is used in a DIV, other DIVs that don't float continue to occupy the space of the floating DIV. Although I am sure that this is intentional, I do not know how to achieve the effect that I am looking for. Please consider this example:

<html>

<div style="width:400px">

<div style="width:150px;float:right;border:thin black solid">
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.</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

<div style="background-color:red;border:thin black solid">Some sample text</div>

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.
</div>

</html>

If you paste this HTML code into your browser (or examine its jsfiddle ), you will notice that “Some sample text” is red and that the red background extends all the way through the floating DIV. Although I'm sure there is a way to mask parts of the red background that I don't want, it will still leave the border cropped and hidden under the DIV. Ideally, I want the background color and border to occupy only a valid text space, and not creep under a floating DIV. Is it possible?

, float , , . . .

, :

Bad

, :

Good

, , . , , div, "Some sample text". . , , , . , , ?

+5
6

span div , (, ):

<div style="overflow: hidden;">
  <span style="background-color:red;
               border:thin black solid;
               display: inline-block;">
   Some sample text
   </span>
</div>

, . , overflow:hidden div , .

+5

:

<div style="background-color:red;border:thin black solid;overflow:hidden;">Some sample text</div>

overflow: hidden, CSS. CSS-, 5: :

. , , -, . . , .

CSS 2.1 :

,       ,       (,    ", " ",          .

, , " " ", CSS . , ? , . :

  • ( , - ..).
  • , .

- , : : auto " " ", .

+8

, , . : " . , . , , , . ".

( , "", , Googlers .)

+4

float left. , , . .

<html>

<div style="width:400px">

<div style="width:150px;float:right;border:thin black solid">
     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.</div>

     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

<div style="background-color:red; width: 250px; border:thin black solid">Some sample text

     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.
</div></div>

</html>

, CSS, < <

: , , . , . , , . , , , , 400-150 (250 ), " " (250 ).

+2

, :

  • "sample text" div , ,

.

: , span ( ) div ( ). , , , clear: left.

0

, , . . Fiddle

display: table;

:

<div style="background-color:red;border:thin black solid;display: table;">Some sample text</div>

display: block; display: table;, display: table-cell;

: css inline-block vs table-cell

0

More articles:


All Articles