Adding an image to a two-column layout with text

Seeking assistance with my website creation using HTML, CSS, and jQuery. Currently, I have a text layout formatted in two columns with an image placed before the text as shown below:

<div>
    <div style="float:right">
        <img src="imageSource"/>
    </div>    
    <div style="-webkit-column-count: 2; -moz-column-count: 2; column-count: 2;">
        TEXT
    </div>
</div>

My desired layout is to have the first column displayed before the image, while the second column appears underneath the picture. How can I achieve this design?

jqueryhtmlcss

Answer №1

Transform it into this:

<div class="column1">text</div>
<div class="column2">
    <img src="http://placehold.it/200x100">
    <div class="col2text">text</div>
</div>

Include the following CSS:

.column1{
    float:left;
    width:200px;
    border:1px solid black;
    height:400px;
}
.column2{
    width:200px;
    border:1px solid red;
    height:400px;
    float:left;
}

http://jsfiddle.net/y8md61no/

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

Locate a specific class inside a div and switch the CSS style to hide one element and reveal another

I have two divs, each containing a span. By default, the display of each span class is set to none. My goal is to toggle the display property of the span within the clicked div. If the span is already visible, I want to hide it; if it's hidden, I want ...

javascriptjqueryhtmlcss

Obtain the computed style by utilizing setTimeout for effective functionality

I want to retrieve the calculated style (background-color) of a span element. Here's my HTML code, consisting of two label elements, each containing an input and a span: <label> <input type="radio" name="numbers" value="01" checked/> ...

javascripthtmlcss

The layout causes issues with responsiveness on the Flask app page

I'm currently in the process of developing a web application and I've implemented a navbar.html file as the layout for each page using the following code: eachpage.html : {% extends 'navbar.html' %} {% block body %} <div class=" ...

htmlcssflask

In my current project, I am developing a memory game using Ionic and Angular. The game involves displaying an ever-expanding list of numbers for the user to memorize, followed by the user typing

I am trying to make each number in an array appear and then disappear one by one. However, I have encountered an issue where only the last number shows up when there are multiple numbers in the array. I believe the problem lies within the for loop, but I h ...

htmlangularfor-loopionic-frameworkionic5

Ways to troubleshoot React JSX/HTML input issue displaying as -$NaN.undefined

https://i.sstatic.net/1xIvb.pnghttps://i.sstatic.net/aeQrS.pngI'm currently facing an issue while trying to implement an input field that subtracts a number from another computed value within an HTML table setup. I've noticed that everything work ...

htmlreactjs

Positioning a div to the right of another div within a container (box)

I'm currently trying to line up two divs alongside each other within a box. Using angularJS, I am dynamically generating input boxes and looking to include an image for the delete option next to each input box. Despite using "display: inline-block", I ...

javascriptjqueryhtmlcssangularjs

Pass PHP array to a JavaScript file using AJAX

Starting with a basic knowledge of PHP and AJAX, I was tasked with creating a form that prompts the user to choose between two car manufacturers. Upon selection, the form should display all models of the chosen make from a multidimensional array stored in ...

javascriptphpjqueryjsonajax

@keyframes shimmering-fade

I'm attempting to create a text animation effect (please see video) but I'm struggling to find the solution!! Can someone assist me with this? Should I use JavaScript for a better result? h1.fadeinone { animation: fadeinone 10s;} h1.fadeintwo ...

javascriptjqueryhtmlcsscss-animations

What methods are available to modify HTML content using Node.js?

I am looking to modify the contents of my HTML file (index.html) below: <html> <body> <div id="greeting">Hello world</div> </body> </html> I want to change this using Node.js in the backend. Below is the Node.js cod ...

htmlnode.js

The navigation bar is not extending to fill the entire width of the screen

I recently created a navigation bar using the nav tag and applied CSS to set the width, border, and padding. However, I noticed that there are some empty pixels on each side of the navigation bar that I can't seem to fill up. Here is the HTML code for ...

htmlcss

Issues with the collapse feature in Bootstrap 5.1.3 accordion

I'm currently utilizing an accordion style to display various sets of information on a website. While all the correct information is being displayed, I am facing an issue where the accordion items are not collapsing as expected. Below is the code snip ...

phphtmlcsstwitter-bootstrapbootstrap-5

Steps to invoke a function to add an element into a list

Every time a user clicks on a button, I want to generate a new tab. In this tab, when the user clicks again, I want a function to be called like: onclick('+reportname+','+report type+') onclick("'+reportname+'","'+repor ...

javascriptjqueryasp.net

Styling Navigation in Internet Explorer 7 and 8

I'm encountering issues with a drop-down menu system specifically in IE7 and 8. The functionality is smooth in Chrome and FF, but for some reason, it fails to apply certain styles and ends up misaligned in the IE7 and 8 browsers. You can check it ou ...

menucssnavigation

Struggling to make changes to a Styled Component in a React application

In a certain file, I have a BaseComponent composed of various other components and being exported. The top level of the BaseComponent contains a wrapper responsible for managing margins. When I export it and attempt to override some styles with: //other fi ...

javascriptcssreactjsstyled-components

Retrieve the size of an element without having to wait for the browser to "recalculate style"

I am currently focused on optimizing the performance of some code that heavily relies on graphics. One of the main issues I am encountering is the delay in obtaining the dimensions of a specific div element. Most of the time, this process runs smoothly, bu ...

javascripthtmlcanvashtml5-canvaspixi.js

Vue.js: click event does not trigger transform animation

I am facing a challenge with rotating an arrow icon within a dropdown menu. Despite my efforts, the rotation does not synchronize with the appearance of the dropdown menu. Here is the Vue component code snippet: <nav> <section class= ...

javascriptcssanimationvue.jsrotation

Issues with HTML keycodes not functioning properly in Firefox

Here is the code I am using: function restrictInput(e) { var charCode = (e.which) ? e.which : ((e.charCode) ? e.charCode : ((e.keyCode) ? e.keyCode : 0)); if((charCode < 48 || charCode > 57) && ( ...

javascripthtml

Loop through each row in the Datatable and access the details or child

I need to iterate through each child row in a datatable. For example, if I have AJAX data structured like this: "data": [ { "date" : "1/17/2016", "supplier" : "supplier1", "total" : "$10", "payment" : "Cash", "product" : Array[2] ...

javascriptjqueryajaxdatatables

Transforming the jQuery tooltip to be shown in a column layout

Hello, I am currently using the displayTag library to showcase some tables. My goal is to include a tooltip on each display:column element by utilizing jQuery. Below is the code snippet in question: <c:set var="titleName"><wp:i18n key="FILENAME" ...

javascriptjqueryjspdisplaytag

The output when evaluating the xpath query "html/body/div/text()[1]" shows as [object Text], indicating there may be an issue with accessing the element's text using Selenium

My goal is to retrieve the value "479" from the given HTML snippet: <div data-testid="testid"> "479" " Miles Away" </div> In my Python Selenium script, the code I am using looks like this: xpath = 'html/b ...

pythonhtmlselenium-webdriverweb-scrapingxpath