Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Floating floats inside float?

Floating floats inside float?

Problem

I know the title of the question sounds absolutely weird but I had no idea what else to call it.

First off I have a grid layout where I want my .search-wrapper to be 50% wide and floated right. In my demo on jsfiddle the entire .search-wrapper has a green background color. It's important that this element stays the way it is because it should fit into my grid.

Inside this .search-wrapper I have a searchbox and a button both floated side by side. This is just how I want it to be. So the #search-button should be floated left and the input should be aligned right to it.

However the thing I can't achieve is how to float both - the #search-button and the ´inputto the right inside the outer container.search-wrapper`.

The current status …

The way I'd like it to be … 

Here is a demo of my problem: http://jsfiddle.net/mQSBR/2/ Any ideas on that? Your help is very much appreciated. Thank you!

Problem courtesy of: matt

Solution

See this, if this is the effect you want: http://jsfiddle.net/mQSBR/9/ [EDIT]

div.search { width: 180px; float: right; } /* fix to 180px wide, float to right */

also add:

.search-wrapper {
    min-width: 180px;
}

so the wrapper won't go past the .search div when resizing.

Solution courtesy of: Dexter Huinda

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Floating floats inside float?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×