Arranging text and images strategically

I am trying to position an image and text within separate containers using div.

The desired layout is to have the img floated left and the text centered on the page, but I am having trouble achieving this. Each element has its own div.

Can you provide assistance on how to accomplish this?

Below is the CSS and HTML code I am currently working with:

 #ImageDiv {
   position: relative;
   margin: auto;
   width: 250px;
   height: auto;
   float: left;
 }
 #TextDiv {
   position: relative;
   width: auto;
   height: auto;
   text-align: center;
   margin: auto;
   float: left;
 }
 #ContainerDiv {
   text-align: center;
   width: auto;
   height: 104px;
   background-color: rgb(252, 251, 249);
   position: relative;
   border-radius: 5px;
   border-style: inset;
   border-width: 2px;
   font-size: 22px;
   color: rgb(46, 84, 0);
   margin: auto;
 }
<div id="ContainerDiv">
  <div id="ImageDiv">
    <img style="float: left; margin-right: 5px;" src="imagePath" alt="Alternate Text" />
  </div>
  <div id="TextDiv">
    <h5>Some Text Goes Here...</h5>
  </div>
</div>

htmlcss

Answer №1

Check out this example to properly position the text within a div

#ContainerDiv {
    position: relative;    
    border:1px solid red;
    overflow: hidden; /* clearfix */

}

#ImageDiv{
    float:left;
}

#ImageDiv img {
    display: block;
}

#TextDiv{
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background: #bada55;
}
<div id="ContainerDiv">
        <div id="ImageDiv"><img src="http://lorempixel.com/output/animals-q-c-150-150-1.jpg" alt="Alternate Text" /> </div>
        <div id="TextDiv"><h5>Insert Your Content Here...</h5></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

Having additional space preceding list elements within a flexbox setup

Check out the code snippet below: HTML Code <ul class="menu"> <li><a href="#">Item 1</a></li> <li> <a href="#">Item 2</a> </li> <li> <a href="#">Item 3</a> </li& ...

htmllistcssflexbox

What is the best way to connect a line from the edge of the circle's outermost arc?

I am attempting to create a label line that extends from the outermost point of the circle, similar to what is shown in this image. https://i.sstatic.net/OqC0p.png var svg = d3.select("body") .append("svg") .append("g") svg.append("g") .attr("cl ...

javascripthtmlcssd3.jssvg

How to apply hover effect to an image within a div using TailwindCSS

Is there a way to animate only the image and not the entire card (div) when hovering over it? I want specifically for the image to perform an animation, such as bounce effect. I'm using next/image for displaying the image. Can this animation be achie ...

cssnext.jstailwind-css

Storing an HTML page in a PHP variable, parsing it, and displaying it correctly

I am currently using the simple_html_dom parser to extract information from an HTML page. After making some modifications, I would like to display this content on my own page. $page = file_get_html($url); foreach($page->find('div#someDIv') as ...

javascriptphphtmlsimple-html-dom

Python (Selenium): Error - An unexpected issue arose during the execution of the given command

Encountered an issue with my Python code that is responsible for downloading data from a table on a web page and saving it to a local CSV file. The error message suggests an unknown error occurred during processing. See below for more details. Error Messa ...

pythonhtmlselenium

(CSS) Unusual phantom white outline surrounding menu with no visible border

I've just finished creating my first multi-level drop-down menu, but I'm encountering two white border issues. The first white border appears at the bottom of the menu and seems to be related to the padding of the a-elements. The specific area in ...

htmlcssmenu

How to set up a multi-select box for tagging purposes

I tried to implement a multi select box to create tags using the code below. I downloaded select2.min.css and select2.min.js from https://github.com/select2/select2, then copied them into the project's css and js folders. Here is the HTML code snippe ...

javascripthtmlcsstwitter-bootstrap

Unable to submit form at the moment

I am currently exploring PHP/POST methods to assist me in my day-to-day job as a Web Developer. Despite following online tutorials, when I attempt to submit the form, the page redirects to bagelBack.php, but displays a blank page and does not submit the tw ...

phphtmlposttwittertwitter-oauth

Store the injected HTML within a PRE tag as a variable

My question pertains to a DIV HTML element that is responsible for displaying some HTML content from a variable: <div contenteditable="true" ng-bind-html="renderHtml(currentOperation.description)" ng-model='currentOperation.description&a ...

htmlangularjsbindpre

Revamp and Enhance Your Layout Using Bootstrap Cards

I am working with a bootstrap card and trying to control the visibility of the .task__content part using CSS transforms. Specifically, I want to hide it with transform: scaleY(0) and reveal it on hover over the .task element. However, I am encountering a s ...

htmlcsstwitter-bootstrapbootstrap-4css-transforms

Unsuccessful attempt at a basic CSS transition - no success

I'm currently trying to create an image with a gradient that disappears on hover, but I'm struggling to get the transition effect to work. I've experimented with various webkit transitions without success. Here's the HTML: <a href= ...

htmlcsshovercss-transitions

Is it possible to execute a function defined within an eval() function using setInterval()?

const evaluation = eval(document.getElementById("codearea").value); setInterval(evaluation, 10); I am seeking a way to access a function that is declared within the eval function, for example: setInterval(evaluation.examplefunc, 10) I attempted ...

javascripthtmlthree.js

What is the best way to vertically align two divs on the left and right?

Having trouble aligning my dropdown list vertically with my textarea on the left. It seems like they are clashing together for some reason. UPDATE: Thank you for the assistance, I was able to make the necessary adjustments. JSP: .ExeDropdown{ float: ...

htmlcssjsp

What is preventing us from setting a child's width and height to match that of the parent element?

Parent element is a div with a width of 300px and a height of 40px, containing a child input. In the following code snippet: myinput = document.getElementById("e2"); myinput.style.cssText ='width:100%;height:100%;padding:0px;margin:0px;' div{ ...

javascripthtmlcss

Inquiry regarding the grid structure within my react application

When attempting to arrange my images in a grid layout, I encountered a strange issue after applying CSS grid. The grids ended up being organized horizontally instead of how I wanted them to be - two or three images per line. The component hierarchy is as ...

cssreactjscss-grid

The header logo will have an absolute position to overlay the navigation menu when the screen is resized

I am currently working on a website layout that involves using position: absolute for the logo to overlay another div below it, purely for stylistic reasons. While I have achieved this effect, it doesn't translate well into responsive web design. When ...

htmlcss

Conceal Child Component Element Upon onClick Event with ReactJS

As someone new to React, I am learning by coding. Currently, I have component A which includes a select element with menu items (all material UI). Is it possible for the whole component to disappear once a user chooses an option from the dropdown? Essentia ...

javascriptcssreactjsmaterial-uimaterial-design

CSRF token not recognized. Request cancelled. Even after including the CSRF token {% csrf_token %}, the error persists

I'm encountering an issue with the CSRF token being incorrect or invalid. I have included the {% csrf_token %} above my form, but I am still facing this problem. Can anyone assist me with this? Here is a snippet of my HTML file: <h4>regist ...

pythonhtmldjangoformscsrf-token

Iterate through each entry in the database and identify and fix any duplicate records

In my form, I have a JSON array that includes the name and value of each input. I am attempting to add an "optionprix" attribute for each input with the "optionname" class based on the corresponding value of the input with the "optionprix" class. Here is ...

javascriptjqueryhtmljson

Is it possible to create a translucent glass floating box over HTML elements, similar to the frosted glass effect seen in iOS7?

Creating an overlapping div with a frosted glass effect typically requires using an image background (like ). I am interested in having a floating div (position:fixed) that can apply a frosted glass effect over any content below it, whether it be an image ...

javascriptjqueryhtmlcss