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

How to make a letter stretch all the way down the paper?

The color of hyperlinks in firefox varies based on the specific URL being visited

Php Error 404 occurs upon attempting to redirect from the main landing page

Navigating tables with Selenium WebDriver

Crafting a dynamic inline search form with Bootstrap

Make sure link opens in the same window/tab

What could be the reason for the lack of styling on the select element when using PaperProps in the MenuProps of my Select component?

Attempting to choose everything with the exception of a singular element using the not() function in Jquery

Forms for uploading and submitting multiple files

Adjusting image alignment and formatting long text with CSS in Firefox

The CSS Bootstrap 4 class 'input-group-append' is not functioning properly. Just recently, the styles were displaying correctly

Having trouble with the flexbox flex-direction: column property not functioning properly with the textarea element in Firefox?

Issue with the div elements not aligning next to each other

Is there a way to turn off vue.js transitions specifically for testing purposes?

Adding a semi-transparent layer to cover half of the canvas while still allowing the canvas to be visible

Issues with PHP Mail Forms not functioning as intended

Automatic Expansion Feature for HTML Tables

Struggling to align content vertically within an article and in need of some guidance

Tips for maintaining knowledge after redirecting to a new page

How can I convert a JSON template to HTML using AngularJS?