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

Floating floats inside float?

Floating floats inside float?


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`.

The current status …

The way I'd like it to be … 

Here is a demo of my problem: Any ideas on that? Your help is very much appreciated. Thank you!

Problem courtesy of: matt


See this, if this is the effect you want: [EDIT] { 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


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