Position an element to the right within a div using the float property

My product page features a range of attributes that can vary from 1 to 4, each sharing a common fieldset class name. I am attempting to position two of the fieldsets side by side and the remaining ones below them in a similar layout. However, achieving this while ensuring that the right fieldsets stay on the correct side within their container has proven challenging for me. You can refer to the image description provided here: https://i.stack.imgur.com/S4kW5.png

Below is the current code snippet:

https://jsfiddle.net/26za63sh/

HTML:

<div class="container">
  <div class="product_attributes  clearfix">
    <div id="attributes">
      <div class="clearfix"></div>
      <fieldset class="attribute_fieldset">
        <label class="attribute_label" for="group_2">Choose</label>
        <div class="attribute_list">
          <select name="group_2" id="group_2" class="form-control attribute_select no-print">
            <option value="81" selected="selected" title="Option #1">Option #1</option>
            <option value="150" title="Option #2">Option #2</option>
          </select>
        </div>
      </fieldset>
      <fieldset class="attribute_fieldset">
        <label class="attribute_label" for="group_6">Choose</label>
        <div class="attribute_list">
          <select name="group_6" id="group_6" class="form-control attribute_select no-print">
            <option value="31" selected="selected" title="Option #1">Option #1</option>
            <option value="56" title="Option #2">Option #2</option>
          </select>
        </div>
      </fieldset>
      <fieldset class="attribute_fieldset">
        <label class="attribute_label" for="group_5">Choose</label>
        <div class="attribute_list">
          <select name="group_5" id="group_5" class="form-control attribute_select no-print">
            <option value="80" selected="selected" title="Option #1">Option #1</option>
            <option value="151" title="Option #2">Option #2</option>
          </select>
        </div>
      </fieldset>
    </div>
  </div>
</div>

CSS:

.container {
  width: 400px;
  height: 200px;
  background-color: gray;
  border: 1px solid #dddddd;
}

fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}

#attributes .attribute_list {
  width: 90%;
}

#attributes fieldset {
  float: left;
  width: 50%;
  padding-bottom: 5px;
}

#attributes fieldset:last-child {
  float: left;
  padding-bottom: 0px;
}

I have attempted adjusting the width of .attribute_list to 100% to achieve my desired result, but it eliminates spacing between the two fieldsets. On the other hand, setting a fixed width poses issues with mobile/tablet display. Any suggestions or recommendations are welcome!

htmlcss

Answer №1

Check out this solution for aligning items in a line and floating them to the right.

.attribute-container{display:inline-block;}
.attribute_fieldset:nth-child(odd) .attribute-container{float:right;}
.container {
  width: 400px;
  height: 200px;
  background-color: gray;
  border: 1px solid #dddddd;
}

fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}

#attributes .attribute_list {
  width: 90%;
}

#attributes fieldset {
  float: left;
  width: 50%;
  padding-bottom: 5px;
}

#attributes fieldset:last-child {
  float: left;
  padding-bottom: 0px;
}
<div class="container">
  <div class="product_attributes  clearfix">
    <div id="attributes">
      <div class="clearfix"></div>
      <fieldset class="attribute_fieldset">
      <div class="attribute-container">
      
      
        <label class="attribute_label" for="group_2">Choose 1</label>
        <div class="attribute_list">
          <select name="group_2" id="group_2" class="form-control attribute_select no-print">
            <option value="81" selected="selected" title="Option #1">Option #1</option>
            <option value="150" title="Option #2">Option #2</option>
          </select>
        </div>
        </div>
      </fieldset>
      <fieldset class="attribute_fieldset">
      <div class="attribute-container">
      
      
        <label class="attribute_label" for="group_6">Choose 2</label>
        <div class="attribute_list">
          <select name="group_6" id="group_6" class="form-control attribute_select no-print">
            <option value="31" selected="selected" title="Option #1">Option #1</option>
            <option value="56" title="Option #2">Option #2</option>
          </select>
        </div>
        </div>
      </fieldset>
      <fieldset class="attribute_fieldset">
      <div class="attribute-container">
      
      
        <label class="attribute_label" for="group_5">Choose 3</label>
        <div class="attribute_list">
          <select name="group_5" id="group_5" class="form-control attribute_select no-print">
            <option value="80" selected="selected" title="Option #1">Option #1</option>
            <option value="151" title="Option #2">Option #2</option>
          </select>
        </div>
         </div>
      </fieldset>
    </div>
  </div>
</div>

Answer №2

The issue arises when the elements within the fieldset are all floating to the left side.

To address this, use the following CSS code to float the inner elements of odd fieldsets to the right:

#attributes fieldset:nth-child(odd) * {
  float: right;
}

View the example on JSFiddle here: https://jsfiddle.net/er_han/Lprh9zqf/

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

Tips for minimizing excess white space in Shiny applications

Encountering an issue with plot output in Shiny. When using standard ggplots, the output is correct without any extra white margins. However, when utilizing the "ggmap" package (which also produces ggplot-type outputs), white margins suddenly appear. (Ple ...

cssrshiny

Ways to center a vertically aligned SVG in relation to text using Bootstrap

After experimenting with bootstrap, I have encountered an issue where I cannot vertically center an inline SVG relative to text. Below is a simplified example showcasing this problem: <!DOCTYPE html> <html> <head> <link rel=& ...

htmlcsstwitter-bootstrapbootstrap-4

Customize the underline color of Material-UI's Input component

Trying to create an input component with a white underline. However, the underline color changes to black when hovering over it. It should remain white. Override the underline class as shown in the demo and instructions below. Despite trying to implement t ...

cssmaterial-uijss

The second post request is encountering an issue where Request.body is not defined

After researching for similar symptoms, I couldn't find a case that matches mine. I have body-parser properly installed and app.use(bodyParser.json()) app.use(bodyParser.urlencoded({extended: true})) configured accordingly. However, when handl ...

htmlmysqlnode.jsexpress

How to align text to the right in an Android TextView using HTML

I need to display some HTML content in a TextView. I am aware that certain HTML tags are not compatible with Android, so I have turned to a third-party library to incorporate bulletpoints and numbered lists. However, I also require support for right alignm ...

androidhtmltextview

The Material-UI table spills out of its designated container

My material-ui table is resizing and scrolling horizontally without issue, but the table element and its contents are overflowing off the right side of the page. Check out this gif to see the behavior: https://i.stack.imgur.com/lXuHj.jpg Additionally, her ...

javascriptcssreactjsmaterial-ui

Using JQuery to toggle a fixed div at the bottom causes all other divs to shift upwards

I'm currently working on a chat feature using node JS, and while the functionality is perfect, I've run into an issue with the CSS aspect of it. The problem arises when we have multiple tabs and clicking on just one causes all the tabs to move u ...

phpjqueryhtmlcssnode.js

Creating a personalized stepper component (using custom icons) using HTML

Seeking guidance on how to achieve a design similar to the image below using HTML and CSS. After conducting extensive research, I have not been able to find a suitable solution. I attempted to modify this answer to fit my requirements, but it did not prod ...

htmlcssangular

What is the best way to ensure that my grid remains contained within its designated area?

I need to incorporate a grid of 16x16 or 64x64 into my layout without it overflowing. I'm considering using flexbox, but unsure of the implementation process. My goal is to have the grid resize based on the container size rather than exceeding its bou ...

javascripthtmlcss

What is the method for passing an element in Angular2 Typescript binding?

Is there a way to retrieve the specific HTML dom element passed through a binding in Angular? I'm having trouble figuring it out, so here is the relevant code snippet: donut-chart.html <div class="donut-chart" (donut)="$element"> ...

htmlangulartypescript

What is the process of adding background color to text?

Is there a more efficient way to style this text without relying on the span tag? I am looking to add a background color to my text. Code: .subject { color: gold; background: gray; } <h2>Some Subjects</h2> <ol> <li style="bac ...

htmlcss

Guide to aligning a fraction in the center of a percentage on a Materal Design progress bar

Greetings! My objective is to create a material progress bar with the fraction displayed at the top of the percentage. Currently, I have managed to show the fraction at the beginning of the percentage. Below is the code snippet: <div class=" ...

htmlcssangulartypescriptangular-material

Using Angular JS to dynamically load an HTML template from a directive upon clicking a button

When a link is clicked, I am attempting to load an HTML template. A directive has been created with the templateUrl attribute to load the HTML file. Upon clicking the link, a function is called to append a custom directive "myCustomer" to a pre-existing di ...

javascriptjqueryhtmlangularjsangularjs-directive

The POST request did not yield an HttpResponse object; instead, it returned None

When I submit a selection from a dropdown form to views as a POST request, and then use this selection to query data from Django, I encounter an issue while trying to map Django models data to Highcharts following this approach. The error message "the view ...

pythonhtmlcssdjango

How to incorporate a JavaScript file into a Handlebars template

I am having trouble receiving calls to my JavaScript file. What could be the issue? Using MVC. Here is the code in view file, file.hbs: <div class="container"> <h2 onClick="test()">Title</h2> {{>list}} </div> <script sr ...

javascripthtmlmodel-view-controllerhandlebars.js

Display a picture retrieved from a POST request using Angular and a Spring Boot backend

Recently, I've been delving into the world of HTTP requests. My latest task involves uploading an image from the client and sending it to the server using a POST request. When testing this process in Postman, everything works smoothly as I receive th ...

htmlangulartypescripthttprequest

Switch to a different webpage based on radio button selections in a PHP script

On my webpage, I have two pictures that act as radio buttons, along with a "proceed" button. However, when I click on the button, it does not redirect to the desired page. Below is the code for my form and PHP processing page: <body> <fo ...

phphtmlhttp-redirectradio-button

OceanWP Theme with a Fixed Navigation Bar

Currently utilizing the oceanwp theme, I'm aiming to create a topbar that vanishes while scrolling and have the menu smoothly transition to the topbar location with some opacity. I attempted the following code snippet: #site-header { position: fixe ...

csswordpress

The error alert must be displayed directly beneath the specific box

When error messages occur in this code, they are displayed through an alert box. However, I would prefer to have the error message appear below the specific text box instead. This means that when I click on the submit button and a field is left empty, the ...

phpjavascripthtml

What is the reason behind the vanishing of the input field while adjusting the

Why is the input field getting cut off when I resize my browser window, even though I'm using percentages? Here is a screenshot for reference: Shouldn't it resize automatically with percentages? Thank you! Below is my CSS code: body { margi ...

htmlcss