CODEWITHSUNDEEP
csscss-float
matt
matt

Reputation: 44303

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 container.search-wrapper`.

The current status …

enter image description here

The way I'd like it to be … 

enter image description here

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

Upvotes: 0

Views: 3571

Answers (4)

Nebojša Milivojević
Nebojša Milivojević

Reputation: 196

Here is the solution in the updated jsfiddle

<div class="wrapper search-wrapper">
  <div class="search">
    <form action="/" method="get">
      <fieldset>
         <input type="text" name="s" id="search-box" value="" class="" placeholder="Search this platform …">
            <button type="submit" id="search-button">Search</button>
      </fieldset>
    </form>
 </div>

​

.search-wrapper {
width: 50%;
float: right;
background:green;
margin-top:1em;

}

#search-box {
border: none;
background-color: transparent;
color: transparent;
height: 20px;
float: right;

}

#search-button {
border: none;
background-color: transparent;
color: transparent;
float: right;
background-color:red;
background-position: center -36px;
background-repeat: no-repeat;

}

​

Right align of search box/button

Also, my proposal is to use placeholder attribute of an element instead of overflowing label

Upvotes: 1

Dexter Huinda
Dexter Huinda

Reputation: 1222

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.

Upvotes: 2

Jared Farrish
Jared Farrish

Reputation: 49208

You can do this:

<fieldset style="margin-left: 20%">
  <div class="input-inside-label">

http://jsfiddle.net/userdude/mQSBR/3/

Made a couple of edits to compensate for the overflow-x scroll bar:

#search-button {
    ...
    margin-left: -20px;
    ...
}
.input-inside-label {
    ...
    margin-left: 0;
    width: 70%;
    ...
}

http://jsfiddle.net/userdude/mQSBR/7/

Upvotes: 0

Igor Jerosimić
Igor Jerosimić

Reputation: 13741

You could do something like this

.search {
  float: right;
  width: 80%;
}

Upvotes: 0

Related Questions