Achieving a floating audio layout on a webpage using CSS

Attempting to align all three audio elements to the right using CSS has been a challenge. I can't seem to figure out what I'm doing wrong.

I've tried changing the 'audio' selector to .audio and #audio, as well as renaming it to 'music' since that is the name of my div. Unfortunately, none of these changes seemed to work.

audio
{
    align:right;
}
<div id="Music" style="width:650px; background-color: #dcdcdc; border: #00008b 2px dashed;" > 

    <h1>My Favorite Music</h1>

    <p>Jrad</p>
    <audio controls style= "display:block">
    <source type="audio/ogg"
    src="media/jrad2019-07-13.cmc621.cmc64.sbd.matrix-t03.ogg">
    </audio>

    <p>Swagger by Joe Russo's Almost Dead</p>
    <audio controls style= "display:block">
    <source type="audio/mp3"
    src="media/jrad2019-01-19.cmc621.cmc65xt.sbd.matrix-s1t01.mp3">
    </audio>

    <p>Marco Solo by Joe Russo's Almsot Dead</p>   
    <audio controls style= "display:block">
    <source type="audio/mp3"
    src="media/jrad2019-03-16.cmc621.cmc64.sbd.matrix-s1t04.mp3">
    </audio>

    <p>Jam by Joe Russo's Almost Dead</p> 
    <audio controls style= "display:block">
    <source type="audio/mp3"
    src="media/jrad2019-04-27.cmc621.cmc64.sbd.matrix-s1t01.mp3">
    </audio>

</div>

htmlcss

Answer №1

To achieve a 1x1 layout, use the CSS property display: flex; and then apply flex-grow: 1; to the p element for maximum available width.

#Music {
  background-color: #dcdcdc;
  border: #00008b 2px dashed;
}

.wrapper {
  display: flex;
}

.wrapper p {
  flex-grow: 1;
}
<div id="Music">

  <h1>My Favorite Music</h1>

  <div class="wrapper">
    <p>Jrad</p>
    <audio controls style="display:block">
    <source type="audio/ogg"
    src="media/jrad2019-07-13.cmc621.cmc64.sbd.matrix-t03.ogg">
    </audio>
  </div>

</div>

Answer №2

It's always a good idea to use wrappers when working with display flex to easily control alignment.

.wrap{display:flex;
justify-content:space-between;}
<div id="Music" style="width:650px; background-color: #dcdcdc; border: #00008b 2px dashed;" > 

    <h1>My Favorite Music</h1>

   <div class=wrap> <p>Jrad</p>
    <audio controls style= "display:block">
    <source type="audio/ogg"
    src="media/jrad2019-07-13.cmc621.cmc64.sbd.matrix-t03.ogg">
    </audio></div>

   <div class=wrap>  <p>Swagger by Joe Russo's Almost Dead</p>
    <audio controls style= "display:block">
    <source type="audio/mp3"
    src="media/jrad2019-01-19.cmc621.cmc65xt.sbd.matrix-s1t01.mp3">
    </audio></div>
 <div class=wrap>
    <p>Marco Solo by Joe Russo's Almsot Dead</p>   
    <audio controls style= "display:block">
    <source type="audio/mp3"
    src="media/jrad2019-03-16.cmc621.cmc64.sbd.matrix-s1t04.mp3">
    </audio></div>
 <div class=wrap>
    <p>Jam by Joe Russo's Almost Dead</p> 
    <audio controls style= "display:block">
    <source type="audio/mp3"
    src="media/jrad2019-04-27.cmc621.cmc64.sbd.matrix-s1t01.mp3">
    </audio></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

How to Spin an Image in the Canvas Using HTML5

I am having trouble rotating an image inside a canvas after researching similar questions on Stack Overflow. Here's what I've learned: It seems I cannot rotate a single object inside the canvas. I can only rotate the entire canvas itself. ...

javascripthtmlcanvas

"Efficiently handle online submissions: Use Django to submit a form and instantly display the outcome

I have an urgent task to develop a web page where users can input data, and the backend will perform calculations and display the result below the input field on the same page (similar to checking online air ticket prices). I am new to Django and HTML. Be ...

htmljquerydjangoajaxforms

the script is run only one time

I have developed a unique web component and incorporated it in two distinct sections like this. <div class="sub_container"> <label>Users in Debt</label> <input placeholder="Search by user name" class="input_style ...

javascripthtmlweb-component

Unable to change the font size within the Bootstrap framework

My struggle to change the font-size of text fetched from an AJAX request has been futile, leading me to consider using the !important declaration. Despite my efforts to place the font-size property in various locations, even inline, the dev console alway ...

htmlcsstwitter-bootstrap

Display a jQuery loading window

Need help with displaying a loading div when making an ajax post request. I've tried the following code but it's not working. Can someone please assist in resolving this issue? $(document).ready(function() { $('a.pagerlink').click( ...

jqueryhtmlajax

Remove the div of the previous selection in jQuery and add the current selection by appending it, ensuring only one selection per row is allowed when

Here is a code snippet that includes buttons appending selections to the "cart" div upon clicking. The first script ensures only one selection per row when multiple buttons in the same row are clicked. In the second script, selections are appended to the ...

javascripthtmljquerycss

Integrating Labels on External Websites with ASP.NET

I have been developing a website that needs to display a counter on the home page. To accomplish this, I used an asp label that counts and displays the database records (e.g. 180000) with no issues at all. However, now I am facing a new challenge. I want ...

c#asp.nethtmlembed

JQuery validation and qTip2 - Remains visible even after successful validation

Struggling with getting both libraries to work together has been a challenge for me, but I'm almost there now! Initially, I attempted the suggested method: Create the form Set validation rules using escaped name attributes, as RoR automatically set ...

jqueryhtmlvalidationruby-on-rails-4qtip2

I am searching for answers to solve issues related to a JSON file

I am currently working on a tool that searches for matches in an input field by comparing the keywords entered by the user with a JSON. During my testing phase, I focused on using a single API that provides information about different countries and fortun ...

htmljsonangulartypescript

Establish a comprehensive background for your Angular project

I've been struggling to figure out how to set a background image for my entire angular project. I've tried using global css and the app.component.css file, but it only sets the background for the component area. Here is a snippet from my global ...

cssangularbackground-image

Adjust the width of a class using CSS transitions when hovering

Is there a way to use pure CSS to adjust the widths of classes on hover? Although the transition is successfully changing the classes, class .b and .c are not impacting the width of classes that come before them. Ideally, I would like the previous class ( ...

htmlcsscss-transitions

Generate a line chart adorned with dots and customized labels utilizing a pair of distinct data sets

Is there a way to enhance my line graph with labeled dots using two separate data sets, one of which is from an API? For reference, I would like the graph to resemble the sample image linked here: https://i.sstatic.net/yUcWw.jpg Here are the details of th ...

javascripthtmld3.jsgraphcharts

BX-Slider allows for the insertion of Prev and Next Arrows in both the Main Div and Inner Divs

I am facing an issue with positioning inner boxes (divs) to the left or right of each slide while adding some text. Although styling them is easy, the problem arises when the Previous and Next arrows appear inside the secondary/inner div, as shown in the a ...

javascriptjqueryhtmlcssbxslider

HTML5 Slideshow with Smooth Image Transitions

So, I have created an HTML5 image slideshow and it's working perfectly on my localhost. However, I am puzzled as to why there is no transition effect within the slideshow. I was expecting something like fading out the first picture and then having the ...

javascripthtmlcssslideshowtransition

Can the HTML of a link's target be altered after the link has been clicked without relying on a browser extension?

I am seeking a way to click this link and have it automatically change the text in all the buttons to "Click me!". The following code accomplishes this using jQuery 2.1.1, but despite my online search efforts, I have not found a method to achieve this afte ...

javascriptjqueryhtmldomweb

css Problems with the height of the tab bar

Trying to set up a tab bar with additional padding on hover, but encountering an issue where the parent div moves on hover state. Here is the HTML code: <div id="statNav"> <a href="#">Gogus</a> <a href="#">Kol ...

htmlcss

Issue with page not updating after local storage change and returning to previous page

I have encountered an issue where in Firefox and Safari, the value retrieved from localstorage on the first page is not updated until I manually refresh the page after setting the localstorage value on the second page. Disabling the cache did not resolve t ...

javascripthtmllocal-storage

Display outcomes utilizing tabs and collapsible sections

In my database, I have 2 tables named posts and categories. There is a one-to-many relationship between these tables, where each category can contain multiple posts. Posts Table ___________________________________________________ | ...

phphtmlmysqlsqltwitter-bootstrap-3

Enhancing User Experience with Bootstrap V5 Form Validation and Sweetalert2: Displaying a Message of Success Upon Successful Submission

I am currently working on implementing a simple form using Bootstrap 5 that includes validation. My goal is to display an alert message when the form field is successfully submitted using Sweetalert2. Below is the code I have: HTML <form action=&q ...

javascripthtmlvalidationbootstrap-5

The hover effect flickers in Firefox, but remains stable in Google Chrome

Here is an example link to check out: I am facing a dilemma on how to solve this issue and unsure if it is related to jQuery or the DOM structure. If you have any suggestions, they would be greatly appreciated. Thank you! ...

jquerycsshtml