Guide to positioning a div over a text column

Check out this picture to illustrate the issue :

I would like the columnized p element to behave similarly to the uncolumnized one, with text shaping around the div.

Here is the HTML code :

<div>hey, I should float !</div>
<p>Velit porttitor mattis nisi sit magnis nec et nunc pellentesque! Pulvinar est! Nunc massa, dapibus eu etiam ut? Enim eu vut porta scelerisque auctor auctor, integer. Natoque elit? Vel elit nunc nunc? Rhoncus platea tortor, et, velit integer dis, etiam elementum cursus? Ac cum scelerisque! Sit est turpis duis pid scelerisque eu nec lectus. Nascetur mattis.<p>
<hr>
<div>hey, I should float !</div>
<p>Velit porttitor mattis nisi sit magnis nec et nunc pellentesque! Pulvinar est! Nunc massa, dapibus eu etiam ut? Enim eu vut porta scelerisque auctor auctor, integer. Natoque elit? Vel elit nunc nunc? Rhoncus platea tortor, et, velit integer dis, etiam elementum cursus? Ac cum scelerisque! Sit est turpis duis pid scelerisque eu nec lectus. Nascetur mattis.<p>

Also, here is the CSS included :

p:first-of-type{-moz-column-count: 2; -moz-column-gap: 20px; -webkit-column-count: 2; -webkit-column-gap: 20px; column-count: 2; column-gap: 20px;}
p{text-align: justify;}
div{background: #c00;  height: 20px; width: 150px; float: right; margin: 10px; padding: 10px;}​

Could someone please help troubleshoot why my floating div is not displaying as expected?

You can view the live example on jsFiddle : http://jsfiddle.net/mmYQQ/

htmlcsscss-floatmultiple-columns

Answer №1

Erase 

p:first-of-type{-webkit-column-count: 3; -webkit-column-gap: 25px; -moz-column-count: 3; -moz-column-gap: 25px; column-count: 3; column-gap: 25px;}

out of the stylesheet

Answer №2

Eliminate the p:first-of-type{-moz-column-count: 2; -moz-column-gap: 20px; -webkit-column-count: 2; -webkit-column-gap: 20px; column-count: 2; column-gap: 20px;} from the stylesheet, as it is responsible for creating the appearance of a two-column layout.

Answer №3

Check out this Jsfiddle example

Give this CSS a try:

p{text-align: justify;}
#media{float:left;width:100%;}
#media .img{float:right;width:30%;background:#f00;color:#fff;margin-left:20px;}
.clearfloat{clear:both;height:0;font-size:1px;line-height:0px;}​

Answer №4

It seems the initial plan I had in mind is not feasible after all. Check out this resource for more information: http://www.w3.org/TR/css3-multicol/

However, what can be done (and what I actually intended to achieve) is to have an image float within a columnized text.

img{background: #c00;  height: 40px; width: 50px; float:right; margin: 10px;}

You can see how it works in action by viewing the fiddle here: http://jsfiddle.net/mmYQQ/6/

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

IDE: Unusual hues in HTML IDs and class parameter inputs

Netbeans is my new favorite tool, but I'm struggling to figure out how to change the font of html id and class parameter values. Right now, they're blending in with the tags and have a distracting background color. I've browsed through Tool ...

htmlnetbeanssyntax-highlighting

Encountered an error while trying to click the cookie button using Selenium: "object[] does not have a size or

I've been struggling to interact with a button inside a pop-up using Selenium, but I keep encountering this error: object [HTMLDivElement] has no size and location I initially tried to simply click the button since it is visible on the page and I wai ...

javascripthtmlseleniumselenium-webdriver

What steps should I follow to ensure that the "-> comes after the text?

Here is the link to my page: . Currently, the arrow appears under the text. I am looking for a way to rearrange it so that the arrow comes after the text while still maintaining its hover effect. Can you provide any suggestions? ...

css

Having difficulty deleting hyphens within a textbox in Chrome on an Android device

Within my React application, I have an input field with the type being "text". The specific requirements for this input are as follows: The user's input should be automatically capitalized. After the 7th and 13th character, a hyphen "-" should be ins ...

javascripthtmlreactjsgoogle-chrome

Tracking accurate responses with button click

In my quiz, I want to keep track of the correct answers selected by the player. When a player clicks on the correct answer, the counter should increase by one. At the end of the quiz, the HTML should display a message like "You got" + correct + "answers co ...

javascriptjqueryhtml

"Creating a HTML Table with Merged Cells using colspan and rowspan

Creating an HTML table with a unique layout is my latest project. I envision it to look like this: +-------+---+ | | | +-------+ + | | | +-----+-----+ | | | +-----+-----+ To achieve this, I'm utilizing a colgroup to split t ...

htmlcsshtml-table

Is there a way for me to determine which specific event is triggered when I interact with an HTML object?

Currently, I am attempting to download and utilize this mobile phone simulator. My goal is to locate the specific javascript code that enables me to switch devices in the "OS Simulator mode". While I have successfully set up a local version, I am facing a ...

javascriptjqueryhtmlgoogle-chrome-devtoolsie-developer-tools

Customizing the layout of div elements with Twitter Bootstrap for a responsive design

Utilizing Bootstrap's responsive style sheet, I have organized 4 squares in divs that span 12 columns - |3|3|3|3|. However, when I access this layout on a mobile browser, it displays as: |12| |12| |12| |12| My desired display format is: |6 ...

htmlcsstwitter-bootstrapresponsive-design

Utilizing document.getElementById().value in hidden fields for asp.net web pages does not function correctly

Recently, I developed a basic website using ASP.NET Web Pages with Razor markup. The site includes a form with two hidden fields: latitude and longitude. My goal was to utilize the HTML5 Geolocation API in my JavaScript script to obtain the user's loc ...

javascripthtmlasp.netrazor

Ionic ion-view missing title issue

I'm having trouble getting the Ionic title to display on my page: http://codepen.io/hawkphil/pen/oXqgrZ?editors=101 While my code isn't an exact match with the Ionic example, I don't want to complicate things by adding multiple layers of st ...

javascripthtmlcssangularjsionic-framework

The function 'append' is not defined for the HTMLDivElement object when using Internet Explorer

Here is a snippet of code to create a new div element: var divElement = document.createElement('div'); divElement.setAttribute("id", "testId"); element[0].append(divElement); In this code, the 'element' variable represents $element fr ...

javascripthtmlangularjsdomangularjs-directive

I'm struggling to make my div display inline

My div elements are not displaying inline, I'm thinking maybe I shouldn't use the nav and div structure like this. But starting over again seems like a lot of work. How can I fix this issue? Just so you know, I'm only on my 4th day of learn ...

htmlcss

Is it possible to create Plane Geometry using HTML elements in webGL?

I am interested in creating a plane with HTML elements in webGL that can perform actions like real HTML. For example, I want to create a button that, when clicked, triggers an animation feedback and runs a certain function. I have looked into solutions suc ...

javascripthtmlthree.jswebgl

Create a div element that expands to occupy the remaining space of the screen's height

I am trying to adjust the min-height of content2 to be equal to the screen height minus the height of other divs. In the current HTML/CSS setup provided below, the resulting outcome exceeds the screen height. How can I achieve my desired effect? The foote ...

javascripthtmlcss

Angular 6 - Setting up radio buttons with Bootstraps

I am currently implementing Bootstrap's radio buttons functionality in my Angular 6 project. When using a button group, the active state should switch to the clicked button every time a different button is clicked. If this is confusing to understand, ...

angularhtmlbootstrap-4

Best practices for selecting checkboxes and transferring values to another page in PHP/HTML

Apologies for my lack of experience in PHP. I am in the process of creating a project without any knowledge of PHP. I have set up a database with a list of users and can display users based on specific information through a search. Each search query has a ...

javascriptphpjqueryhtml

Tips for refreshing innerHTML without altering the entire content

I've written a JavaScript code that uses AJAX to periodically send an XMLHttpRequest to fetch data from a PHP file. The data retrieved is then added to the innerHTML of a <p> tag. However, every time new content is added, the entire paragraph se ...

javascripthtmlajax

having difficulty with an intricate flexbox grid within another flexbox

I attempted to create a grid-like pattern using a negative margin based grid system (Susy) but was unsuccessful. Next, I tried employing flexbox for the task. However, I'm unsure if it's achievable. My initial idea was to have 2 columns (side A ...

htmlcssflexboxsusy-sass

Resizing an image for mobile using next/Image

I have been using next/Image in conjunction with tailwind to display an image as a banner that spans the entire width of its container, which happens to be the full page width. The challenge I am facing is that the image appears distorted and unbalanced o ...

javascripthtmlcssnext.js

The width of the column is not the same

Despite setting both columns to equal widths using col-sm-6 in Bootstrap, the column widths are not actually equal. One appears smaller while the other is larger. If you have a solution to this issue that works on both mobile and laptop devices, please s ...

htmlcssbootstrap-4