Is the float floating within another float?

This question may have a strange title, but I couldn't think of anything better to call it.

So, here's the situation: I have a grid layout where I need my .search-wrapper to be 50% wide and floated to the right. In my demonstration on jsfiddle, you can see that the whole .search-wrapper has a green background which is crucial for fitting into my grid design.

Inside this .search-wrapper, there are a search box and a button next to each other with floating properties. The #search-button is floated left while the input should align to the right of it.

However, the challenge I'm facing is figuring out how to float both the #search-button and the input elements to the right inside the outer container .search-wrapper.

The current setup...

The desired outcome...

You can view a demo of my issue here: http://jsfiddle.net/mQSBR/2/ Any suggestions or ideas? Your assistance would be greatly appreciated. Thank you!

csscss-float

Answer №1

To achieve the desired effect, take a look at this example: http://jsfiddle.net/mQSBR/9/ [EDIT]

div.search { width: 180px; float: right; } /* Adjust to 180px wide and float to the right */

Additionally, include the following:

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

This will ensure that the wrapper does not extend past the .search div when resizing.

Answer №2

Check out the solution on 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

Additionally, I suggest utilizing the placeholder attribute instead of overflowing label for better user experience

Answer №3

Here is an example of how you could solve this

.query {
  align: right;
  size: 75%;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why Safari is Not Displaying Drop Shadows on SVG Path Elements in CSS

I implemented an SVG triangle using HTML: path { fill: red; filter: drop-shadow(5px 3px 17px rgb(0 0 0 / 1)); } <svg style="height: 36px; width: 100%; background-color: #EAEAEA ;" viewBox="0 0 436 217" preserveAspectRatio="none" class="Tagline ...

htmlcsssvgsafari

The <link> element in the HTML file referring to the stylesheet {% static 'css/style.css' %} is not functioning properly

I am having trouble aligning text to the center in VS Code when linking CSS to HTML. The 'center-aliend' property doesn't seem to work for me. Can someone point out what I might be doing wrong? I am trying to position the text 'Hello St ...

htmlcssdjango

Having trouble with the clear button for text input in Javascript when using Bootstrap and adding custom CSS. Any suggestions on how to fix

My code was working perfectly until I decided to add some CSS to it. You can view the code snippet by clicking on this link (I couldn't include it here due to issues with the code editor): View Gist code snippet here The code is based on Bootstrap. ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for utilizing FixedHeaderTable - Basic instructions required

After doing extensive research, I stumbled upon this plugin called Fixed Header Tables. Despite following the instructions provided on the main website, I couldn't get it to work. I was aiming to create a table with a fixed top row and left column fu ...

jqueryhtmlcsshtml-tablefixed-header-tables

Position image/icon within navigation bar

I am currently working on a school project to create a webpage, but I am struggling to align an image/icon with the other buttons in the navbar. Despite my efforts to find a solution through Google searches, I have not been able to resolve this issue. Furt ...

htmlcss

The necessity of using Adobe Photoshop for optimizing a Web Template

My interest lies in utilizing web templates, such as the one referenced here:- templete However, within its details tab, it specifies that the following software is required:- Adobe Photoshop CS+ Sublime Text2 or later, Notepad++, Dreamweaver CS5.5+(Co ...

htmlcssdreamweaverphotoshop

How can you make the contents of a <DIV> expand?

Picture a scenario where I have a navigation bar in the header of my web page, consisting of several links. What I want is for these links to expand horizontally to fill the parent container without me having to hard-code based on the number of links. In o ...

htmlcss

Which CSS property is utilized to position the parent level of a menu below the children when they are shown on the screen?

Recently, my Drupal superfish menu has been acting up after updating the module. The issue I encountered was that the children no longer appear above their parent items. Can anyone help me figure out which setting dictates the order in which they are dis ...

css

When I access the website through the LinkedIn app, my CSS styles are getting jumbled up

Is there a way to resolve the problem I'm facing with CSS when accessing the site through the LinkedIn app on iPhone? The issues don't occur on Android. If anyone has a solution, please share. Thank you :) Click Here ...

htmlcssreactjsnext.js

Achieving proper layout in Material-UI Autocomplete by splitting long words

Exploring the Material-UI autocomplete feature for the first time has brought some challenges my way. I am working with usernames, which have a specific length limit but could exceed the space available in the autocomplete view. Upon examining the sandbox ...

cssreactjsmaterial-ui

adjusting dimensions of swf file within html code

I am trying to insert a small speaker icon from the following url: . However, when the flash is loaded, the dimensions of the swf file exceed those specified in the html tag. How can this issue be resolved? <div style="display: inline;float:center;"& ...

htmlcss

Attempting to change the primary color in Bootstrap is ineffective following a button click

I have been attempting to customize the primary color of Bootstrap 5 using SCSS. Everything works perfectly until I click a button that opens an external link. Below is the content of my SCSS file: $primary: #ae217aff; @import "../node_modules/boots ...

javascripthtmlcsssassbootstrap-5

The TextBox will alter its color following an incorrect submission

I am struggling to create a bootstrap form that will change the color of the borders to red after incorrect submission. The issue I am facing is that the textbox always remains in red. Does anyone have any suggestions for setting the textbox borders to red ...

javascripthtmlcssbootstrap-4

Stop the Bootstrap row from automatically adjusting to the height of the tallest child column element, and instead utilize the extra space below the smaller element

My current framework is Bootstrap 5.2. I am aiming to create two columns, each with a col-md-6 class inside a row. You can visualize the layout through this image: . The challenge I'm facing is the inability to add another row with col-md-6 element ...

htmlcssbootstrap-5

setting the child div's margin in relation to its parent div

Here is my HTML: <div class='mainDiv'> <div class='subDiv'></div> </div> This is the corresponding CSS code: .mainDiv { margin-top: 200px; width: 700px; height: 800px; background-color: red ...

htmlcssmargin

The HTML dropdown menu becomes crowded with numerous <li menu items, leading to it wrapping

One issue arises when the number of menu items exceeds the capacity to fit on a single line, causing them not to wrap from left to right onto the second line. The desired outcome is for the second line of the menu to start on the left just like the first l ...

htmlcss

A guide on dynamically adjusting image size in ReactJS

Here is the structure I have: img { width: auto; height: 200px; } .cards { display: flex; justify-content: center; margin-top: 2em; width: 80%; flex-wrap: wrap; } .card { margin: 1em; box-shadow: 0 0 6px #000; ...

htmlcss

Visualizing Data with HTML and CSS Chart Designs

I'm seeking assistance with creating an organization tree in a specific layout. I am having trouble replicating the tree structure shown in the image. I need help generating a similar tree structure where multiple levels are displayed, including ext ...

htmlcsstreevieworgchart

Whenever I hit the refresh button, `$locationprovider.html5mode` seems to deactivate my CSS styling

Things go smoothly as long as I remove $locationprovider.html5mode(true). However, enabling html5mode seems to be causing some troubles. The main issue is that the css styles stop working after page refreshes. Any ideas on what could be causing this and ...

javascriptcssangularjsangular-ui-router

How to align an element in the center using flexbox while considering the width of the display rather than the available

I need help centering an element that is 100px in width on the display. On either side of this element, there are elements that are 300px and 200px wide. I tried using flexbox to achieve this, but I ended up with two empty spaces or flexible-width element ...

htmlcssflexbox