planning to append the author's name to the end of the title using CSS

Here is the HTML code I have:

<div class='store_detail-level1'>
    <span class='book_name'>How To Avoid Climate Disaster</span>
    <br>
    <span class='author_name'>Bill Gates</span>
</div>

This is how I want it to look:

 How To Avoid Climate Disaster
                             by Bill Gates

Important Details:

  1. The content of the class 'book_name' is dynamic, coming from the database
  2. It needs to be responsive to different screen sizes

For a mobile screen, it should appear like this:

How To Avoid Climate
Disaster
       by Bill Gates
css

Answer №1

var elementWidth = document.getElementById('getElementId').clientWidth;
document.getElementById("setElementId").style.marginLeft = elementWidth+'px';
.store_detail-level1{
  display:inline-block;
}
<div id='getElementId' class='store_detail-level1'>
  <div class='book_name_container'>
    <span class='book_name'>The Art of Writing</span>
  </div>
    
  <div id='setElementId' class='author_name_container'>
    <span class='author_name'>by Jane Doe</span>
  </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

`Slide bootstrap carousel without moving other elements`

.carousel { position: relative; height: 500px; .carousel-inner .item { height: 500px; } .carousel-indicators > li { margin: 0 2px; background-color: $maincolor; border-color: $maincolor; opacity: .7; ...

htmlcsstwitter-bootstrapsass

Looking to extract data from various checkbox options and save it as an array variable

For a coding boot camp assignment, I'm working on a modal that includes options for the days of the week. My approach involves using Jquery .each and CSS :checked to retrieve the values assigned to each input. However, every time I attempt to log the ...

javascriptjqueryhtmlcss

I am having trouble getting my dropdown to line up with the drop button labeled "MORE"

Despite trying multiple approaches, I am still struggling to align the dropdown content with the dropbtn. My goal is to have the content consistently positioned below the more menu. HTML: ` <html> <meta name="viewport" content="width=device-widt ...

cssalignmentnavbardropdownpositioning

Detecting Android devices

Issue: My website functions properly on desktop but has a problem with the carousel images skewing on iPhones. To address this, I created a separate CSS styling for iPhone devices and used a JavaScript function found online to detect iPhones and iPads. Un ...

javascriptandroidcssiphone

Is there a way to display tags on hover and darken an image on hover as well?

Currently, I am using a theme that does not include the feature to display tags when hovering or darken images and gifs on hover. You can view the theme here. I would like to modify my theme to show tags similar to this example theme: If anyone could ass ...

htmlcsstags

Automatic Addition of Row Numbers Enabled

I'm currently exploring coding and experimenting with creating a scorekeeper for family games. I've managed to add rows dynamically and automatically sum up the entered information in the "total" row at the bottom. However, I'm facing an iss ...

javascriptjqueryhtmlcss

Does anyone know of a CSS/JavaScript framework that can be used to replicate the look and functionality of the iOS home

I'm wondering if there is a CSS/JavaScript framework that replicates the layout of an iOS home screen. I want to create a kiosk website with a grid layout similar to Android/iOS where apps can be displayed as icons. ...

javascripthtmlcssioshomescreen

Prevent Scrolling on Body with W3 CSS

While implementing scroll body lock packages like body-scroll-lock, react-scrolllock, or tua-body-scroll-lock alongside the W3 CSS package, I have encountered an issue where the body remains unlocked even when the designated element is active or open (e. ...

htmlcssw3-css

Using CSS to showcase div elements with varying dimensions

How can I arrange divs with varying heights to be positioned close together, regardless of their height, and with a specific margin similar to buildings? I am aiming for a layout like the one on this website . I tried using float:left but it only float ...

htmlcss

Unable to animate a second click using jQuery/CSS

I'm having an issue with animating on click using CSS. The animation works fine on the first click, but it doesn't work on the second click. This is because the click event is being overridden by jQuery to enable the dropdown menu to open onClick ...

javascriptjquerycssanimation

Anomalous Link Behavior on iOS

I am encountering a strange issue with links on the provided website in iOS: When I try to tap on the links under the "Galleries" menu, such as "Benny," nothing happens. It appears that Safari is trying to load the new page, but then it fails to do so. H ...

javascripthtmlioscss

When a condition fails, the default style in the CSS media query does not apply

Whenever the user resizes the browser, my media query for max-width kicks in to make the design responsive. But I'm facing an issue where when the user returns back to the original browser size, the design is still a little messed up and doesn't ...

css

Adjusting font size according to the font style selected

Can conditional font size be determined based on font family using CSS or jQuery? ...

jqueryhtmlcssconditional-statementsfont-size

Content positioned beside an image with the help of Bootstrap 4 framework

How can I align text to the right of an image, like a table layout? I experimented with grid layout using <div class="span2"> and <div class="span10"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bo ...

htmlcssbootstrap-4

"Utilizing the 8-column layout feature in Twitter Bootstrap

Is it possible to set up 8 equal columns using the latest version of Twitter bootstrap? I know how to create 4 equal columns but I am struggling with figuring out how to achieve 8: <div class="col-sm-12"> <div class="row"> ...

htmlcsstwitter-bootstrap

Creating inner borders on a pie chart with HTML and CSS: A step-by-step guide

After putting my coding skills to the test, I successfully crafted a stunning pie chart using only HTML and CSS. https://i.sstatic.net/5xCbl.png Here's the code snippet I tinkered with: HTML - <div class="pie-chart"></div> CS ...

htmlcssscss-mixinsscss-lint

Tips on how to decorate a radio button using borders and colors

How can I change the color of my radio button and its border color? I attempted to modify the code below, but it is not producing the desired result. li.payment_method_bacs input[type='radio']:checked:before { background: black !important ...

htmlcss

Challenges with cascading style sheets and the integration of PHP's include function

I am currently working on a PHP website project. I have implemented the include function in my main page to include other files, but I am facing an issue with the CSS when loading the main page. The CSS in the included files seems to be all messed up, maki ...

phphtmlcss

Distinguishing between these two hover text types: JQuery CSS, what sets them apart?

As a total jQuery novice, I've been curious about the difference between these two types of text that appear when you hover over something. Can someone please clarify what each one is? Thank you very much. First hover text: When hovering over the up- ...

jqueryhtmlcss

The Angular overlay panel remains open consistently

I recently developed an Angular component similar to p-overlaypanel, but I'm facing an issue where it remains open for every item I click. What I actually want is for only one overlay panel to be clicked and shown at a time - if I click on another ove ...

htmlcssangulartypescript