What are the steps to format text into 2 columns with a personalized design?

As I develop a website using HTML, CSS, and jQuery, I encountered a layout challenge. The text on the page is designed in a 2-column style, with an image positioned before it. Currently, the structure looks like this:


   <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>

However, my goal is to have the first column displayed before the image, while the second column appears beneath the picture. How can I achieve this?

jqueryhtmlcss

Answer №1

TRY IT OUT:

Give this a go:

p{
    text-align:center;
    color:#333;
    font-size:16px;
}

span {
    display:inline-block;
    background-color:#f9f9f9;
    padding:10px;
    margin:5px;
}

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

Java Chatclient with a User-Friendly HTML Interface

My team is embarking on a new project involving the development of a Chatclient to be integrated into a webapp. Our requirements include: - Java server - Java client We have nearly completed coding both the client and server, but now we face the challe ...

javahtmlapplet

Issue with Codeigniter's AJAX functionality causing div reloading to not function as intended

I am currently facing an issue where I can display text directly from the database on a webpage. However, when I edit the text in the database, I want it to automatically reload and show the updated text without having to refresh the entire page. Unfortun ...

javascriptphpjqueryajaxcodeigniter

Tips for switching back and forth between two classes using jQuery?

I'm having some trouble with the toggleClass function. It doesn't seem to be working correctly for me. The image should toggle between displaying and hiding, but it only changes to hide, not back again. You can view my example here, along with t ...

jqueryhtmlcssclasstoggleclass

Parallax Effect Slows Down When Scrolling In Web Page

Currently in the process of creating a website with a scrolling parallax effect using Stellar.js on the header and three other sections. However, I'm experiencing lag when scrolling, especially at the top of the page. I've attempted to reduce la ...

javascriptjqueryhtmlcssparallax

The ng-repeat ng-switch combination is not functioning as expected

My data can be simplified to the following in my code: function DemoCtrl($scope) { $scope.myData= [ {text: "blah", other: 3, V: 'caseOne'}, {text: "blah", other: 3, V: 'caseTwo'}, {text: "blah", other: 3, V ...

javascripthtmlangularjs

Encountering an "Aborted Session" error when clicking the first submit button in ASP.NET Core MVC

I am brand new to working with API calls in JavaScript using Ajax and I'm trying to figure it out as I go. Currently, I've begun developing an ASP.NET Core web application using MVC. In my Index.cshtml file, I've created an HTML form with ...

jqueryajaxasp.net-mvchttp-post

Error encountered with Angular version 4: Unexpected token export

Upon starting the app with the command ng serve, I encountered an error in the console: VM1018:2297 Uncaught SyntaxError: Unexpected token export at eval (<anonymous>) at webpackJsonp.../../../../script-loader/addScript.js.mod ...

javascriptjquerynode.jsangularnpm

Creating a nested JSON structure by fetching data from a remote source

i'm looking to populate the json file located at through a get request. This json contains music from various churches in different cities, with data organized into multiple levels. I want to parse this data using jquery and utilize hidden div elemen ...

javascriptjqueryajaxjsonhtml

Content in the Bootstrap carousel is not displaying properly within the arrow indicators

While working on my project and trying to implement a carousel element, I encountered an issue. The carousel arrows and autoplay options are functional, but the content does not appear between the arrows as expected. First, I included bootstrap in my proj ...

htmltwitter-bootstrapfrontendbootstrap-5

Switching the mouse cursor when the mousedown event occurs

I'm trying to implement a feature where holding down the mouse will change the cursor to an image, and when releasing the mouse it should revert back to its default. However, the code I have isn't working properly - you have to right click then l ...

javascriptjquerymouseevent

What could be the reason for the malfunction of Twitter Bootstrap's typeahead feature in this case?

Struggling to implement typeahead.js into my current project. Despite having bootstrap loaded, the source code does not mention anything about typeahead. As a result, I included the standalone js file with hopes of making it work. Upon implementation, the ...

javascriptjquerytwitter-bootstrap

Adjust the width dynamically according to the size of the parent container

My goal is to extract the width of a specific div, for instance: .ow_newsfeed_left (which has varying widths), and then apply that width to a child div. I've attempted using each, but it only assigns the first value. Here is the code I have come up ...

jquerywidthparenteach

Activating/Deactivating Checkbox using Jquery

I'm having trouble getting this code to function properly when there are multiple instances of datepicker on the page. When selecting the option "I currently work here," it is affecting all groups instead of just the current one, which is not the des ...

javascriptjquerydatepicker

The getElementBy method is failing to pass the value in the document

Here is the javascript code snippet I am using: document.getElementById('district').value = dist.long_name "this line is passing the value" document.getElementById('city').value = route.long_name "this doesn&apos ...

javascripthtml

Is it achievable to use PHP to automatically scroll to the bottom of a container?

Is there a way to automatically scroll to the bottom of a div container using PHP code instead of javascript or CSS? While I haven't been able to find a solution using just CSS, I have come across some options utilizing javascript. However, since I a ...

phpcssbootstrap-4

Passing the element ID from the controller to the Ajax response

I'm trying to create a new review using an Ajax POST call, and I want my controller to send back the ID of the newly created object so that I can update specific elements on my webpage with it. However, all I'm getting in return is the full webpa ...

jqueryruby-on-railsajax

The Sacred Chalice Trio Vertical Stretch Design

Recently, I've been working on creating a three column layout with percentage width. I stumbled upon the concept of the Holy Grail web design through some online articles and resources. To implement this layout, I referred to an example from The Perfe ...

htmlcsslayout

Refine the JSON data to only include the values you need

I've been spending a considerable amount of time on this challenge, but I'm facing difficulty in solving it. The issue at hand is that I have a JSON file that I am fetching from a URL, and my objective is to create a filter that displays only nam ...

javascriptjqueryjson

Tips on expanding the row number column width in jqGrid

Within my JQuery Grid, I am utilizing a parameter called rownumbers. jQuery("#dateInfo").jqGrid({ url : theURL, datatype : "json", sortable: false, colNames:['Date & Time'], colModel:[{name:'arrivalTime',index:'arrivalTime& ...

javascriptjqueryjqgrid

display and conceal elements according to the slider's current value

Currently, I am working on creating a slider that can show and hide elements as the slider bar moves (ui.value). Firstly, I used jQuery to create 30 checkboxes dynamically: var start = 1; $(new Array(30)).each(function () { $('#showChck') ...

javascriptjquery