Difficulty achieving proper alignment of div elements through the use of width and float

Trying to align these divs within a bootstrap card is proving to be quite the challenge. While I have successfully formatted the left half, I am struggling to figure out how to properly line up the elements on the far right side. I have been using width percentages to ensure responsiveness, but one element needs to remain fixed due to consistent picture sizes.

<div class="card" style="width:65%;float:left;">
        <h5 class="card-header">Window Latch Black (Small)</h5>
        <div class="card-body clearfix text-center" style="width:100%;display:inline-block;background-color: aqua;">
            <div class="cartimage" style="background-color:red;float:left">
                <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
            </div>
            <div class="carttext" style="height:50%;width:75%;background-color:green;">
               khjg
            </div>
            <div class="cartamt" style="height:50%;width:75%;background-color:yellow;">
                amt
            </div>
            <div class="cartprice" style="height:50%;width:15%;background-color:purple;float:right">
                price
            </div>
            <div class="cartbutton" style="height:50%;width:15%;background-color:pink;float:right">
                button
            </div>
        </div>
    </div>
https://i.sstatic.net/7jkjw.png

https://i.sstatic.net/lNimF.png

htmlcsspositionbootstrap-4

Answer №1

To achieve a total of 100% per row, you should adjust the order and replace 15% with 25%. Additionally, make sure to set a height for the parent container in order to use % height with child elements:

.rounded-circle {
  border-radius:50%;
  vertical-align:top;
}
<div class="card" style="width:65%;float:left;">
  <h5 class="card-header">Window Latch Black (Small)</h5>
  <div class="card-body clearfix text-center" style="width:100%;display:inline-block;background-color: aqua;height:140px">
    <div class="cartimage" style="background-color:red;float:left">
      <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
    </div>
    <div class="cartprice" style="height:50%;width:25%;background-color:purple;float:right">
      price
    </div>
    <div class="carttext" style="height:50%;width:75%;background-color:green;">
      khjg
    </div>
    <div class="cartbutton" style="height:50%;width:25%;background-color:pink;float:right">
      button
    </div>
    <div class="cartamt" style="height:50%;width:75%;background-color:yellow;">
      amt
    </div>


  </div>
</div>

By using Bootstrap V4, you can utilize flex to create your layout efficiently:

.rounded-circle {
  border-radius: 50%;
  vertical-align: top;
}

.cartprice {
  background: red;
  flex-basis: 75%;
}

.carttext {
  background: green;
  flex-basis: 25%;
}

.cartbutton {
  background: blue;
  flex-basis: 75%;
}

.cartamt {
  background: yellow;
  flex-basis: 25%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card">
  <h5 class="card-header">Window Latch Black (Small)</h5>
  <div class="card-body text-center d-flex">
    <div class="cartimage">
      <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
    </div>
    <div class="d-flex flex-wrap w-100" >
      <div class="cartprice">
        price
      </div>
      <div class="carttext">
        khjg
      </div>
      <div class="cartbutton">
        button
      </div>
      <div class="cartamt">
        amt
      </div>
    </div>

  </div>
</div>

Answer №2

When utilizing bootstrap4, it is recommended to avoid using float and instead opt for Flex Utilities classes for grid layout designs. Additionally, it is considered good practice to wrap your divs within wrapper divs.

Try out the Stack Snippet below:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card">
  <h5 class="card-header">Window Latch Black (Small)</h5>
  <div class="card-body text-center p-0 d-flex no-gutters" style="background-color: aqua;">
    <div class="cartimage" style="background-color:red;">
      <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
    </div>
    <div class="d-flex flex-column" style="flex: 2;">
      <div class="carttext col" style="background-color:green;">
        khjg
      </div>
      <div class="cartamt col" style="background-color:yellow;">
        amt
      </div>
    </div>
    <div class="d-flex flex-column col">
      <div class="cartprice col" style="background-color:purple">
        price
      </div>
      <div class="cartbutton col" style="background-color:pink">
        button
      </div>
    </div>
  </div>
</div>

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

Creating styles for different screen sizes including mobile devices, low-resolution desktops, and high-resolution desktops

One of the techniques I'm using involves analyzing both the horizontal and vertical screen dimensions to differentiate between mobile devices and desktops, as well as distinguish high-resolution from low-resolution desktop displays. In order to achie ...

htmlcssmobile

Displaying a JSON array response on an HTML page with JavaScript and jQuery

After receiving a JSON response with data in array format, I need to display that data on an HTML page. In my HTML structure, I have div elements for merchant name, product name, and a remove button. The JSON data consists of arrays containing the same pro ...

javascriptjqueryhtmljson

The issue I am facing is that the Twitter Bootstrap Modal does not close when clicking outside of

Hey there! I'm currently using the agency theme from Bootstrap and have customized its size. However, I've run into an issue where the modal is not closing when clicking outside of it, even though the normal modal from Bootstrap should be closing ...

javascriptjquerycsstwitter-bootstrap

"Need help with resolving issues in my React Bootstrap Navbar? Learn the latest updates on fixing Navbar Brand Collapse here

Having issues with my React.js website navbar created using bootstrap. The menu button doesn't show up when the navbar collapses at a certain point. Can someone spot what's missing in the code below? Tried toggling by following a tutorial, but i ...

htmlcssreactjsnavbarreact-bootstrap

Shut down a Bootstrap modal 5 seconds following the asynchronous submission of a form using Vue.js

As a beginner in JavaScript and Vue, I am currently working on hiding a modal after submitting a form using Bootstrap 5, Vue 2, and Django 3.2. While I can successfully submit the form asynchronously with fetch and clear the fields, I am struggling to clos ...

javascripthtmlvue.jsbootstrap-5

Tips for emphasizing a table row according to its value

I am currently developing a Google web application that involves CRUD data generated from Google Sheets. The search function is working perfectly, but I am trying to enhance it by highlighting specific rows based on the data value in Column 7. For example ...

javascripthtmlcssgoogle-apps-scriptweb-applications

Encountered SyntaxError: An unexpected token has been found while integrating leaflet with flask

Despite adding all necessary scripts and configuring my API_KEY in config.js, I keep getting an error message saying "Uncaught SyntaxError: Unexpected token." I have double-checked my API key multiple times, and it seems to be correct. Here is a snippet f ...

javascripthtmlcss

Tumblr post not automatically playing flash content

I am facing an issue with embedding a flash object on my tumblr blog (Billy's audio player) where I have to click a white play button for the object to work properly. This problem seems to occur specifically in Chrome and Edge browsers, as other websi ...

htmlcssflashembed

Dealing with pesky table cell padding issues in Chrome

Struggling with table cell paddings in Chrome because it appears that if a table cell doesn't have pure text, the padding isn't applied. Here's my code: <table> <tr> <th></th> <th ...

cssgoogle-chromefirefoxhtml-tablepadding

What could be the reason for Internet Explorer pulling styles from the media=print CSS?

The HTML below incorporates a DHTML behavior into a CSS class. Unfortunately, Internet Explorer (specifically version 8 in compatibility mode) does not read the top style exclusively; instead, it also recognizes the @media print. <!--[if IE]> < ...

cssdhtmlhtml-components

Having trouble selecting the text field after adding CSS styling

This problem is puzzling me, as it seems like a simple issue but I can't pinpoint the cause. UPDATE: I have created a fiddle where you can see the problem in action: http://jsfiddle.net/X374V/1/ The form contains a basic text input: <input type= ...

htmlcss

What is the origin of the trailing commas seen in these radio button choices?

After closely examining my radio buttons, I noticed a strange issue - there is an unexpected trailing comma after each option. Strangely, I did not add these commas in the template and I cannot figure out where they are coming from. Initially, I suspected ...

javascripthtmlcss

Contrasts between Flash and HTML5

Now that YouTube has transitioned from flash to HTML5, what are the unique features and functionalities of HTML5 that set it apart from flash? I am also curious to learn a more in-depth and intriguing aspect of HTML5 beyond what can be found through a sta ...

htmlflashadobe

Tips on dynamically changing the position of a div: Utilize absolute positioning within a for loop

Is there a way to extract the position x value of my div and store it in a variable? How do we then iterate over it within a for loop? <div id="object"></div> <style> #object{ position:absolute; width:10px; height:10px; ...

javascripthtmlcss

Material UI - Clear all designs from the slate

Is it possible to completely override all default material-ui styles and implement your own custom style guide for components? This would involve removing all material-ui styles and starting fresh with customized html skeletons. Creating a new theme with m ...

cssreactjsstylingmaterial-ui

How can I use Jquery to loop through each combobox on the page and delete those with a specific class name?

I am currently dealing with a page that contains multiple combo-boxes. Each combo-box has a default option set as empty, which is given the class name 'hide'. This functionality seems to work perfectly in Chrome and Firefox, as the hidden options ...

javascriptjqueryhtml

PHP: The constant ENT_HTML5 is not defined and has been assumed as 'ENT_HTML5'

I encountered the following error message: Use of undefined constant ENT_HTML5 - assumed 'ENT_HTML5' in /blahblahpath/application/models/Post.php on line 12 This error occurred in a basic model that handles some POST input in a forum applicatio ...

phphtmlubuntuazure

What makes CSS Overflow: hidden toggle from working initially to suddenly not working?

There seems to be an issue with the code below - it works fine initially, but as soon as I tweak the height values for .Image, it stops functioning as expected. The test image starts overflowing instead of staying hidden, and no matter how many times I a ...

htmlcss

Some of the picture remains concealed without spilling over

I've been struggling to get my logo to display properly on my website. I have managed to position it, but the image isn't fully visible. Here's a screenshot for reference: http://gyazo.com/1d23c924cdb401fc0cca76b946e57dcb There doesn't ...

cssimage

What is the best way to add a textfield within an image?

Does anyone have a code snippet that can generate a "search box" like the one on www.dx.com? I was shocked to find that searching for "textfield inside image" only yielded results for "image inside textfield". ...

htmlcss