Words hovering in a section next to a captivating picture

I am looking to achieve a specific arrangement:

I want two different texts (in block format) to float or display inline next to an image, all within a div element.

Despite trying various display settings (such as block and inline for text), I have not been able to get it to work properly.

HTML:

<div class="res">
<img src="<?php echo 'img/'.$row["sType"].'.png';?>"/>
<span>TITLEe</span>
<span>Description</span>
</div>

CSS:

.res {

    height:60px;
    background-color:yellow;
    border-bottom:1px solid black;
    text-align:left;

}

.res img {

    margin-top:8.5px;
    margin-left:5px;
    display:inline
}

.res span {

    display:block;
}
htmlcss

Answer №1

.container {
    width: 500px;
    border: 3px solid blue;
    padding: 15px;
    overflow: hidden;
}

.container img {
    margin-right: 10px;
    float: right;
}

.container h4,
.container p{
    margin-left: 12px;
    display: block;
    margin: 3px 0 0 0;
}
<div class="container">
    <img src="http://cdn3.iconfinder.com/data/icons/socialmediaicons_v120/48/facebook.png"/ alt="" >
    <h4>New Title</h4>
    <p>Description Here</p>
</div>​

Answer №2

Hey, have you ever wondered why elements used to float left? You can achieve the same result without using float like this:

<div class="box">
<img src="<?php echo 'img/'.$row["sType"].'.png';?>"/>
<div class="content"><h5>TITLEe</h5>
  <p>Description</p></div>
</div>

Css

    .box {
    height:60px;
    background-color:yellow;
    border-bottom:1px solid black;
}
img, .content{
vertical-align:top;
}
.content{
display:inline-block;
}
p, h5{
margin:0;
  padding:0;
}

You can modify the CSS classes according to your design preferences.

Answer №3

If you're looking for a traditional approach, you could consider using tables for your layout. However, it's worth noting that using tables for layout is generally not recommended in modern web design.

<table>
  <tr>
    <th><img src="yourimage" /> </th>
    <th >Some text here<br/>More text</th>
  </tr>
</table>

Answer №4

Give this a try and see if it works:

Here is the HTML code for you:

<div id="testDiv">
    <div class="imgContainer"><img src="path/image.jpg" /></div>
    <div class="textContainer"></div>
</div>

This is the CSS code:

#testDiv { float:left; width: 360px; }
#testDiv .imgContainer { float:left; width:120px; height:90px; }
#testDiv .textContainer { float:left; width:240px; height:90px; overflow:hidden }

Answer №5

Here is a suggestion for you:

HTML code snippet:

<div class="container">
  <img src="image.jpg" class='left;' />
  <h1 class='right'>HEADER</h1>
  <div class='right'>Description of the element</div>
</div>

CSS styling:

.container { width: 600px; /* Adjust as needed */ }
.left { width: 200px; float: left; }
.right { margin-left: 220px; width: 380px;}

This setup should work for your requirements. Feel free to customize the width and margins based on your design preferences.

Answer №6

Simply add this line of code:

padding-left: 20px;

to adjust the positioning of your content. It will shift it to the right by 20 pixels.

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

Can anyone provide guidance on how to create this particular shadow effect using CSS?

Is there a method to use CSS to create a green shadow in that particular shape? ...

cssshadows

Make the text stand out by highlighting it within a div using a striking blue

Currently, I am working with Angular2 and have incorporated a div element to display multiple lines of text. Positioned below the text is a button that, when clicked, should select the entirety of the text within the div (similar to selecting text manually ...

htmlcssangulartypescriptangular2-template

Sorting through various data inputs in one JSON file

I have a JSON file containing an array of objects: obj= [{fname:"abhi",age:5,class:"ten",lanme:"kumar" },{fname:"abhi",age:5,class:"ten",lanme:"kumar" },{fname:"abhi",age:5,class:"t ...

javascripthtmlreactjsuitableviewmaterial-ui

Skip nodes in Polymer 1.0 by using ExcludeLocalNames

I recently attempted to transition from Polymer version 0.5 to 1.0 and came across a particular question: Is there a way to exclude certain nodes inside a paper-menu? In the previous version (0.5), you could use the attribute excludedLocalNames to achieve ...

javascripthtmlpolymer

bootstrap navigation bar collapsible menu

Struggling with making the hamburger menu appear on my friend's site. Spent hours trying to troubleshoot, but still can't figure out why it's only showing up as a red box and appearing on larger screens instead of just smaller devices. Frust ...

javascripthtmlcss

CSS vertical text not functional as expected

Trying to make some text vertical, here is the CSS I'm using: h2.verticle{ color:#1a6455; border:0px solid red; writing-mode:tb-rl; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -webkit-transform:rotate(90deg); -moz-transform:rota ...

css

Utilize jQuery to extract all values from the second cell of a table and store them in an array

I have a task that involves pushing numbers from text boxes into an array. These text boxes are located in the second cell of each table row, while the third cell contains a date picker. Currently, the code snippet provided retrieves all values from both ...

javascriptphpjqueryhtmlhtml-table

Updates to the Tailwind file are not appearing on the page after reopening the file

Every time I reopen the project, the file tailwind properties do not get rebuilt and if I add new properties like text-color, they are also not reflected. Any suggestions on how to solve this issue? I need the project to update and take in new properties ...

htmlcsstailwind-css

Hide the element once the CSS animation has finished

I have successfully implemented an animation using pure CSS that starts on load. However, I am facing an issue with both opacity and visibility as the div continues to take up space even when hidden. Question Is there a way to make the div disappear comp ...

cssanimationtimecss-animationsdisplay

Issues are arising with Angular Form where the FormControl is not being properly set up for the first field in my form

After grappling with this issue for several weeks, I am still unable to pinpoint the cause. (Angular version: 16.1.4) The form component is populated using a BehaviorSubject, and although the console prints out the correct values for both the form and dat ...

htmlangulartypescriptformsangular-reactive-forms

Navigation Menu Spanning Across Full Width of All Screens

Hello! I am currently working on designing a responsive menu using HTML5 and CSS. My approach involves creating a navigation menu for desktop computers and implementing a checkbox with a label to reveal the responsive menu when needed. Here is the code s ...

csshtml

Eliminate the gaps between the columns of the table

Is there a way to eliminate the gap between the day, month, and year columns in this table? <form action='goServlet' method='POST'> <table style="width:1000px" style="text-align:center"> <tr style="text-ali ...

htmlcssjsp

How can I modify the font size of h1 and h2 elements in CSS?

I am currently working with a WordPress twenty eleven theme and I am trying to adjust the size of my headings. Specifically, when I enclose my headings in h1 and h2 tags like so: <h1>My h1 heading </h1> <h2> My h2 heading </h2> The ...

csswordpresshtml-heading

Obtaining the href content from a specific class using Selenium

I am attempting to extract information from a webpage that contains the following HTML: <div class="someclass"> <p class="name"><a href="#/word/1/">helloworld</a></p> </div> My objective is to retr ...

pythonhtmlcssxpathselenium

Overlap and cover additional elements within a DIV

I am looking to create a versatile function that can effortlessly overlay various elements such as selects, textfields, inputs, divs, tables, and more with a partially transparent div matching their exact height and width. I have managed to obtain the pos ...

javascriptjquerycssjquery-pluginstwitter-bootstrap-3

Adding data from PHP into a designated div element

update: After some trial and error, I managed to find a solution using jQuery and append() methods. From my PHP code, I created an array containing all the necessary information that I wanted to insert into the tab divs. I then encoded this array into JSON ...

phpjavascriptjquerymysqlhtml

What is the best way to retrieve the value of the nearest text input using JavaScript?

I am currently working on designing an HTML table that includes a time picker in one column for the start time and another time picker in a separate column for the end time within the same row. My goal is to retrieve both values (start time and end time), ...

javascriptjqueryhtmljquery-selectors

Running a Python script through a Javascript event

I'm looking to enhance my webpage by implementing a feature where users can generate a personalized QR code with the click of a button. My current setup involves a Python script that creates the QR code image and saves it as a .png file. I want to int ...

javascriptphppythonhtmldjango

Changing the Image Path According to the Device's Retina Ratio

I'm currently setting up a website for a photographer and working on creating a gallery. To streamline the process, I have automated many aspects such as file names, paths, widths, lightbox classes, etc. All I have to do in the HTML is write an <a ...

jquerycssretinaretina.js

Using jQuery to iterate over a multi-dimensional array and showing the child elements for each parent array

I am facing an issue with a multidimensional array that contains objects and other arrays. While it is simple to loop through the parent array and display its contents in HTML, I encounter a problem when there are multiple layers of arrays nested within ea ...

javascripthtmljqueryarraysmultidimensional-array