Position the image, text, and header within a box in uniform alignment

Currently, I am working on a design that includes an image, a header, and some text inside a box. However, I am facing an issue with aligning the header so that it appears above the rest of the text. The layout is not turning out as expected.

https://i.sstatic.net/d39Gr.jpg

Here is the HTML code:

 <div class='Favorites'>
     <div class='favorites_info'>
         <div class="box">
               <div class="picture">
                    <img src="Iconos/Help/favorites_help.png" alt="Fav" class="favor_help">
                </div>
                <div class="Messagebox_title">
                    <h1 >Favorites category
                    </h1>
                </div>
                <div class="Messagebox">
                    <h4 >You can select devices as favorites so you can get access to them quicker. Devices marked as favorites will be displayed in the "Favorites" category under the "Devices" tab.
                    </h4>
                </div>
        </div>
     </div>

Below is the CSS for the two text elements:

.Messagebox_title {
    vertical-align:middle;
    display:table-cell;
    text-align:center;
    color: #555;
    position: relative;
    font-family: monaco, monospace;
    font-size: 15px;
}

.Messagebox {
    vertical-align:middle;
    display:table-cell;
    text-align:justify;
    color: #555;
    position: relative;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 0px;
    margin-bottom: 0px;
    font-family: monaco, monospace;
    font-size: 15px;
  }
htmlcss

Answer №1

To implement flexbox, you'll have to surround the text with an extra div.

For example:

.Messagebox_title {
  text-align: center;
}

.Messagebox {
  text-align: justify;
  margin: 0 2px;
}

.box {
  font-size: 15px;
  font-family: monaco, monospace;
  display: flex;
  color: #555;
}

.text_wrapper {
  display: flex;
  flex-direction: column;
}
<div class='Favorites'>
  <div class='favorites_info'>
    <div class="box">
      <div class="picture">
        <img src="https://unsplash.it/150" alt="Fav" class="favor_help">
      </div>
      <div class="text_wrapper">
        <div class="Messagebox_title">
          <h1>Favorites category
          </h1>
        </div>
        <div class="Messagebox">
          <h4>You can select devices as favorites so you can get access to them quickly. Devices marked as favorites will be displayed in the "Favorites" category under the "Devices" tab.
          </h4>
        </div>
      </div>
    </div>
  </div>

You can achieve a similar result with CSS Grid, which minimizes the HTML required.

.Favorites {
  display: grid;
  grid-template-columns: 150px 1fr;
  grid-gap: 1em;
  font-size: 15px;
  font-family: monaco, monospace;
  color: #555;
}

.picture {
  grid-row: 1 / 3;
}

h1 {
  grid-column: 2;
  text-align: center;
}

h4{
  grid-column: 2;
  grid-row: 2;
  text-align: justify;
  margin: 0 2px;
}
<div class='Favorites'>
  <div class="picture">
    <img src="https://unsplash.it/150" alt="Fav" class="favor_help">
  </div>
  <h1>Favorites category</h1>
  <h4>You can select devices as favorites so you can access them quickly. Devices marked as favorites will be displayed in the "Favorites" category under the "Devices" tab.</h4>
</div>

Answer №2

Make adjustments based on your requirements

.box{float:left;width:100%;position:relative;border:1px solid yellow;margin-bottom:15px;}
info{border:1px solid blue;}
.icon{float:left;width:100px;background:yellow;height:120px;text-align:center;position:relative;overflow:hidden;}
.info .icon{background:blue;}
.icon span{position:absolute;top:auto;margin:33% auto;left:0;right:0;bottom:auto}
.text{float:left;width:calc(100% - 100px);width:-webkit-calc(100% - 200px);padding:5px;}

<div class="box">
<div class="icon"><span>Img</span></div>
<div class="text">
<h3>Custom heading here</h3>
<p>Lorem ipsum dolor sit amet, case discere concludaturque in mel, omnis aliquid offendit ut usu, ea minim partiendo vix</p></div>

</div>
<div class="box info">
<div class="icon"><span>img</span></div>
<div class="text">
<h3>Custom heading here</h3>
<p>Lorem ipsum dolor sit amet, case discere concludaturque in mel, omnis aliquid offendit ut usu, ea minim partiendo vix</p></div>

</div>

Answer №3

You're on the right track.

Your solution involves a simple tweak.

Try changing display: to block and adding float: left to your image. 

<style>

.picture 
{
    float:left;
    margin-right:10px;
}
.Messagebox_title {
    vertical-align:middle;
    display:block;
    text-align:left;
    color: #555;
    position: relative;
    font-family: monaco, monospace;
    font-size: 15px;
}

.Messagebox {
    vertical-align:middle;
    display:block;
    text-align:justify;
    color: #555;
    position: relative;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 0px;
    margin-bottom: 0px;
    font-family: monaco, monospace;
    font-size: 15px;
}

</style>
<div class='Favorites'>
 <div class='favorites_info'>
     <div class="box">

           <div class="picture">
                <img src="http://eztechtraining.com/wp-content/uploads/2012/11/2012-10-20-21.38.35-150x150.jpg" alt="Fav" class="favor_help">
            </div>

            <div class="Messagebox_title">
                <h1 >Favorites category
                </h1>
            </div>
            <div class="Messagebox">
                <h4 >You can select devices as favorites so you can get access to them quicklier. Devices marked as favorites will be displayed in the "Favorites" category under the "Devices" tab.
                </h4>
            </div>

    </div>
 </div>

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

There appears to be a malfunction with WebRupee

I have incorporated the new rupee sign into my website to represent Indian currency. Below is the code snippet I used: For the script, I included " and also added the following: <span class="WebRupee">Rs.</span> 116,754.00 To style it using ...

javascriptcss

Switch videos within the video tag as you scroll

I am trying to implement a video tag within a div element on my website. Here is the current code: <div class="phone" align="center"> <div class="phone-inner"> <video width="100%" height="100%" autoplay="" loop="" muted id="phonevideo ...

javascriptjqueryhtmlcss

html inserting line break using label

I am attempting to dynamically set text to a label using jQuery. However, I am having trouble getting the <br> or \n to create new lines. Instead, all the text displays on the same line and wraps around. If you want to see my code in action, ch ...

javascriptjqueryhtml

Assigning information to a button within a cell from a dynamically generated row in a table

I've been diligently searching through numerous code samples but have yet to find a solution to my current dilemma: My HTML table is dynamically generated based on mustache values and follows this structure: <tbody> {{#Resul ...

javascriptjqueryhtmlajaxbootstrap-4

Discovering the best way to organize and sort information retrieved from the backend within an Angular

How can I restrict a user to only search for data that has been provided from the backend and prevent them from creating new data? In my backend, there are two words: "Chart" and "Map". I am looking for a way to limit the user's search to only these ...

htmlangulartypescriptfilterangular-material

The custom radio button is not showing up on iOs Safari

My code for custom radio buttons using CSS is as follows: input[type=radio]{ display:none; } .radio-options label::before { content: "\2b24"; color:#e2e2e2; display: inline-block !important; width: 17px; height: 17px; vert ...

htmlioscssangularjssafari

Pass data back and forth between app.js (node) and javascript (main.js)

I am facing a challenge in sending and retrieving data (username) between app.js and main.js. In my setup, I have a node app.js that calls index.html which then triggers the main.js function called "clicked". Below is the code snippets for each file: app. ...

javascripthtmlnode.js

Hey there! I'm experiencing an issue with the jquery function $(this).childen().val()

Here is my HTML and JS/jQuery code: (function($) { $('.list-group li').click(function(){ console.log("push li"); console.log($(this).attr('class')); console.log($(this).children('.hidden_input&ap ...

javascripthtmljquery

Executing a function upon loading a page triggered by a submitted form

Recently on my index.php page, I implemented a form that posts data into a third-party newsletter system. After the form submission, the page reloads to index.php?mail&. Is there a way to detect when the page is loaded and determine if the form has bee ...

javascriptjqueryhtmlformspost

Concealing just the portion of an element that moves underneath a fixed see-through navigation bar

After extensive searching for a solution, I have encountered multiple similar issues but none have provided a resolution that works for my specific case. It seems I may be overlooking something obvious. The problem at hand involves a fixed transparent nav ...

jqueryhtmlcssnavalpha-transparency

Verify image loading using jQuery

<img src="newimage.jpg" alt="thumbnail" /> I am dynamically updating the src attribute of this image. Is there a way to verify if the image has been successfully loaded and take action once it is? Appreciate any guidance on this matter. ...

javascriptjqueryhtmlcss

Creating a div that becomes fixed at the top of the page after scrolling down a certain distance is a great way to improve user experience on a

I am struggling to create a fixed navigation bar that sticks to the top of the page after scrolling 500px, but without using position: fixed. Despite trying various solutions, none seem to work due to the unique layout of my navigation bar. Strangely enoug ...

javascriptjqueryhtmlcss

What is preventing me from being able to import a React component from a file?

I've double-checked my code and everything seems correct, but when I view it on the port, only the app.js file is displayed. import React from 'react'; import ImgSlider from './ImgSlider'; import './App.css'; function ...

javascripthtmlreactjsjsx

The SVG image exceeds the boundaries of the parent column div in bootstrap

I am struggling to make a SVG fit inside a column in a bootstrap div with col-lg-4. I tried using img-fluid, but it did not work as expected. The SVG should automatically adjust its size to fit the parent div. However, that is not happening. .star-ratin ...

htmlcsstwitter-bootstrapsvgbootstrap-4

Is it possible to automatically close navigation dropdowns when the screen size changes?

I am using a bootstrap 4 navbar with dropdowns that open with CSS animation/fade-in on desktop, and a separate toggle button for mobile. Everything works fine, but when I open the dropdowns on mobile and then resize the window screen, they remain open whic ...

javascriptjqueryhtmlcss

What is the best way to show real-time values using chart js?

Just recently, I've delved into the world of web development and am eager to learn how to integrate chart js for real-time value display. Could anyone offer advice or guide me through the process? var data = []; var temp = []; async f ...

javascripthtmlnode.jsejs

Deactivating an emitted function from a child component in Angular 4

There is a main component: @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { funcBoo():void{ alert("boo"); //return fal ...

javascripthtmlangulartypescript

What is the best way to showcase a div on top of all other elements in an HTML page?

As a newcomer to html and css, I have successfully created a div that contains city names. The issue I am currently facing is when I click on a button to display the div, it gets hidden behind the next section of my page. Take a look at the image below for ...

javascriptjquerycsshtml

Manipulate an image by hiding it, altering its contents, and then displaying it

I am seeking the most effective method to accomplish the following task: $("#some-image").fadeOut(); $("#some-image").attr("src", "new-src.png"); $("#some-image").fadeIn(); For timing purposes, the code below is a step closer, but it still needs improvem ...

javascriptjqueryhtmljquery-ui

What could be causing the issue with saving form data to local storage in React?

I am facing an issue with the code I have written to store data in local storage. Sometimes it works fine, but other times it saves empty data or erases the previous data when the Chrome window is closed and reopened. Any idea what could be causing this in ...

javascripthtmlreactjs