Display table and Inline

HTML & CSS
1 
<div class="content">
       <div class="author-box">
                        <div class="author-image">
                            <img src="#" alt="">
                        </div>
                        <div class="author-description">
                            <h2>Author's Name</h2>
                        </div>
         </div>
</div>

If the class “content” has display: table.

how to make sure that the two other Divs with author-image and author-description classes falls inline?

2

Please post more code… a “working page” would be nice… and a screen shot showing what you mean. Is there a link to your test page, maybe?

3

Live Link Authors Name should be inline with the Author’s Image.

4

I’m confused :confused:
I don’t see mark up on the page linked that matches the code you posted first.

3 Likes
5

Let me try offering you a clue, first.

the divs, “author-image” and “author-description”, are, well, divs… blocks. A block, as you know, extends to fill all of the available space on a line. Two blocks, two lines. What does one usually need to do to make objects line up side by side… like words in a sentence or items in a horizontal menu?

6

Sir, Please CTRL+ F5.

7

Novicedeveloper, what browser are you using and what does CTRL+F5 do for you? I am using FF on a PC and CTRL+F5 does nothing for me. What do you see? or better still, what do you wish us to see?

There is no CSS assigned to those two classNames, as @SamA74 pointed out.

8

I tried many CSS, but none were able to align them in the same line. even I used %ages.

9

Please? We’re learning, too.

10

It refreshes the page on windows so that you get the cache cleared.

11

I tried →


display: table-cell
display:inline-block

etc__

12

applied to which classNames?

13 

1. .author-image
2. .author-description
14

Now I tried this →
https://www.screencast.com/t/J74QmpArxr6

seems to be working a little bit.

15

Just STOP.

STOP copying and pasting code blindly and think about what you are doing. Use CSS purposefully, not haphazardly until somethintg seems to work.

You said that you tried

.author-image {
    display:inline-block;
    outline:1px dashed red;  /* my add for development */
}
.author-description {
    display:inline-block;
    outline:1px dashed red;  /* my add for development */
}

that produces this:

1289×229 25.4 KB

and this:

.author-image {
    display:table-cell;
    outline:1px dashed red;  /* my add for development */
}
.author-description {
    display:table-cell;
    outline:1px dashed red;  /* my add for development */
}

produces this:

1224×235 25.7 KB

Maybe these are not what you want, but the ARE inline (more or less) so think it through.

NOTE: that you omitted divs .col and .main from the code that you posted in #1. Yes, that makes a difference with the .table-cell possibility that you say that you tried.

Outlines really help one see why some things work and others don’t.

1 Like
16

You are now trying a float approach. IMO, that seems to be working very nicely. You might assign a minimum width to the image so it doesn’t continue to shrink at narrow widths. You could reduce the size of that image considerably, too, to save bulk and bandwidth. 997 x 998 is a bit large :wink:;

1 Like
17

But as I had discussed a lot before to Mr SamA74 and Mr PaulOB they are not of very good opinion while using float so normally I try to avoid that.

18

They will also tell you that there are usually several ways to accomplish a task using HTML and CSS and there is no ALWAYS best or worst method. The best method to use in any situation depends on the situation. In this case, the float seems to work very nicely (as far as I can see).

1 Like
19

Yes, Thanks. Done! min-width: 150px;

1 Like
20

Yes, I will convert this later into WP to be distributed free. I think WP can create small versions by creating multiple cropped images like this →

1 Like