1

I have a problem with a <div> not sizing up the content (which is two <p> elements). The content is floated.

  • I have one <p> tag floated to the left
  • I have one <p> tag floated to the right
  • I have one empty <div> tag below with style="clear:both"

Still, the <div> that contains the whole thing is 3 lines tall - not just 1 as it is supposed to be. What am I missing to make it work?

Anas
  • 5,622
  • 5
  • 39
  • 71
nodesto
  • 505
  • 2
  • 8
  • 24

4 Answers4

1

I prepared a fiddle and it works well - it must be an error in your code. Show us some pieces of it.

Example

Be sure to have no paddings/margins/height/lineheight affect your divs and ps (=reset browserdefaults!). Also the parent div needs to be wide enough to hold both p. Also, if you have non-floated content, the order matters.

Christoph
  • 50,121
  • 21
  • 99
  • 128
  • Thank you - I added the Meyer reset and that fixed the imbalance. – nodesto Aug 21 '12 at 15:44
  • @CSS_maniac you are welcome. If your issue is solved, you can accept an answer by clicking the checkmark to mark the problem as solved to the community. – Christoph Aug 21 '12 at 15:47
1

First, float both <p> tags to the left.

Then, make sure that the <div> has a large enough width to accomodate both of the <p> tags.

You should be able to get them in one line after that.

http://jsfiddle.net/myJ3W/1/

Just to show you why float right might not be a good idea (it really depends on what you're trying to do.. Dialog boxes?)

If you use float: right;, your formatting breaks after the paragraph gets too long:

http://jsfiddle.net/myJ3W/3/

Whereas if you use float: left; for both put them into containers, you can be sure that they will stick within their boxes:

http://jsfiddle.net/myJ3W/4/

Again, really depends on what you're trying to achieve here.

Andrew G.
  • 439
  • 4
  • 10
  • Yeah, you CAN float one to the left, and one to the right, but the best practice way is to float both to the left, then use padding/margins to push the right `

    ` to the right.

     – Andrew G. Aug 21 '12 at 13:56
  • Either way, the idea is to ensure that the `
    ` tag can accomodate both tags. Make sure you take into account the paddings and margins of both `
    ` and `

    ` tags.

     – Andrew G. Aug 21 '12 at 13:58
  • I don't mean to be rude, but that is complete nonsense. State me one example please, why it is "best practice". Or modify my fiddle to achieve the exact same result with only one type of float. – Christoph Aug 21 '12 at 14:01
  • Because it doesn't render properly on earlier ie's http://stackoverflow.com/questions/2879185/float-right-is-not-working-in-ie-7-but-works-in-ff-ie8 – Andrew G. Aug 21 '12 at 14:06
  • 1) please take a look my fiddle in IE7...everything fine as it should. I can see no quirks. 2) you need to save the fiddle first. – Christoph Aug 21 '12 at 14:11
  • Now you have 0) more markup 1) fixed width 2) the right p easily breaks 3) need to adjust the layout in 2 places if you need to refactor. All that to just use one float which has no advantage over using both directions. – Christoph Aug 21 '12 at 14:15
  • 0) Didn't touch the markup. 1) it's % width of the containing `
    ` box. 2) won't break if you don't add padding into `
    `; in fact I think this depends on OP's purpose. 3) Little refactoring needed with SASS; just change variables. 4) Not saying your solution doesn't work, just providing an alternative and one which I was aware of from previous articles about float right. It seems to work ok now, perhaps it shows up only in more obscure/specific cases.
     – Andrew G. Aug 21 '12 at 14:23
  • 0) i meant css 1) even if it's %, it's a fixed width and is restricting especially in cases with very dynamic content. Consider the left column having 2 words and the right column having 3 sentences. Now your left column still has 85% width... 2) it broke in your example - the words wrapped in my browser 3) nobody was talking about sass and even if - it's still more effort 4) not saying your solution is wrong, it's just making things unnecessarily complicated. – Christoph Aug 21 '12 at 14:35
  • For point 2) http://jsfiddle.net/myJ3W/2/ Your solution is cleaner, and it's definitely the intuitive and perhaps semantic way of doing it. This solution is a hack which came up to accomodate quirks in some older browsers. It'll definitely be less and less relevant as older browsers phase out. – Andrew G. Aug 21 '12 at 14:42
1

I believe <p> elements have a default margin, try setting margin to 0px, and that may remove the the spacing.

WebDevNewbie
  • 1,833
  • 1
  • 13
  • 17
-1

Is there enough space in the outer most <div> so that each <p> is a single line? If not, one will break down below the other. In addition, your clear both <div> will have full line height as well. Here is the style I apply to a class called cb that I apply in those situations...

.cb
{
    clear:both !important;
    float:none !important;
    height:1px;
    line-height:0;
    margin:0;
    padding:0;
}
CoderMarkus
  • 1,118
  • 1
  • 10
  • 24
  • 2
    1) please provide a proof, why clearfix is a "hack". It does NOT invalidate your code. 2) what is `clear:both !important; float:none !important;` meant to do? The `!important` are completely redundant und no-go style and the float is useless too. – Christoph Aug 21 '12 at 14:06
  • ClearFix apply the `clear: both;` on a pseudo element, this sounds for me not like a hack. And you don't need the empty dom element to clear floatings. – Burntime Aug 21 '12 at 14:07
  • Let me restate my previous comment... Many of the implementations I have seen of clearfix utilize one or more CSS hacks for compatibility as only modern browsers support pseudo classes. I am all for the abandonment of old browsers, but depending on the situation and the client, you may need to maintain support. http://modlia.com/float-clearing-solutions, http://stackoverflow.com/questions/10610878/clearfix-class-vs-after – CoderMarkus Aug 21 '12 at 17:06