Absolute div's width becomes so small that the text is wrapping

Question

When I make a button I want to make a div that appears when I hover the button, though I have problems with it's width and it's position.

The problem can be seen below in the pictures and in the jsfiddle. When I make something absolute to the relative button, it looks like it's max-width becomes the width of the button. If the button is small, the hover div will also be small. How can I make a normal hover div with a width:auto?

http://jsfiddle.net/ghpc9fwk/

Answer 1

Just add a white-space: nowrap; attribute to prevent the text from wrapping on nearest occasions;)

Here's a working example: http://jsfiddle.net/1revewwm/

I 've also modified the bottom attribute

Answer 2

Not sure if this works for you but you could perhaps use ::before pseudo element to achieve such layout.

.alt-test{    
    background-color:blue;    
    display:inline-block;
    margin:0;
    padding:0;
    position:relative;    
    margin-bottom:20px;
}

.alt-test::before{
    content:"";
    display:block;
    height:10px;
    width:10px;
    background:red;
    position:absolute;
    left:0px;
    top:-10px;    
}

JSFIDDLE

Answer 3

Something like this?

<div class="button">
    <div class="alt">Click here now!</div>
</div>

---

.button{
    width:10px;
    height:10px;
    background-color:red;
}
.alt{
    margin-top: 10px;
    display: none;
    background-color:blue;
    width: auto;
    white-space: nowrap;
}

.button:hover .alt{
    display: inline-block;
}

Updated Fiddle

Answer 4

You can wrap your button and alt container in another div with position: relative;. Example fiddle

HTML:

<div class="wrapper">
    <div class="button"></div>
    <div class="alt">Click here now!</div>
</div>

CSS:

.wrapper {
    position: relative;
}

.button{
    width:10px;
    height:10px;
    background-color:red;
    position:relative;
}

.alt{
    position:absolute;
    background-color:blue;
    display: none;
}

.button:hover + .alt {
    display: block;
}

Answer 5

A simple solution as noted before is to add white-space:nowrap to your alt/caption div, so it stretches until you insert some <br>

Additionally

I would recommend you not to use

bottom: -[something]px

but to use

top: 100%.

this way the button could be of variable height.

I modified your JSFiddle accordingly: http://jsfiddle.net/ghpc9fwk/3/