Position the div within a flex container to the right side

How can I position the album cover div to the right within the card? I attempted using the align-self: end property, but it did not work. Can someone please assist?

.card {
  border: 1px red solid;
  width: 450px;
  height: 150px;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
}

.image {
  width: 150px;
  height: 150px;
  align-self: end;
  border: 1px solid green;
}
<div class="card">
  <div>
    <div>Music controls</div>
  </div>
  <div class="image">Album Cover</div>
</div>
htmlcss

Answer №1

To style your card, you can include the following CSS code and add justify-content: space-between;:

.card {
  border: 1px red solid;
  width: 450px;
  height: 150px;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.image {
  width: 150px;
  height: 150px;
  align-self: end;
  border: 1px solid green;
  float: right;
}
<div class="card">
  <div>
    <div>Music controls</div>
  </div>
  <div class="image">Album Cover</div>
</div>

Answer №2

When working with Flex, it's important to understand the two main axes. To align the album cover to the right along the main axis, you can utilize the justify-content: space-between; property. This will result in your music controls and album cover being expanded, with items evenly distributed on the line. The first item will be positioned at the start line, while the last item will be at the end line. For more information on Flexbox, you can refer to this resource.

Answer №3

  • To enhance the styling of the music controls, I introduced a new class with a flex-grow value of 2 and an align-self value of flex-start.
  • Following that, I set the .image class to have an align-self value of flex-end.
  • Lastly, I eliminated the fixed width and height specifications from the image element.

Best of luck!

.card {
  display: flex;
  flex-direction: row;
  background-color: #005792;
  width: 450px;
  height: 150px;
  border-radius: 5px;
  overflow: hidden;  
}

.music-controls{
  display: flex;
  flex-grow: 2;
}

.image {
  display: flex;
  flex-grow: 1;
  background-color: #fd5f00;
}
<div class="card">
  <div class="music-controls">
    <div>Music controls</div>
  </div>
  <div class="image">Album Cover</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

Unusual CSS behavior discovered while implementing horizontal scrolling navbar with overflow-x

I've been working on a navbar that will scroll horizontally when it exceeds the width of its parent container. It features a bottom border with a different color for the active link. Using a negative margin to overlap them works well, but as soon as ...

htmlcss

What is the best way to position an image in the center for mobile screens?

Struggling to center an image for mobile devices, I have successfully done so for tablets and regular desktop devices. However, I am facing challenges in editing the code to ensure full responsiveness for mobile devices. Additionally, there is excess white ...

htmlcssmobile

Video background with alternate image for touchscreen devices

Check out this website! The background video is functional on desktops. On smaller screens, an image is shown instead using CSS display property. However, what should be done for touch screens like iPads, which are not exactly small? Here's the code ...

htmlcssvideotabletfallback

Can you have two onclick events triggered by a single Div? (ASP.NET / HTML)

I am currently working with Div's and facing a challenge of handling 2 events with just one Div-Click.. I wanted to use both onclick="" and OnClientClick, but it seems that when using a Div, I cannot make use of OnClientClick. Can anyone provide me ...

asp.nethtml

Issue with AJAX MVC HTML: jQuery value is not blocking API call

Upon clicking a button, I am triggering a web API call using AJAX. My form is utilizing JqueryVal for form validations based on my viewmodel data annotations. The issue I am facing is that when I click the "Listo" button in my form, it executes the API ca ...

javascriptjqueryhtmlajaxasp.net-mvc

Is it possible to adjust the position of my React button using numerical values (##px) without success?

I'm facing an issue with positioning my button to the right. Despite my best efforts, I haven't been able to move it more than a few positions. In summary, here are the scenarios I've encountered while trying to solve this problem: When I ...

htmlcssreactjsbootstrap-5react-button

executing a controller method in AngularJS

Looking to trigger a controller function from a directive tag. Check out this demo: https://jsfiddle.net/6qqfv61k/ When the 'Export to Excel' button is clicked, I need to call the dataToExport() function from appCtrl since the data is ready for ...

htmlangularjstwitter-bootstrap

What's preventing my Angular list from appearing?

I am currently developing an Angular project that integrates Web API and entity framework code first. One of the views in my project features a table at the bottom, which is supposed to load data from the database upon view loading. After setting breakpoin ...

javascripthtmlangularjs

What is the best way to showcase the keys of a Python dictionary in an HTML table with the values of each key displayed as a row under its corresponding table header?

I am currently involved in a django project where I perform data analysis using the pandas library and would like to showcase the data (which has been converted into a dictionary) as an HTML table. This is the dictionary I wish to present: my_dict = { ...

pythonhtmlpython-3.xdjangodjango-templates

Transforming table headers in Rmarkdown ioslides

I am experimenting with creating a custom table format for tables generated using the ioslides_presentation output type in Rmarkdown with Rstudio Version 0.98.1028. However, I'm facing difficulty in modifying the styling of the table headers. Below i ...

cssformattingmarkdownrstudio

Retrieve the Data from Input Fields with Matching Classes and Transmit to a Script Using AJAX Request

I am working on a form that includes multiple input fields: <input type="text" class="date" name="date[]" onkeyup="showHint()" /> <input type="text" class="date" name="date[]" onkeyup="showHint()" /> <input type="text" class="date" name="da ...

javascriptphpjqueryhtmlfrontend

What are the specific constraints for CSS within web components?

<html> <style> body { color: blue; } </style> <body> <h1>Styles!</h1> <p>someone created a very general selector</p> <isolated-stuff></isolated-stuff> </body> <s ...

htmlcssweb-component

The div structure generated through JavaScript appears distinct from its representation in the live DOM

Currently, I am facing a challenge with creating a complex nested Div structure within a JavaScript loop that iterates over JSON response objects from the Instagram API. The main goal is to set the URL for each image within a specific Bootstrap div layout. ...

javascriptjqueryhtml

Guide to counting the number of image tags within a parent div and selectively removing them starting from a specific position

My dynamic image tag <img> is generated inside a div from the database using fetching. Here is how my HTML looks: <div class='forimgbox'> <p class='palheading'>Pals</p> <img src='userpic/2232323.p ...

javascriptjqueryhtmlcss

Converting the length attribute of a table to a string does not yield any

After grappling with this bug for some time now, I've come up empty-handed in my search for a solution online. Expected Outcome: Upon pressing the create row button, I anticipate a new row being added at the bottom of the table. This row should cons ...

javascripthtmlhtml-table

Guide to modifying the behavior of a dynamic dropdown menu

Jquery: $('body').on('change', '.combo', function() { var selectedValue = $(this).val(); if ($(this).find('option').size() > 2) { var newComboBox = $(this).clone(); var thisComboBoxIndex ...

jqueryhtmlcombobox

What steps do I need to follow in order to replicate the layout shown in this

I am struggling with creating a layout in CSS that resembles the one shown in this photo: enter image description here Here is the HTML structure I have, but I can't figure out how to style it properly. <ul class="list"> ...

htmlcsslayout

Showing a DIV multiple times with an additional text field in HTML and JS

As someone new to development, I am facing a requirement where I need to create a form with a dynamic field that can be added or removed using buttons. When the user clicks on the Add button, another field should appear, and when they click on Remove, the ...

javascriptphphtml

Converting an HTML table into a visual image

I've encountered an issue. My task involves transferring an HTML table to a PDF using fpdf. Is there a way to transform an HTML table into an image (via URL link)? ...

phphtmlfpdf

I am experiencing an issue where tapping on the Status Bar in MobileSafari is not functioning correctly on a specific

I am struggling to troubleshoot this problem with no success so far. The HTML5 JavaScript library I'm developing has a test page that can display a large amount of output by piping console.log and exceptions into the DOM for easy inspection on mobile ...

javascriptioshtmlsafarimobile-safari