0

I'm trying to eliminate white space below a division which I am floating to the right.

My intent is to define a division which I can place anywhere on a page and have it float to the right. A button will expand the division - increase it's height and width - to allow the division to be read. I've left out all of that processing to simplify the examples.

I've got it floating right - - it was simple to do, just code float: right; using CSS. The problem is that if I do not specify a height for the division, I get extra white space below the division. If I set the height so that there is no white space under the division, the button extends below the division's border.

Go to http://www.bobnovell.com/sideboxproblem.html for a page with examples.

Bob

Matt Gibson
  • 37,886
  • 9
  • 99
  • 128
BobN
  • 177
  • 3
  • 11
  • setting height: 100% on the floated division causes no change in the results. – BobN Feb 15 '14 at 23:51
  • I don't see how the issue on the page you link to applies to this problem. What changes to the code on the example page would be made to take that issue into consideration. – BobN Feb 15 '14 at 23:55
  • The above comments are in response to the answer posted by Zach Saucier, sorry for any confusion. – BobN Feb 15 '14 at 23:57
  • It appears that Zack deleted his answer - I wasn't aware you could do that. – BobN Feb 16 '14 at 00:10
  • TLindig suggested (in chat) using a negative bottom margin and that works. I set it to -4px and the extra white space is removed. I also set left margin to 4px and left padding to 4px to better format the entire thing. – BobN Feb 16 '14 at 01:18

1 Answers1

0

You got the space, because the div with floating right is more height than one line of text. So it takes two lines.

If the div should stay on his on line, wrap the text in a new div and set clear=both on it.

Here is an example: http://jsbin.com/hujax/1/

Update follow the conversation in comments:

If you do not want change the markup, you could use position:ablsolute on your div and position it with top:1em (or what ever you want) and right:0. Also the container of the text and headline need the style: position:relative.

here is and example: http://jsbin.com/hujax/4/

update

with negative margin-bottom you can reduce the needed height of your div.

http://jsbin.com/hujax/3/

TLindig
  • 48,010
  • 3
  • 28
  • 31
  • THe floated div is not displaying two lines, in the div. The problem is the extra space underneath the div. Look at both examples. The floating div is exactly the same expect for one has height: 18px and the other has no height specified. Your example would require that I code a division before and after each box. The intent is to merely to insert a floating division at any point on a page without having to change anything already on the page. – BobN Feb 15 '14 at 23:59
  • OK, I say it with other word. the div is heiger than one line of text. so it do not fit in one line. therefore the text do not float under the div. – TLindig Feb 16 '14 at 00:01
  • Than you could use: position:absolute. here is an example: http://jsbin.com/hujax/2/ – TLindig Feb 16 '14 at 00:04
  • Why do you say the division is higher than one line of text - are you saying it because the division has borders? Taking the borders off the second example causes no change and if I shrink the button to less than the height of the text, it still has extra white space below the division. – BobN Feb 16 '14 at 00:06
  • Could you change your example using position absolute to have a line of text under the division? It currently is formatted such that there is no line of text below it to see if your suggestion works in the intended method. – BobN Feb 16 '14 at 00:08
  • It is easier to see the effect of changes if you limit the width of the text by putting in a division with a low width, as I did in my examples. – BobN Feb 16 '14 at 00:13
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/47576/discussion-between-tlindig-and-bobn) – TLindig Feb 16 '14 at 00:17