What is the best way to prevent content from spilling over into the div on the right

I'm having trouble with a two column div where the text in the left column is overflowing into the right column. How can I prevent this?

http://example.com

<div id="wrapper-industry">
<div id="wrapper-form">
    <div id="form_row">
        <div class="form_cell1">
            <p>Lorem ipsum dolor sit amet, usu quis malis qualisque eu, vitae deleniti cum ne... (truncated for brevity) ...wdi mundi maluisset eu.</p>
        </div>
        <div class="form_cell2">
            <img height="347" src="http://www.exampleimage.jpg" style="display:block; margin:0 auto;" width="385" /></div>
    </div>
</div>
<div class="industry-intro rtecenter">
    <p>This text is going into the Apple column. This text is going into the Apple column.... (truncated for brevity) ...mn. This text is going into the Apple column.</p>

        </div>
    </div>
csshtml

Answer №1

It is necessary to clear the float

<div style="clear: both"></div>

View the demonstration here

Answer №2

You've successfully implemented display:inline-block;, and now you want the text to appear below the apple in the apply column... simply rearrange your HTML, remove float:left;, and you're good to go.

Check out the updated jsFiddle with tweaks to the HTML structure and CSS.

<div id="form_row">
        <div class="form_cell1">
            <p>Lorem ipsum dolor sit amet, usu quis malis qualisque eu, vitae deleniti cum ne. Agam patrioque in sit, no usu erant docendi gubergren. Viris tritani molestie sea id, duo no meis partem. Per ut quot mnesarchum. Ut diam voluptatum instructior vim, agam natum dolorum in mei. Ferri electram sea ne. Simul laboramus ad nec. Ei pro animal disputando, harum platonem no pri. Ius meis apeirian necessitatibus ad, ut eripuit sensibus mei. Doming integre sea te, cum ad atomorum democritum. Malis omnes utamur mea no. Vis discere alterum maiestatis ea, periculis torquatos mei ut. Error scaevola ut quo, ad pri impetus noluisse probatus....

I have also removed the whitespace between .form_cell1 and .form_cell2 to prevent the display:inline-block; elements from exceeding 100% width.

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

Using the power of AJAX, retrieve data from a PHP script and showcase the response within

Within my HTML file, I have implemented a feature that allows users to input a value. To validate this input, I created a PHP script that checks if the entered value exists in the database. The script returns the following JSON response: {"active":true} ...

javascriptphpjqueryhtmlajax

Challenges arise when utilizing CSS3 animations in conjunction with transitions triggered by toggling a JavaScript class

Struggling to activate an animation while updating a class using JavaScript for a PhoneGap app. Planning on utilizing -webkit- prefixes for compatibility. However, the animations are currently unresponsive in Chrome during testing, both when applied to th ...

javascripthtmlcsscordova

Enhancing websites with font-awesome icons and upgrading from older versions to the latest

Seeking guidance on updating our project to use the latest Macadmine theme. The transition from Font Awesome 3 to Font Awesome 4 requires changing all icons to their proper names. I came across a helpful resource at https://github.com/FortAwesome/Font-Aw ...

cssangularjsfont-awesome

Implementing MySQL in JavaScript code leads to various possibilities

I am working on a web application that requires retrieving values from a MySQL database. The process involves: PHP code generates an HTML page successfully. Clicking a button updates a cookie, which also works. Using the cookie in a MySQL query, which is ...

phpjqueryhtmlmysqlajax

Optimizing web development: Employing HTML templates to dynamically enhance website performance

My task involves the redesigning of an existing website (foo.com) using .NET and C#. The website caters to multiple companies such as abc.com, def.com, ghi.com, etc. Currently, the website utilizes html templates specific to each company's website in ...

c#asp.nethtmlrefactoring

Guide to concealing List elements from the Search Filter when the search input field is emptied

I am facing a challenge with an HTML list of items. Here is the structure: <ul id="fruits"> <li><a href="#">Mango</a></li> <li><a href="#">Apple</a></li> <li><a href="#">Grape</a>& ...

javascriptjqueryhtml

Utilizing jQuery to target elements that are dynamically generated upon successful AJAX response

When handling dynamically created elements on ajax success, I encountered an issue. I have multiple checkboxes within a table and when the table content is replaced on ajax success, I am unable to select any new checkbox. While it is possible to trigger cl ...

javascriptjqueryhtmlajax

Aligning the 'container-fluid' slideshow and video player

I'm struggling to center a video in a slick slider that is set as a 'container-fluid'. The slideshow and video display fine across the full width of the browser, but when I resize the browser window or view the site on a lower resolution, I ...

javascriptjquerycsstwitter-bootstraphtml5-video

Utilizing nested classes in CSS or SCSS for calling a class within another class

I am having trouble calling a class within another class. Can someone help me figure out how to do it? Here is the HTML code: <div class="main">Content</div> <div class="cover">Cover content</div> And here is t ...

css

The alignment of the navigation menu disrupts the functionality of the dropdown sub-menus

I'm finding it challenging to center the navigation menu while maintaining the functionality of the drop-down li elements. Here is my demo: http://jsbin.com/tosayosino/1/edit?html,css,js,output Removing the float:left; property from .jetmenu li succ ...

jqueryhtmlcss

What are the steps to implementing PNG masking using PixiJS?

I am currently working on incorporating a png sprite as a mask for another layer. I found a demo on the pixi.js official website and created this fiddle: https://jsfiddle.net/raphadko/ukc1rwrc/ The code snippet below is what I am using for the masking fu ...

javascriptcsspixi.js

Javascript callback function cannot access variables from its parent function

As a Javascript newbie, I am currently diving into callbacks for my project. The goal is to retrieve address input from multiple text boxes on the HTML side and then execute core functionalities upon button click. There are N text boxes, each containing an ...

javascripthtmlcallback

Ways to eliminate gaps between div elements with CSS

I am currently working on a webpage that consists of one main div housing two inner divs (left_menu and content), along with an additional footer div outside the main container. When viewing the page, there seems to be a noticeable gap between the footer ...

htmlcss

Type in "Date" and select a date using your mobile device

Hey, does anyone know a good solution for adding placeholder text to an input with type="date"? I'm looking for a way to utilize the phone's built-in date selection feature on a website, rather than having users manually enter dates using the ke ...

javascripthtmlformsinput

Unexpected Error: Null value prevents accessing 'getElementsByClassName' property in HTML, along with Troubleshooting Inactive Button Behavior in HTML

Can someone identify the error in my HTML code? I keep getting an "Uncaught TypeError: Cannot read property 'getElementsByClassName' of null" error on the second line of the script tag. Additionally, my implemented active header code is not funct ...

javascripthtmlcss

The MIME type 'text/html' is incompatible with stylesheet MIME type and is not supported

I have exhausted all possible solutions for the issue, from specifying the type for <link rel="stylesheet" href="./style.css" /> to using app.use(express.static('public')), but unfortunately, none of them seem to resolve the problem. index ...

javascriptcssreactjswebpackmime-types

Perform a check on the state of the slideToggle using an if-else function and provide a report on the slideToggle state

http://jsfiddle.net/vmKVS/ I need some help understanding the functionality of slideToggle using a small example. After toggling for the first time, the options element changes color to green. However, I expected the menu element to turn red when I togg ...

javascriptjqueryhtmlcssslidetoggle

The compilation of SCSS CSS is encountering an error with the provided CSS code

Upon compiling SCSS, I encountered an error with the following CSS: span.icon-hcp { filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src='../images/icon-hc.jpg', sizingMethod='scale') !important; -ms-filter: ...

htmlcsscompiler-errorssass

The functionality of Jquery AJAX is operational, however, the message being displayed appears to

Inside the file changename.php, there is a DIV element: <div id="resultDiv"></div> Within the same file, PHP code can be found: <?php include_once ('connect.php'); if(isset($_POST['name'])) { $postedname = $_POST[&ap ...

javascriptphpjqueryhtmlajax

Encountering a problem where updating the selected option in a dropdown does not properly refresh the HTML

I am currently working with a dropdown menu containing countries. Initially, the selected item is set to Ukraine. <select id="country" name="country"> <option value="US">USA</option> <option value="UG">Uganda</option> ...

javascriptjqueryhtmlxsltdrop-down-menu