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

The website appears to be loading in a unique way on mobile upon the second loading

While developing my personal website, I encountered a bug that occurs when accessing the site on my Android phone using Firefox or Chrome. The issue arises when the page initially loads correctly, but upon refreshing, the layout is displayed differently. ...

javascriptjqueryhtmlcss

What orientation is best for the back arrow to take in a website written in Arabic?

Currently developing a website that supports Arabic language while considering security measures. The browser's back button will terminate the session, requiring users to utilize the on-page back button instead. When incorporating Arabic text, should ...

htmlwebarabic

Removing CSS from an Ajax combobox

When using an Ajax Combobox, I encountered a problem with the background color changing on hover. The combobox is bound to a datasource with specific conditions for defining the background color, but upon hovering over a list item, the color changes. I wan ...

cssasp.netajax

Dynamic styling updates on page refresh in Next.js

There is a strange issue with my styling that I can't seem to figure out. I have a NavBar set to be 20vh in height and an image set to be 100% in width. However, whenever I refresh the page, the NavBar height decreases and the image width increases si ...

javascriptcssreactjsmaterial-uinext.js

Leverage the calc() function within the makeStyles method

const useStyles = makeStyles((theme) => ({ dialog: { '& .MuiTextField-root': { margin: theme.spacing(1), } }, address: { width:"calc(24vw + 8px)" }, })); <div> <TextField id="contact ...

cssreactjsmaterial-uijssinline-styles

Modify the color of the components in Select from Material-UI

After reviewing numerous questions and answers on this topic, I have yet to find a suitable solution for my issue. Seeking guidance from the community for assistance. Utilizing the Select component from @mui/material to showcase the number of records per ...

javascriptcssreactjsmaterial-ui

I'm struggling with organizing my webpage layout using CSS flexbox and CSS grid

Currently, I am working on creating a checkers game using HTML and CSS with the inclusion of CSS Flexbox and CSS Grid for layout design. However, I have encountered an issue where the page is not responsive vertically. When resizing the browser height in C ...

htmlcssflexboxcss-grid

How can we use withStyles to customize the styling of a selected ListItem in ReactJS and Material UI?

I am seeking assistance in changing the style of a specific ListItem, similar to what is demonstrated in this Codesandbox. In the Codesandbox example, a global CSS stylesheet is utilized, but I prefer to implement the changes using the withStyle techniqu ...

cssreactjsmaterial-uijsshigher-order-components

In Firefox, certain scroll positions cause elements to vanish

I've been struggling with a peculiar bug that I can't seem to fix. The issue arises in Firefox when scrolling on a MacBook Pro 2019 15" at 1680x1050 resolution - product elements (not just images) begin to flicker. I have recorded a video of th ...

htmlcssmacosfirefoxdesktop

Regex: Identifying all URLs except for those with ".js" or ".css" included

I am currently working on a project where I need to change all the links in an HTML page so that they are not clickable. However, I am having trouble finding the right Regex pattern for the following condition: href="Any_URL" except for those that contain ...

phphtmlcssregex

The boundary of embedded components

I am looking for CSS code that will allow me to arrange all elements with specific indents, such as placing the first element on the left side of the page, followed by an image with some indentation, and so on. <div class="container-fluid"> &l ...

htmlcss

Centering a div vertically within another div

Can you help me insert the flight duration in the middle-left section of each blue line? I've tried some methods but haven't been successful so far. This is the current layout: https://i.sstatic.net/edOfg.png Example on CodePen HTML structure ...

htmlcssless

Discovering the closest date among the elements in an array

Currently, I am facing an issue while trying to identify the highest date within an array of objects which have varying dates assigned to each one. The code seems to be functioning well when the dates are above January 1st, 1970, however, any date prior to ...

javascripthtmlarraysfunctiondate

The background image is cropped, causing a scroll bar to be added

I've been attempting to add a background image to my HTML using the code below: body { margin: 0; background: url('images/lightning.jpg') no-repeat center center fixed; background-size: cover; -webkit-background-size: cover; -mo ...

htmlcssimagebackgroundbackground-image

PHP comment form failing to process complete field inputs

Having some issues with a PHP comment form on my website. It's not sending all the inputted information from the fields. Any help would be greatly appreciated. This is the HTML code I'm using: <form method="post" action="assets/php/mail.php" ...

phphtmlformscomments

Launch a PowerPoint presentation in a separate tab on your web browser

If you have a link that leads to a .pdf file, it will open in a new tab like this: <a target="_blank" href="http://somePDF.pdf">Download</a> But what about a Powerpoint file, such as a .ppt? Is there a way to make it open in a new browser tab ...

javascriptjqueryhtmlpowerpoint

Guide on implementing page styles to a polymer element

To apply styles from a 'normal' stylesheet to my polymer component, I included shim-shadowdom in the style and added /deep/ to the class. Here is an example: <html> <head> <style shim-shadowdom> .mylink /deep/ {col ...

htmlcsspolymer

Determine the closest multiple of 50000 by rounding down the number within the designated input

My input range is behaving strangely. The value starts at 0, but it jumps all the way to 40000 in one direction and -10000 in the other direction. I want it to jump by increments of 50000 - the step indicator is already set to 50000. I believe this issue i ...

phphtmlformsrange

How can this be written in a shorter amount of CSS code?

Seeking a more optimized solution, I am attempting to write CSS transitions for five different elements (medals/badges). Is there a way to achieve the same effect with less code? Below is the current code: #nav .badges { float:left; height: 173px; width: ...

css

Update the content within every <td> element using AJAX/JQUERY on a table created from JSP

I have a database filled with descriptions and corresponding ID numbers. The table displays them like this: index.jsp <table> <tr> <td>Name:</td> <td>Id:</td> </tr> <c:forEach items ...

javascriptjavajqueryhtmlajax