CODEWITHSUNDEEP
htmlcsscss-floatwidth
Ben Carey
Ben Carey

Reputation: 16968

Auto Width with Float right contents

I am trying to align a span to the right of an a element without pushing it onto another line and without manually setting the width of the containing div.

I have tried all sorts of combinations of white-space,position,float,text-align etc, but I simply cannot get this to work.

Here is an example of the issue:

http://jsfiddle.net/QgzbY/2/

Notice the 'Ctrl+Shift+S' is on the line below 'Save Document As', I want this to be on the same line, aligned to the right like the line above. In other words, it needs to increase the width on the containing element in order to fit the shortcut text.

Question in short: How can I float an element to the right of a parent element, whilst always keeping the contents on one line?

If this cannot be achieved using CSS, then please don't waste your time helping me with the Javascript as there are many more people on the Stack that need help and I can write this part myself. I was just hoping it wouldn't be necessary :-)

Upvotes: 1

Views: 390

Answers (4)

Ben Carey
Ben Carey

Reputation: 16968

Thank you for all of your answers. Unfortunately, it seems that what I was trying to achieve is not possible without manipulating the widths of the menus. I thought this might be the case :-(

Thanks anyway for all your tips

Upvotes: 0

Thirumalai murugan
Thirumalai murugan

Reputation: 5916

Please look at this is this one you need?

<li>
    <a href="javascript:void(0)" class="key-ctrl-s">
       <img src="//beta.example.net/_images/_icons/save-20x20.png"/>
       <span class="text-hint">Save Document</span>
       <span class="shortcut">Ctrl+S</span></a>
    </li>

css

.text-hint{display: inline; float: left;}
.shortcut{display:inline;float:right;}

http://jsfiddle.net/LFkkL/

Upvotes: 0

Andy
Andy

Reputation: 14575

I've added a <p> tag around the "Save Document As" text, and then an ID to certain elements so you know what I am changing/affecting. I only fixed the one line, so you can see what I changed and then fix it for the rest as well.

Basically, you want to remove the float on .shortcut, and display block/float left the img and span inside the <a>. I did this with ID's rather than complex selectors so you can see what I'm doing.

.shortcut {
    float: none !important; // over riding your declaration elsewhere
}

#lol, #lolimg {
    display: block;
    float: left;
}

Demo

Upvotes: 1

defau1t
defau1t

Reputation: 10619

I leveraged the position attributes to achieve something worth looking at. Giving the parent a relative position and its child the absolute posiiton, and then used right values to set it at proper position.

further I also increased the width in the below line

.win_menu li {
    display:block !important;
    float:none !important;
    padding:0 !important;
    margin:0 !important;
    height:20px !important;
    min-width:200px !important;
    white-space:nowrap !important;
    border:1px solid transparent !important;
    z-index:10 !important;
}

DEMO

Upvotes: 0

Related Questions