CSS: float within parent with no defined width

Question

Please see the fiddle below to see the code and result:

I am trying to get two divs to float:right within their parent div that doesn't have a defined width. It works if I set a defined width, but as one of the children divs needs to have a variable width, I simply want the parent div to just stretch to fit the children divs. However, as you can see from the fiddle, they don't want to float horizontally for me.

I've tried adding a few different styles (e.g. overflow:hidden) but can't get it to work.

Any and all help is appreciated. Thanks!

My Head Hurts · Accepted Answer · 2011-12-27 00:39:51Z

1

If the problem you are refering to is within the div topProfile then you just need to add float: right to topName.

If this is not the problem then you might have to include an image to help represent how you would like your layout to look.

answered Dec 27, 2011 at 0:39

My Head Hurts

37.7k16 gold badges77 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jstacks Over a year ago

I do have float:right assigned to topName. In regards to what I want to have happen... I'm looking to do something similar to say, Facebook or Twitter. Where they have a profile picture, your name, and a tools dropdown all side by side. The picture/name are within the same div to get them to link and hover the same.

My Head Hurts Over a year ago

Ok, well your float: right is on the anchor tag in your example. Moving it to topName works for me: jsfiddle.net/nnZWB/9

jstacks Over a year ago

Doh. I didn't realize I had the anchor tag there. Thank you!

Will · Accepted Answer · 2011-12-27 00:39:12Z

1

Move the topProfilePic div inside the topName div.

<div id="topName">
    <div id="topProfilePic">    
        <div id="pic"></div>    
    </div>
    <a class="topText" href="name.html">Your Name Here</a>
</div>

http://jsfiddle.net/nnZWB/8/

answered Dec 27, 2011 at 0:39

Will

20.4k7 gold badges50 silver badges48 bronze badges

Collectives™ on Stack Overflow

CSS: float within parent with no defined width

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related