`How to perfectly place multiple text blocks and images using CSS`

Check out this screenshot to see the issue I'm facing:

Here is the HTML code:

   <div class="parent_process">  
      <div class="first_process"><img src="images/exprimer-besoin-telephonie.png"/><span style="width:18%">You fill out the form to express your need (approx 1 min)</span></div>  
      <div class="second_process"><img src="images/contacter-tous-les-vendeurs-autocommutateurs.png"/><span style="width:18%">You fill out the form to express your need (approx 1 min)</span></div>  
     <div class="third_process"><img src="images/recevoir-offre-standard-telephonique-pas-cher.png"/><span style="width:18%">You fill out the form to express your need (approx 1 min)</span></div>  
</div>

This is the CSS code:

.parent_process{ width:100%; white-space:nowrap; }
.parent_process div{ display:inline-block; width:33.3%;}
.first_process{ text-align:left; }
.second_process{ text-align:center; }
.third_process{ text-align:right; }

How can I create my 3 columns: 1)my text 1 | 2) my text 2 | 3) my text 3

Would appreciate any assistance!

Regards

htmlcss

Answer №1

Your three containers have the correct width, but due to the whitespace: nowrap style, the text is not wrapping and instead overflowing.

If you remove the whitespace: nowrap property, the text will stay within the container's width. However, a new issue arises where the columns do not all fit on a single row: http://jsfiddle.net/q1g0uxx4/2/

This happens because there is almost no space between the columns, causing them to wrap with the use of inline-block.

To resolve this, removing any whitespace between the div elements will allow them to fit properly: http://jsfiddle.net/q1g0uxx4/1/

While removing whitespace may impact formatting, another solution is to set the font-size of your container to 0.1px. This will ensure the content fits even with formatted markup: http://jsfiddle.net/q1g0uxx4/3/

Answer №2

If you're looking for a reliable CSS framework, consider using Bootstrap. Their column system is very user-friendly and efficient.

Check out this JSFiddle link for a demonstration.

To implement columns in your design, simply use the class col-sm-4.

<div class='col-sm-4'>
    <img src='http://ethanwiner.com/Smiley%20Land/Frenchie.gif' />Lorem ipsum dolor sit amet</div>
<div class='col-sm-4'>
    <img src='http://ethanwiner.com/Smiley%20Land/Frenchie.gif' />Consectetur adipiscing elit</div>
<div class='col-sm-4'>
    <img src='http://ethanwiner.com/Smiley%20Land/Frenchie.gif' />Praesent ultrices neque ac justo consectetur condimentum.</div>

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

Unable to locate the iframe in the test scenario

I encountered this particular test case: Select Frame id=coach_frame63454108.cf1 Wait Until Element Is Visible ${ap.gui.header.appname} Page Should Contain Element ${ap.gui.header.appname} Page Should Contain Element ${ap.gui.hea ...

cssseleniumrobotframework

Organizing HTML elements based on their class names, especially when an element has multiple classes assigned

Hey there, I've been working on an artist page that showcases multiple artists, each with a portfolio image and some detailed information. My goal is to have buttons at the top of the page that, upon clicking, will sort the artists displayed. To achi ...

javascriptjqueryhtmlcssweb-frontend

Updating the class of a div based on a checkbox being checked or unchecked

I am attempting to apply the "isChecked" class to the parent div when a checkbox is checked, using the ngClass directive. Here is the HTML: <div ng-class="{isChecked: (isChecked_1 == 'true')}"> <input type="checkbox" id="check_ ...

htmlcssangularjs

Tips for incorporating fading text and a CTA into your content block

I am looking to protect the full content of my blog posts and allow access only to subscribed members. I want readers to see just a glimpse of the article before it disappears, prompting them to take action with a Call to Action (CTA) like in the fading te ...

javascripthtmlcssblogs

Tips for creating a stylish scrollbar in a React Material-Table interface

Currently, I am utilizing the react material-table and looking to implement a more visually appealing scroll-bar instead of the default Pagination option. Although I have experimented with the react-custom-scroll package, it has not produced the desired ...

javascriptcssreactjsmaterial-uimaterial-table

What is the process for detaching and attaching click animations using the on() method?

I am encountering an issue with a recursive loop that executes a simple animation. These animations are controlled by the page load and clicking on controls .carousel_item. Click here for live sample JSFiddles for demonstration purposes Challenge: The pr ...

javascriptjqueryhtml

Retrieve user choices from dropdown menu with Flask and HTML

I'm currently working on developing a dropdown list in HTML that, upon selection submission, will pass the chosen option to a Python script to dynamically update the content of the HTML page. While I have successfully implemented the dropdown list, I ...

pythonhtmlflask

jQuery scrollTop animates to the start of the webpage

Upon loading the page, the div appears at the top of the screen but then jumps to its correct position once scrolling begins. To view the website, click on this link: calretirement.com/classes-test.php CSS: .register{position:fixed !important; bottom:1 ...

javascriptjqueryhtmlcss

The clingy navigation bar hinders smooth scrolling to the content

My website has an image where users can click on elements to scroll down to text. However, I'm facing a problem because there is a sticky menu at the top of my website. How can I ensure that the scrolling works correctly with the sticky menu included? ...

javascripthtmljquerycss

Tips for manually adding CSS/JS files for offline usage with Vue.js CLI

I am currently utilizing Vue.js CLI alongside AP.NET Core in a single-page application. I have identified the need to bundle some JavaScript/CSS files locally instead of relying on a CDN due to potential deployment scenarios without internet access. The co ...

htmlvue.jsasp.net-corebundling-and-minificationvue-cli

Ways to avoid overflow of dynamically added div element?

Currently, I am facing an issue while dynamically appending div elements with the .magnet class to my page. These elements end up overflowing the container boundaries and I am struggling to find a solution for this problem. If anyone could check out my j ...

javascriptjqueryhtmlcss

Adjust the fixed navbar position in MaterializeCSS as you scroll

First of all, I apologize for my limited proficiency in English. I have a website with a company logo at the top and a navigation bar below it. My goal is to change the position of the navigation bar to the top when scrolling past the company logo. I att ...

javascripthtmlmaterial-designmaterialize

Discover the method for invoking a Javascript function within a Leaflet popup using HTML

Upon clicking on a marker on the leaflet map, I aim to trigger a popup box that contains five elements: Title Description Image Button (Next Image) Button (Previous Image) To achieve this, I attempted to include a custom popup for each feature ...

javascripthtmlvue.jsleaflet

Strange behavior observed in fading slides using jQuery

I have been experimenting with jQuery to create a slide feature. However, I am encountering an issue where the next slide fades in before the previous one completely fades out when I click the next arrow. Does anyone know how to fix this problem? <ht ...

jqueryhtmlcss

Align list items in the center horizontally regardless of the width

I have created this container element: export const Container = styled.section<ContainerProps>` display: flex; justify-content: center; `; The current setup is vertically centering three list items within the container. However, I am now looking ...

javascriptcssreactjsnext.js

Storing HTML form values for other pages in PHP and MySQLi can be achieved by using session variables or by

I recently set up a database using phpMyAdmin that includes tables for different topics such as Math, Physics, etc. Each topic is assigned a unique topic_id as the primary key in the table tb_topic. Additionally, each topic can have multiple videos associa ...

phphtml

Identifying the Nearest Div Id to the Clicked Element

When a link is clicked, I am trying to locate the nearest div element that has an id. In this specific scenario, the target divs would be either #Inputs or #Stages. For example, if Page1 through 4 is clicked, I want to store the id #Inputs in a variable. ...

javascriptjqueryhtml

Components from Bower are currently not available

Trying to automate the injection of bower components into my HTML using grunt-wiredep. It seems simple enough, but I'm having trouble setting the correct path to the bower directory when running localhost. Currently, I'm receiving this error: ht ...

javascripthtmlgruntjsbowergrunt-wiredep

Styling a layout with two columns, centered with an offset

I have created a layout with two columns - one on the left and one on the right, with the left column containing two rows. However, I am looking to offset the center point of the column to the right so that the left column occupies about 60% of the space ...

htmlcss

CSS animations can make the navigation bar vanish into thin air

I recently started implementing CSS3 animations from the Animate.css library and I must say, they really enhance the look and feel of my website. The animations pair perfectly with WOW.js to create stunning effects. However, I have encountered a minor iss ...

jquerycssanimationcss-animations