CSS to resolve HTML alignment problems

I am new to HTML and CSS, trying to practice formulating a few things but my efforts are proving futile.

Below is the code and images for your reference. I would appreciate your opinion.

.container {
  display: block;
  width: 200px;
  height: 120px;
}

.picture {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-block;
}

.oliver {
  display: inline-block;
  margin-left: 0px;
  font-weight: bold;
  height: 20px;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  vertical-align: top;
  width: 50px;
}

.popular {
  font-size: 15px;
  width: 50px;
  height: 50px;
  color: #666;
  display: inline-block;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-top: 0px;
  vertical-align: center;
}

.follow-button {
  display: inline-block;
  width: 90px;
  height: 30px;
  margin-top: 0px;
  padding: 0px;
  border: 1px solid #ccc;
  border-radius: 9px;
  background-color: #0f6fb0;
  cursor: pointer;
  margin-left: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: white;
  font: verdana;
}

.follow-div {
  display: inline-block;
  width: 20px;
  margin-left: 0px;
  margin-top: 8px;
  margin-bottom: 0px;
  padding: 0px;
  vertical-align: top;
}
<div class="container">
  <img class="picture" src="/Users/riyazmohamed/Desktop/HTML-CSS/Intro-to-html/channel-picture/cat.jpeg" alt="cat" />
  <p class="oliver">Oliver</p>

  <p class="popular">The Popular Cat</p>
</div>
<div class="follow-div">
  <button class="follow-button">Follow</button>
</div>

I want the content of "The Popular Cat" to be under Oliver, like it's under the picture.

Please help me achieve this, thank you.

Content needs to be formulated under Oliver, please assist me in getting it done according to the sample image provided.

htmlcss

Answer №1

Check out this solution utilizing Flexbox. Wrap the image in a div, even though p tags are block-level elements, I've also wrapped them in divs. Finally, apply display: flex on the .container and you're good to go.

For more details, visit the link Codepen

<div class="container">
  <div>
    <img class="picture" src="data:image/jpeg;base64,/9j/4AAQSkZJRgA...{base64 encoded data}..." alt="cat" />
  </div>
  <div>
    <p class="oliver">oliver</p>
  </div>
  <div>
    <p class="popular">the popular cat</p>
  </div>
</div>
<div class="follow-div">
  <button class="follow-button">Follow</button>
</div>

.container {
  display: flex;
  width: 500px;
  height: auto;
  margin-bottom:10px;
}

.picture {
  width: 100px;
  height: auto;
  border-radius: 50%;
  display: inline-block;
}

.oliver {
  display: inline-block;
  margin-left: 0px;
  font-weight: bold;
  height: 20px;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  vertical-align: top;
  width: 50px;
}

.popular {
  font-size: 15px;
  width: 50px;
  height: 50px;
  color: #666;
  display: inline-block;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-top: 0px;
  vertical-align: center;
}

.follow-button {
  display: inline-block;
  width: 90px;
  height: 30px;
  margin-top: 0px;
  padding: 0px;
  border: 1px solid #ccc;
  border-radius: 9px;
  background-color: #0f6fb0;
  cursor: pointer;
  margin-left: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: white;
  font: verdana;
}

.follow-div {
  display: inline-block;
  width: 20px;
  margin-left: 0px;
  margin-top: 8px;
  margin-bottom: 0px;
  padding: 0px;
  vertical-align: top;
}

Answer №2

Check out this HTML code for a container with an image and text

    <!DOCTYPE html>
    <html>
    <head>
    <style>
        .container {
            display: flex;
            align-items: center;
        }

        .image {
            width: 100px; /* Adjust the width as needed */
            height: auto;
            margin-right: 10px; /* Add spacing between the image and text */
        }

        .text {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="https://clipart.info/images/ccovers/1522855947cartoon-cat-png-clip-art.png" alt="Oliver the cat" class="image">
        <div>
            <span class="text">Oliver</span><br>
            The popular cat
        </div>
    </div>
    </body>
    </html>

https://i.stack.imgur.com/W5aHt.png

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

Adjust the dimensions of the bootstrap dropdown to match the dimensions of its textbox

The second textbox features a bootstrap dropdown with extensive content that is overflowing and extending to other textboxes below it. I am looking for a way to resize the dropdown to fit the size of its corresponding textbox. UPDATE: I want the dropdown ...

javascripthtmlcssbootstrap-5

Conceal an element if the angular attribute does not contain any value

Currently, I am facing an issue with an image element in my project. The path for this image is being fetched from an attribute present on my angular object. However, if this imagePath attribute is empty, a broken image is displayed. I want to avoid rend ...

htmltwitter-bootstrapangularjs

The PHP code encountered a syntax error due to an unexpected $EOF on the final empty line

I've been tasked with maintaining an old website that went offline due to script errors. I managed to resolve most of the issues in the script, but there's one error that's giving me trouble. The site is showing a syntax error that says "une ...

javascriptphphtmlsyntaxeof

How come .trim() isn't cooperating with me?

I am encountering an issue with this particular piece of javascript. Every time I attempt to use it, nothing is displayed in my div. Instead, it simply adds ?weight=NumberInputed&measure=lbsOrkgs&submit=Submit to the URL. <h2>What size d ...

javascripthtml

<ol><li>Arranges elements in a peculiar way if the image is aligned to the left</li></ol>

Explore this comprehensive presentation on combining PDFs online. In this blog post, I have encountered two instances of <ol><li> formatting. The first one is styled properly using the following CSS: .post_content ul, .post_content ol ...

cssimagehtml-listsalignment

When collapsing an accordion, Bootstrap radio buttons fail to properly select

I have attempted various methods to achieve the desired functionality of having the accordion content close and open accordingly when checking a radio button, while also having the button visually appear as 'checked'. For a more in-depth example, ...

javascripthtmlcsstwitter-bootstrap

Whiskey Angostura and Straight Row Set to 8, not 12

Recently, I incorporated Bourbon, Bitters, and Neat into my rails application. However, I am encountering an issue where the number of grid-columns is stuck at 8 instead of the desired 12. To address this problem, I have taken the following steps: Ensur ...

htmlcssruby-on-railssass

Tips for ensuring consistent sizing of card items using flexbox CSS

I'm attempting to create a list with consistent item sizes, regardless of the content inside each card. I have experimented with the following CSS: .GridContainer { display: flex; flex-wrap: wrap; justify-content: space-around; align-item ...

htmlcssreactjs

Ways to adjust Safari printing margins using CSS to achieve borderless printing

I am struggling to eliminate margins when printing a webpage to PDF in Safari. Despite setting the page size to 'A4 borderless' in the print dialogue, Safari on OSX continues to add extra margins around my HTML. Enabling 'print backgrounds&a ...

cssprintingwebkit

Share an image using only the publish_actions authorization

There are some apps I've come across that only request access to users_photos and publish_actions (not publish_stream or photo_upload). Surprisingly, they are able to upload photos without being approved for User Generated Photos (e.g. Instagram). Wh ...

htmlfacebookfacebook-opengraph

Enhancing the visual appeal of a standard jQuery slider with thumbnails

Recently, I incorporated the Basic jQuery slider into my website, which can be found at . As a novice in jQuery but well-versed in HTML and CSS, I have managed to make it work seamlessly on my site. However, I am curious to know if there is a way to displa ...

javascriptjqueryhtmlcsscarousel

Setting the height of a child tag: A step-by-step guide

When trying to set the height of a child tag to 100%, I encountered an issue where the height would remain fixed after redirecting to another page, preventing the page from scrolling. Styling for Image 1 body{ background: url("Resources/Cash.jpeg&q ...

htmlreactjsheight

Is the content within the h3 tag invisible on Internet Explorer 8?

The text within the h3 tag displays correctly in Firefox and Chrome, but is not visible in IE8. I'm unsure of what the issue might be. Here is the HTML code: HTML: <div id="right"> <h3> profile <div id='upload' cla ...

htmlcssinternet-explorer-8

What is causing the columns in Foundation 6 to not align next to each other?

At 1090px screen width or in tablet mode, the columns do not align side by side and instead one is pushed down creating a white space between them. I am using Foundation 6 with 12 columns, but it does not work well on medium-sized screens; it only function ...

htmlcsszurb-foundation-6

Select element from Material UI displaying horizontally

I'm brand new to Material Ui and currently tackling the implementation of their SELECT component. However, I am running into an issue where it is displaying in a row instead of a column. Am I overlooking something important here? const SelectDropDownC ...

cssreactjsmaterial-ui

What is the best way to enlarge a specific section of a map or image using HTML?

Can you resize a specific area of a map in HTML? ...

htmldictionaryscalearea

Display numerical data at precise locations above an image

Currently, I am working on a project where I am adding multiple marker pins to an image and saving their positions (x and y coordinates) to a database for later use. To see the code I have written so far, you can visit this link: https://jsfiddle.net/at3w ...

javascriptjqueryhtml

Prevent secret select fields from being submitted within a form

In my interface, there are a couple of dropdowns where a user can select the first option and based on that selection, a new dropdown will appear. Currently, when posting the form, all the select dropdown values are included in the post data, even the hid ...

javascriptjqueryhtml

The setting of background-size: cover does not affect the height of the background image

Looking for a solution to make a background image fill a div entirely? Here is the CSS code you can use: .class{ background-image: url('img.jpg'); background-repeat: no-repeat; background-size: cover; } You can implement this within t ...

htmlcsszurb-foundation

Email sending through PHP AJAX can be done without refreshing the page. The email action is handled in email.php and incorporated into

I am having trouble sending this with AJAX. The error message I keep getting is: Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more assistance, please visit @ jquer ...

jqueryhtmlajax