Arranging elements within a div using inline positioning

Currently, I am trying to arrange elements within a div. Below is the div that needs positioning:

https://i.sstatic.net/5nZUt.jpg

This is the desired layout:

https://i.sstatic.net/vXSV9.jpg

Here is the HTML and CSS code snippet:

#channel-header * {
  display: inline-block;
}

#channel-title {
  position: absolute;
}
<div id="channel-header">
  <img src="images/lfc-kanal.png" id="avatar-kanala">
  <div id="channel-title">
    <h3>LFCOfficial</h3>
    <p>828,277 subscribers</p>
    <a href="#" class="button" id="sub-button">Subscribe 828K</a>
  </div>
</div>
htmlcsselement

Answer №1

If you're looking to easily create a layout with 3 columns and vertical alignment, consider utilizing flexbox.

#channel-header {
  display: flex;
  align-items: center;
  /* Align vertically */
  justify-content: flex-start;
  /* Align horizontally */
}

img {
  border-radius: 100%;
}

.button {
  text-decoration: none;
  color: white;
  background-color: red;
  border-radius: 50px;
  padding: 1rem;
  margin-left: auto;
}

#channel-title {
  margin-left: 2rem;
}
<div id="channel-header">
  <img src="https://via.placeholder.com/150x150" id="avatar-channel">
  <div id="channel-title">
    <h3>LFCOfficial</h3>
    <p>828,277 subscribers</p>
  </div>
  <a href="#" class="button" id="sub-button">Subscribe 828K</a>
</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 text is not displaying as expected due to a timeout issue

Trying to create a pop-up that functions as follows: After 3 seconds, the close button should appear, but during those 3 seconds, there will be a countdown. However, I'm encountering an issue where no text is being displayed. var n = 3; function p ...

javascriptjqueryhtmldom

Issue with jQuery where it returns "undefined" when trying to access the CSS display property

On my page, there are several divs with default display styles set in an external .css file. When a certain condition is met, I use jQuery to turn one on and the others off using the fadeIn() and fadeOut() methods. However, I've noticed that in Firef ...

jqueryfirefoxcss

move div upwards from the bottom

Within my HTML page, I have a centered div that measures 640x480. I am looking to create another div that appears from the bottom edge of the original div, with dimensions of 640x400. This means only the top 80px of the original div will be visible. I&apo ...

jqueryhtmlcss

What could be the reason for my CSS selector with :target not functioning properly?

I tried to implement the instructions I found online for using :target, but it's not working as expected. My goal is to change the background color and font color of #div1 when the first link is clicked, and to change the border of #div2 when the seco ...

htmlcss

A feature to reveal additional content when it extends beyond a single line

<div class="questionnaire-description col-xs-12" id="questionnaire_description_wrapper"> <text-truncate> <span ng-class="questionnaire_description.show_more ? 'full-description' : 'ph-ellips ...

javascriptjqueryhtmlcss

Align the content to the right and center it within the table

One common issue I face is working with tables that contain numbers requiring right alignment to ensure the ones/tens/hundreds/thousands places line up correctly. Here's an example: 2,343 1,000,000 43 43,394 232,111 In these tables, ...

javascriptjquerycss

Contrasting border with border-style

To eliminate all borders from my primefaces panelgrid component, I employ the following techniques: First method: .table, table td { border-style: hidden !important; } Second method: .table, table tr, table td { border: none !important; } Can ...

cssprimefaces

How can I store a value or text to track view counts or a counter efficiently?

Recently, I've been trying to implement a view counter on my website, similar to what you see on YouTube. Currently, the number of views stands at 23. I managed to find some code that allows me to increment the view count every time I click on an imag ...

javascriptphphtml

Setting a fixed height for layout with scroll functionality in Twitter Bootstrap 3.2.0

I am currently working on a design layout using bootstrap 3.2.0. I have managed to create a Fixed header and footer, and I am now facing the challenge of having a full-height container with independent scrollbars. Are there any effective methods in Twitter ...

htmlcsstwitter-bootstrap-3

What is the method for converting a string into HTML formatting?

I am working on a Django project. My goal is to display an output string on an HTML page. Here is my view: def strategy_run(request): output = "hello world!\nstring test" return render_to_response('strategy_run.html', locals()) T ...

pythonhtmldjango

How to Alter the Color of a Hyperlink in HTML

I've been working on an angular2 application and I'm using a hyperlink to trigger a method that opens a small popup window. I've tried different methods to change the color of the link when it's clicked, but so far none have worked. Th ...

htmlcssangular

Rearrange the middle column to be the top column on smaller screens

I am trying to create a layout with 3 columns in a row. The challenge is to prioritize the middle column on top when viewed on small screens, with the left and right columns below it. To clarify, on large screens the order should be 1 2 3, while on small s ...

csstwitter-bootstrap

Is it possible to have a never-ending slideshow with inline-blocks?

After spending countless hours trying to troubleshoot my code, I am now seeking help from the wonderful people of the internet! ;) It seems like only a small portion of my code is incorrect. What I'm attempting to do is move the leftmost object in the ...

javascriptjqueryhtmlcss

Adjusting HTML image sizes

How can I prevent large images from extending off the edge of the screen when using HTML img tags? Is there a way to scale them to fit within the browser window or specify a set percentage for their width and height? I've noticed that using the width ...

htmlimage-scaling

Aligning Bootstrap Buttons

How do I create a gap between my Bootstrap4 button and the top of the table, while also aligning it to the edge of the table? <div class="container"> <div class="table-title"> <div class="row"> ...

htmlcssangularbootstrap-4

Tips for making Google search results include query strings in the returned links

I need help figuring out how to make Google search results show a URL containing a query string. Here's an example from the project I am currently working on: Instead of this link, Google search returns: If anyone has any suggestions for fixing this ...

javascriptphpcsssitemapgoogle-search-console

The images are not clickable when trying to hyperlink them

I'm attempting to create a clickable image that will redirect users to another site when clicked. Here's the code I've tried: <div class="haus"> <a href="http://google.com"><img src="http://schwedenladen.de/wp-content/the ...

htmlcssimagehyperlink

Customize Bootstrap radio buttons to resemble standard buttons with added form validation styling

Is there a way to style radio buttons to look like normal buttons while maintaining their functionality and form validation? I have two radio buttons that need styling but should still behave like radio buttons. Additionally, I am utilizing Bootstrap for s ...

javascriptjqueryhtmlcssbootstrap-4

Updating the color of tick marks on checkboxes

I have successfully updated the background color of my checkboxes using a custom function. However, the tick mark on the checkbox now turns black instead of remaining white. How can I keep the tick mark white while changing the background color? Here is t ...

javascriptcssvue.js

Tips for positioning a background image behind page content

I have a webpage with a background image, and now I want to add content that floats over it. However, the code below is placing the content behind the image. How can this be corrected? It's important to note that I'm attempting to achieve the ef ...

htmlcss