Image floating to the left and right sides within a group, with the text vertically aligned in the middle of a div of unspecified height

Can text be vertically aligned in the middle of a div with an unknown height when there is a floated image present? Specifically, for the first and third div group of 'groupsection2', the image will float to the left; and for the second and fourth group of 'groupsection2', the image will float to the right:

<div class="groupsection2 clear">
<div class="groupfeature">
<span><img src="testing-images/antec-quality-h230.png" alt="" height="230"/></span>
<div class="feature-content">
<h3>Reliability you can count on Reliability you can count on</h3>
<p>EA-380D Green is backed with AQ3 - Antec Quality 3 year parts and labor warranty, and you get   
unlimited access to Antec’s incomparable technical support and customer service</p>
</div>
</div>

<div class="groupsection2 clear">
<div class="groupfeature">
<span><img src="testing-images/antec-quality-h230.png" alt="" height="230"/></span>
<div class="feature-content">
<h3>Reliability you can count on Reliability you can count on</h3>
<p>EA-380D Green is backed with AQ3 - Antec Quality 3 year parts and labor warranty, and you get   
unlimited access to Antec’s incomparable technical support and customer service</p>
</div>
</div>

<div class="groupsection2 clear">
<div class="groupfeature">
<span><img src="testing-images/antec-quality-h230.png" alt="" height="230"/></span>
<div class="feature-content">
<h3>Reliability you can count on Reliability you can count on</h3>
<p>EA-380D Green is backed with AQ3 - Antec Quality 3 year parts and labor warranty, and you get   
unlimited access to Antec’s incomparable technical support and customer service</p>
</div>
</div>
htmlcss

Answer №1

You have not provided any CSS code for review, and it appears that you may be missing a closing </div> tag in your code blocks.

To help accomplish what I believe you are attempting to achieve (compatible with IE9+), consider the following solution:

HTML

<div class="groupsection2 clear">
    <div class="groupfeature">
        <span><img src="testing-images/antec-quality-h230.png" alt="" height="230"/></span>
        <div class="feature-content">
            <h3>Reliability you can count on Reliability you can count on</h3>
            <p>EA-380D Green is backed with AQ3 - Antec Quality 3 year parts and labor warranty, and you get   
            unlimited access to Antec’s incomparable technical support and customer service</p>
        </div>
    </div>
</div>

CSS

.feature-content {
    position: relative;
    top: 50%;
    transform: translateY(50%);
}

Fiddle
http://jsfiddle.net/tmabpn8d/

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

What is the best way to create a mobile design in Dreamweaver while utilizing the same css file as my Desktop code?

Where does my layout provide a solution, and what adjustments can be made? I attempted modifying the screen dimensions in the Dw Design page without success. ...

htmlcssmobilelayoutdreamweaver

Replace existing styled-component CSS properties with custom ones

One of my components includes a CheckBox and Label element. I want to adjust the spacing around the label when it's used inside the CheckBox. Can this be achieved with styled()? Debugging Info The issue seems to be that the className prop is not b ...

javascriptcssreactjsstyled-components

Storing values from a content script into textboxes using a button press: a simple guide

I am new to creating chrome extensions and currently utilizing a content script to fetch values. However, I am facing difficulty in loading these values into the popup.html. Here is the code snippet: popup.html <head> <script src ...

javascripthtmljsongoogle-chrome-extension

Having trouble with JavaScript/JQuery not functioning properly in HTML content loaded using the load() method

My goal is to load an input form from a separate file called new_machine.php into my index.php. This form includes an input with a dropdown that retrieves options from a MySQL database and displays them as anchors. The issue arises when I attempt to manipu ...

javascriptphpjqueryhtmlajax

Display fixed or absolute elements within a scrollable container

I want to create a unique design with overlapping divs that can be selectively displayed through scrolling. While this effect is possible with images using background-attachment: fixed, I am seeking a solution that can work for any child element. Here is ...

css

Using the combined power of CSS and jQuery to create dynamic visual effects based

Having some trouble figuring out why this code isn't functioning as expected... I've got a bunch of DIVs that have the class .rightColumnButton. Some of them currently have a height set to 30px: .rightColumnButton{ height:30px; width:206px; mar ...

jquerycssjquery-animate

Customizing a material-ui theme with withStyles() in conjunction with withTheme()

After developing a series of reusable components, I started styling them by utilizing classes prop to override the MUI classnames. To streamline the process and prevent repetition in more intricate components, I consolidated common styles into a theme. Eac ...

cssreactjstabsthemesmaterial-ui

Unexpected behavior with HTML Bootstrap's dl-horizontal layout

Despite having the div class "dl-horizontal" within the table, the dl-horizontal fields are displaying outside the table. Here is the code I used: <!DOCTYPE html> <html lang="en> <head> <title>Bootstrap Example</title> ...

htmlcssbootstrap-4

CSS slider experiencing issues

I'm currently working on creating a custom CSS ticker by referencing various examples online. I've managed to develop something that functions well, but it seems to only cycle through the initial 4 list items. Once it reaches the 4th item, it loo ...

htmlcsscss-animationsticker

Can using display: none impact the SEO of a website's navigation menu?

Is there a difference in SEO impact between using display:none with CSS and using display:none with jQuery for menus? Appreciate the insights! ...

jquerycssseomenu

The previous method of using `vue/compiler-sfc ::v-deep` as a combinator has been phased out. Instead, opt for the new syntax `:deep(<

When developing with Nuxt 2, I am encountering numerous [@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead. errors when running npm run dev. After attempting to resolve the issue by changing a ...

cssvue.jsnpmnuxt.jsvue-sfc

Can JavaScript be used to upload a file directly to memory for processing before transferring it to the server?

I'm exploring the idea of using a JavaScript encryption library (not Java) to encrypt a file before sending it to the server. Is it feasible to perform this process on the client-side and then upload the encrypted file using JavaScript, storing it in ...

javascripthtmllocal-storage

When employing a CSS combination of `position: fixed;` and `display: flex;`, the upper portion of the inner element is excised and out of reach

I'm currently working on a fullscreen modal and facing an issue with centering the content vertically when it is smaller than the screen. Additionally, I need the content to start at the top and allow scrolling when its height exceeds the container&ap ...

htmlcss

Achieving responsive masonry layout with Bootstrap 4

I'm attempting to implement the bootstrap 4 masonry effect on my website, but I'm facing issues with card responsiveness. The page is very basic without any special effects. While the page works well when resizing the browser window, it doesn&ap ...

javascripthtmlcssresponsive-designbootstrap-4

Steps for Sending Data Using a URL

I am having trouble deleting a row based on its id. Below is the code I am using: <tr> <th>ID</th> <th>Nom etudiant</th> <th>Prenom etudiant</th> ...

phphtml

Issue with $_FILES and $_POST data being empty during file uploads

There's a strange phenomenon I've observed when uploading videos - sometimes the $_POST and $_FILES array is completely empty. It's happened with a few of the videos I've tested, all of which are in the video/mp4 file format. <!DOCT ...

phphtmlmultipartform-data

Utilizing the @page CSS rule in Vue.js: A step-by-step guide

I am facing an issue with printing a specific page in landscape mode. Here is the code snippet I have been using: @page { margin: 0; size: A4 landscape; } The problem is that this style rule affects all pages in my application because all style se ...

cssvue.jsvue-component

Update the span's content according to the user's input

Is it possible to update the value of a span to match that of an input field in HTML? HTML: <p style='font-size:150%'> Hey friend, I am <span id='name_display'>Anonymous</span>, I'd like to invite you to..... &l ...

javascriptjqueryhtml

Is there a way to make my red div switch its background color from red to green when I press the swap button?

How can I make the red div change its background color to toggle between red and green when I click on the swap button in the following code? $(document).ready(onReady); var numberOfClicks = 0; function onReady() { console.log('inside on ready ...

javascriptjqueryhtmlcss

Is there a way to retrieve data from two tables by linking the foreign key in one table to the primary key in another table?

I'm currently working on a menu item and have run into an issue with the information being displayed for the second level submenu (letters). Despite trying various join methods, I am unable to get the correct data - it either pulls only one of my subm ...

phpmysqlhtml