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

Activate the initial tab in JQuery UI accordion upon initialization

Hello, I have implemented a simple sidenav menu on my website. It consists of parent items and child items structured according to the h3 > div format as suggested by JQuery's documentation. My challenge now is to automatically open the "active" tab ...

javascriptjqueryhtmlopencart

Using JavaScript variables within an HTML tag

I am attempting to embed a JS variable into HTML tags, but for some reason the movie is not loading. Here is the code I am using: var filmLocation = "images/main.swf"; <script>document.write('<PARAM name="movie" value="' + filmLocat ...

javascripthtml

Issue with internal URI directory structure affecting SEO mod_rewrite

I recently implemented a mod_rewrite rule on my website that transforms example.com/en/about/topic into example.com/en/view.php?p=pages/about/topic.php The specific rule I used is: RewriteRule ^en/([a-zA-Z0-9/]+)$ en/view.php?p=pages/$1.php In view.p ...

htmlregex.htaccessmod-rewriteseo

Tips for aligning and emphasizing HTML content with audio stimuli

I am looking to add a unique feature where the text highlights as audio plays on a website. Similar to what we see on television, I would like the text to continue highlighting as the audio progresses. Could someone please provide me with guidance on how ...

javascripthtmlcssaudio

The slider thumb is not showing up properly on Microsoft Edge

Hey there! I'm experiencing an issue with the range slider's thumb display in Microsoft Edge. It appears to be positioned inside the track rather than outside as intended. Take a look at this snapshot for clarification: https://i.stack.imgur.co ...

javascriptjqueryhtmlcss

The ng-include directive is having trouble finding the partial HTML files

I've been working on setting up a basic tabset with each tab pulling content from a separate partial view with its own controller. To test everything out, I created three dummy HTML files with simple text only. However, I'm having trouble getting ...

javascripthtmlangularjsasp.net-mvcangularjs-ng-include

Guidelines for showcasing a map on my website with the option for users to select a specific country

Is there a method to showcase a global map on my site and let the user select a country to receive relevant information? I am aware of embedding Google Maps, however, it includes unnecessary controls like zooming which I prefer not to inconvenience the us ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

The debate over website background images: balancing size and speed

Has anyone experimented with background images and their impact on web design? Typically, backgrounds are designed to repeat in either the x or y direction, or both. For example Consider a gradient background that repeats horizontally. If the gradient i ...

htmlrenderingbackground-image

Color-matching cells must be positioned in the same column within the gridbox consecutively

In my current project, I am dealing with a large number of sections. Each section contains one or two rows with columns ranging from 2 to 15, all of equal width. The cells of the same color are placed in the same column, and the layout looks like this: To ...

htmlcssflexboxgrid-layout

Mastering Bootstrap: Achieving flawless column stacking in succession

I am currently integrating bootstrap into my existing HTML code, but I only require it in two specific sections to avoid rewriting the entire code. Everything looks fine on my 1080p screen as intended. However, when I resize the screen slightly The titl ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

When utilizing CKEDITOR, the default TEXTAREA is obscured, and CKEDITOR does not appear

I am trying to incorporate CKEDITOR into my project. I have added the ckeditor script in the footer and replaced all instances of it. <script src="<?= site_url('theme/black/assets/plugins/ckeditor/ckeditor.min.js') ?>" type="text/javasc ...

javascriptjqueryhtmlcssckeditor

Switch between showing and hiding a div by clicking on an image

Currently, I am experimenting with the toggle div function and utilizing images as triggers for toggling. For instance, when a div is closed, an image of a "plus" sign indicates to the user that it can be expanded, and vice versa for compressing the div. T ...

javascripthtmljqueryjquery-uijquery-events

What steps should I take with my Android PWA manifest and service workers?

I created a web application that I want to prompt Android users to download when they visit. To build my service workers and manifest, I utilized PWA Builder which can be found at Now that I have the manifest file ready, should I simply upload it to the r ...

javascriptandroidhtmlprogressive-web-apps

The Elusive Solution: Why jQuery's .css() Method Fails

I am currently facing an issue with my code that utilizes the jQuery .css() method to modify the style of a specific DIV. Unfortunately, this approach does not work as expected. To illustrate the problem, I have provided a simplified version of my code bel ...

javascriptjquerycss

I could really use some assistance with this project for my friend

Whenever I click on the image, it only displays two out of the three possible alerts. How can I make it show all three? Here's my code: <!DOCTYPE html> <html> <head> </head> <body> <img src="http://www.build ...

javascripthtml

Top method for passing props from child to parent React component

I am facing a challenge with passing data from child to parent components in React. I have an array that I need to save in my database, and I have set up a Parent component (AuthenticationPage.js) and a Child component (SignupForm.js) for this purpose. The ...

javascripthtmlnode.jsreactjs

How can you utilize CSS grid to position an alternate symbol alongside ordinary text?

Does anyone have suggestions on how to align an "alt symbol" with "regular text"? I'm struggling to center both elements without resorting to hacky solutions. Currently, I am using CSS grid, but I am open to exploring other solutions that are easy an ...

htmlcsscss-gridcentering

Incorporating photos within the layout of a Twitter Bootstrap grid

Looking to showcase images like the ones found here: https://i.stack.imgur.com/eD4GD.jpg These images are original and come in various sizes. I want a hover effect that includes blur, fogging effects, and text placed in the middle of the picture. Check ou ...

htmlcssimagetwitter-bootstrap

Apps created with PhoneGap will maintain the original sizing of web pages and not automatically resize for display on Android devices

After successfully porting my web-based tool to Android using PhoneGap from my Github repository, I encountered an issue with the display on Android devices. The app loads up too big for the screen, forcing me to constantly scroll around to see and access ...

javascriptandroidresizephonegap-buildhtml

The desired hover effect on the navigation bar is not functioning properly

I have successfully created a hover effect for my navigation bar and the list inside it. However, I am facing an issue where the box shadow effect is only appearing in a small area when hovered (see image below). My goal is to extend the shadow effect to ...

htmlcss