Make sure to align images and comments seamlessly on your website just like in the comment section of YouTube

Question

Make sure to align images and comments seamlessly on your website just like in the comment section of YouTube

Looking for help aligning an image and two spans in one row

        <img src="../images/profile/profile.png" class="img" />
        <span class="name">First Name</span>
        <span class="comment">
            This is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently this is end of count.
        </span>

Fiddle http://fiddle.jshell.net/m3qyhoab/

I have tried changing the image and span display properties to block, etc., but still haven't been able to get them aligned properly

css html

Answer 1

Answer №1

Consider utilizing a table for organization:

<table>
        <tr>
            <td><img src="http://i450.photobucket.com/albums/qq229/veraqueen/80X80-1.jpg" class="img" /></td>
            <td><span class="name">First Name</span></td>
            <td> <span class="comment">
                This is just filler text used in the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also made the leap into electronic typesetting, remaining essentially unchanged. It became popular in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently this is the end.
            </span></td>
        </tr>
</table>

Answer 2

Consider utilizing a table for organization:

<table>
        <tr>
            <td><img src="http://i450.photobucket.com/albums/qq229/veraqueen/80X80-1.jpg" class="img" /></td>
            <td><span class="name">First Name</span></td>
            <td> <span class="comment">
                This is just filler text used in the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also made the leap into electronic typesetting, remaining essentially unchanged. It became popular in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently this is the end.
            </span></td>
        </tr>
</table>

Answer 3

Answer №2

If you're unsure if this is the behavior you were looking for, give this a try:

http://fiddle.jshell.net/m3qyhoab/23/

Answer 4

If you're unsure if this is the behavior you were looking for, give this a try:

http://fiddle.jshell.net/m3qyhoab/23/

Answer 5

Answer №3

Learn CSS

.container {
    max-width:800px;
    margin:30px auto;
    background-color:#ccc;
    display:inline-block;
}
.image {
    width:80px;
    float:left;
    margin-right:15px
}
.title {
    float:left;
    width:80px;
}
.description {
    float:left;
    width:600px;
}

Check out the DEMO here

To ensure smooth functioning, make sure to specify widths for each class that uses Float property

Answer 6

Learn CSS

.container {
    max-width:800px;
    margin:30px auto;
    background-color:#ccc;
    display:inline-block;
}
.image {
    width:80px;
    float:left;
    margin-right:15px
}
.title {
    float:left;
    width:80px;
}
.description {
    float:left;
    width:600px;
}

Check out the DEMO here

To ensure smooth functioning, make sure to specify widths for each class that uses Float property

Answer 7

Answer №4

To ensure your image occupies vertical space while maintaining alignment of the name and comment to its right, you can try utilizing this method.

It is recommended to avoid using <table>. For a more organized approach, you may also utilize bootstrap.

Here's to successful formatting!

Answer 8

To ensure your image occupies vertical space while maintaining alignment of the name and comment to its right, you can try utilizing this method.

It is recommended to avoid using <table>. For a more organized approach, you may also utilize bootstrap.

Here's to successful formatting!

Answer 9

Answer №5

Fidler

.container {
    max-width:800px;
    margin:30px auto;
    background-color:#ccc;
}
.image {
    width:80px;
    float:left;
    margin-right:15px
}
.title {
    float:left;
    width:100px;
}
.description {
    float:left;
    width:605px;
}

Some observations I made :

Remember to end each CSS property with a semicolor (;)
Avoid mixing relative units like % with absolute units like pixels.
Try implementing the suggested code for better results.

p.s. Adjust the Result window positioning if it wraps onto multiple lines.

Answer 10

Fidler

.container {
    max-width:800px;
    margin:30px auto;
    background-color:#ccc;
}
.image {
    width:80px;
    float:left;
    margin-right:15px
}
.title {
    float:left;
    width:100px;
}
.description {
    float:left;
    width:605px;
}

Some observations I made :

Remember to end each CSS property with a semicolor (;)
Avoid mixing relative units like % with absolute units like pixels.
Try implementing the suggested code for better results.

p.s. Adjust the Result window positioning if it wraps onto multiple lines.

Make sure to align images and comments seamlessly on your website just like in the comment section of YouTube

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Reset the text input field when the dropdown menu is set to 'no/other'

Complete guide on modifying CSS with Selenium (Includes downloadable Source Code)

Error message: Unable to find child element in Selenium WebDriver

How to manage the three states (InProgress, Success, Error) of a dropdown dynamically in AngularJS with ng-show/hide?

Using CSS to customize the dropdown text styling of a select box within a custom wrapper

What is the functionality of background attachment fixed?

Enhance the standard input control in Vue.js by extending it to include features such as

Issue with Dismiss Button Display in Bootstrap Alert

Choose a JavaScript function by clicking on the HTML text

How can we stop the brief display of a hidden div from occurring?

The background color is not displaying correctly on the <div> element

Tips for creating a vertical Angular Material slider with CSS

Ways to restrict input text to a specific set of values

Customizing the size of dateBox icons in JQuery Mobile

Transferring the final space from a node containing a mixture of content to a separate

The ivory pillar on the far right extending over the entire width of the page

How to merge text (string) with date in HTML using JavaScript

Issue with jQuery click event not activating on initial click but functioning properly on the subsequent click

Steps to hide a div after it has been displayed once during a user's session

Retrieving Form Validation Error Value in AngularJS