Arrange two text elements vertically

I'm having trouble aligning these two text elements (h1 & p) vertically. It seems like the header is preventing the paragraph from moving to the left side.

https://i.sstatic.net/hmdip.png

.container .links h1 {
  font-size: 20px;
  float: right;
  display: block;
  overflow: hidden;
  margin: -30px 0 0 0;
}

.container .links p {
  font-size: 15px;
  margin-left: 30px;
  overflow: hidden;
  right: 100px;
  display: block;
  margin: 30px 0 0 0;
}
<div class="links">
  <div class="discord">
    <img class="icon-discord" src="https://via.placeholder.com/100.jpg">
    <h1>discord</h1>
    <p>abcd#1234</p>
  </div>
</div>

htmlcsscss-float

Answer №1

When approaching the layout aspect, one method is to proceed in this manner:

*{
  margin: 0;
  padding: 0;
}
.discord{
  position: relative;
  display: flex;
  gap: .5rem;
}

.discord > p{
  position: absolute;
  left: 70px;
  top: 40px;
}

.icon-discord{
  position: relative;
}
<div class="links"> <div class="discord"> <img class="icon-discord" style="height: 60px;" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.net-aware.org.uk%2Fsiteassets%2Fimages-and-icons%2Fapplication-icons%2Fapp-icons-discord.png%3Fw%3D585%26scale%3Ddown&f=1&nofb=1"> <h1>discord</h1> <p>abcd#1234</p> </div> </div>

An alternate and simpler approach involves enclosing the h1 and p within a wrapper and applying flexbox for spacing through the use of the gap attribute. The snippet below demonstrates this technique:

* {
  margin: 0;
  padding: 0;
}

.discord {
  display: flex;
  gap: .5rem;
}
<div class="links">
  <div class="discord">
    <img class="icon-discord" style="height: 60px;" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.net-aware.org.uk%2Fsiteassets%2Fimages-and-icons%2Fapplication-icons%2Fapp-icons-discord.png%3Fw%3D585%26scale%3Ddown&f=1&nofb=1">
    <div class="discord-text">
      <h1>discord</h1>
      <p>abcd#1234</p>
    </div>
  </div>
</div>

Answer №2

My colleague, Yong, came up with a great solution, but I found an alternative method using the float property.

All you have to do is create a container using a div element and nest the h1 and p elements inside it.

<div class="links">
  <div class="discord">
    <img class="icon-discord" src="https://via.placeholder.com/100.jpg">
    <div class="texts">
      <h1>discord</h1>
      <p>abcd#1234</p>
    </div>
  </div>
</div>

To complete the solution, apply the float property to the image:

.container .links img
{
  float:left
}

With these changes, the problem should now be resolved. Here is the final code:

<div class="links">
  <div class="discord">
    <img class="icon-discord" src="https://via.placeholder.com/100.jpg">
    <div class="texts">
      <h1>discord</h1>
      <p>abcd#1234</p>
    </div>
  </div>
</div>

.links img
{
  float:left
}

.links h1 {
  font-size: 20px;
  overflow: hidden;
}

.links p {
  font-size: 15px;
}

Additional Notes:

  • I removed the unnecessary float and display block properties from the elements to avoid potential issues on your page.
  • I also eliminated the margin-top property as it was causing the element to be hidden from view.

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

Ways to consistently return to the main home URL/directory within an HTML document

Greetings to all! Currently facing a challenge with HTML pathing. I want to ensure that every time I log out from Dynamics CRM Portals, I am redirected back to the "SignIn" page. The issue arises when I am in various URLs. For example, logging out from d ...

htmldynamics-365adxstudio-portalsdynamics-crm-portals

Images on NextJS are failing to resize properly in Next 13

I have been facing challenges with optimizing image sizes for different screen resolutions using the NextJS Image component. Currently, all images seem to be loading at their largest size on various screens. Below is a screenshot showing the resolution t ...

htmlreactjsnext.jsnext.js13nextjs-image

Making a dropdown menu spin using Jquery and Javascript

I am in need of a unique solution for a dropdown menu that appears rotated 90 degrees anticlockwise. The goal is to have the dropdown select "button" text displayed vertically, with the options sliding out in a similarly rotated, sideways manner featuring ...

javascriptjqueryhtmlcssrotation

Error encountered while uploading image on django through jquery and ajax

Looking for help on posting a cropped image via Jquery and ajax. I've been trying to implement a solution from a question on cropping images using coordinates, but I'm facing issues with receiving the image on Django's end. The CSRF token an ...

javascriptjqueryajaxdjangohtml

The image sequence animation only loads once and does not continue indefinitely

Here is my code snippet: I have a sequence of 15 images that should load one after the other in a loop with a specific time interval. However, I am facing a bug where the images keep playing infinitely when the page loads, but I want them to play only once ...

javascripthtmlcss

Navigational elements, drawers, and flexible designs in Material-UI

I'm working on implementing a rechart in a component, but I've encountered an issue related to a flex tag. This is causing some problems as I don't have enough knowledge about CSS to find a workaround. In my nav style, I have display: flex, ...

javascriptcssreactjsmaterial-uirecharts

What is the best way to customize global styles in nextJS?

What's the best approach to override CSS rules from my global.css file for specific pages within my website? ...

cssnext.js

What is the best way to adjust the width of a column grid header in extjs

When adjusting the width of a vertical header in a grid to 50px, the header text disappears unless manually dragged to the left. How can I ensure the header text remains visible even with a smaller header size? Consider the following code snippet: { text ...

cssextjssassextjs5

Tips for eliminating the PHP form redirection issue

Having trouble with data insertion in MySQL and getting redirected to the PHP file after. Not ideal! Any suggestions on how I can display error or success messages within the same HTML file? index.html <form id="form" action="add_article.php" method=" ...

phphtmlmysql

Currently, I am in the process of constructing a DSpace repository on an Ubuntu 16.04

I have successfully set up a DSpace repository on Ubuntu 16.04 LTS by following the installation instructions provided in this manual. After deploying the webapps, I encountered an issue when trying to add new items. Upon clicking the search link, I recei ...

csssolrubuntu-16.04dspace

Move the items downwards to occupy any empty space vertically

Just a quick overview of the code I'm working with (I am using Material UI in React). This container is meant to hold chat messages exclusively. const ChatContainer = ({ chatMessages }) => { const classes = useStyles(); return ( <Paper ...

javascriptcssreactjsmaterial-ui

What is the reason for preserving the height to width ratio in the <img> tag?

When I write a simple code like this: <img src="mycat.jpg" height="300px";> I noticed that if the image is very large, the height will be reduced to 300px, and the width will automatically adjust to fit the new height. I expected ...

htmlcss

Does renaming a sub-directory in the static directory of an IntelliJ Spring Boot project cause any changes?

I'm a newcomer to IntelliJ and I've been using it to develop a Spring Boot application. Right now, my project structure looks like this: https://i.sstatic.net/7A7jb.png My goal is to set up a "css" directory within the "static" directory under ...

javacssspringspring-bootintellij-idea

Strange Division Split in the Code. Link to JSFiddle Provided

I encountered a strange line break between two divs while working on a website design. The issue is with the gap between the divs offersContainer and recentWinnersHeadlineContainer. Here's the JSFiddle link: http://jsfiddle.net/d593fdea/ Although the ...

htmlcssspacespacing

Creating a button within a card: tips and tricks

As I work on designing web sites, I often face challenges. One of my go-to tools is bootstrap, especially when creating card elements. Here is the code I typically use for creating cards: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/c ...

cssbuttonbootstrap-4

How to use Jquery to fetch the value of a td element nested inside another

After consulting the manual, I am trying to find a way to extract the value in the second column of a table when a specific span is clicked. However, the challenge is that the click event is currently being triggered by the first span cell. Here is the jQu ...

javascriptjqueryhtmljquery-ui

Which CSS property is utilized to position the parent level of a menu below the children when they are shown on the screen?

Recently, my Drupal superfish menu has been acting up after updating the module. The issue I encountered was that the children no longer appear above their parent items. Can anyone help me figure out which setting dictates the order in which they are dis ...

css

I am encountering a problem with IE11 where I am unable to enter any text into my

When using Firefox, I can input text in the fields without any issues in the following code. However, this is not the case when using IE11. <li class="gridster-form" aria-labeledby="Gridster Layout Form" alt="Tile Display Input column Input Row ...

javascripthtmlcssinternet-explorerinternet-explorer-11

What is the best way to position two divs side by side while maintaining their individual padding?

When I remove the padding as shown, the website functions correctly with two div columns next to each other. However, upon adding padding, the #right div shifts downwards. How can I ensure it works as intended with padding included? HTML: Two divs direct ...

htmlcssalignmentcss-float

In JavaScript, what is the best way to target the initial option element in HTML?

As a newcomer to javascript, I'm wondering how to target the first option in the HTML <option value="">Choose an image...</option> without altering the HTML itself? My thought is: memeForm.getElementById('meme-image').getElement ...

javascripthtml