`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

The system has detected an invalid NSStringEncoding value of 0x8000100 while converting NSAttributedString to HTML

I encountered a warning in the debugger while using XCode: It detected an incorrect NSStringEncoding value of 0x8000100 when converting an NSAttributedString to html data. I am unsure of what is causing this issue or how to resolve it. Below is the code sn ...

htmlnsattributedstring

Is it possible to convert HTML to PDF on the server?

A PDF file is being created from an HTML file using the princexml pdf converter package. The data for the HTML file is provided by the server. In the browser, jQuery is used to generate the input string (HTML code) for creating the PDF. Once the input stri ...

jqueryhtmlprincexml

Implement a unique feature for specific days using jQuery UI Datepicker with a customized class

Looking to highlight a range of days horizontally in jQuery UI Datepicker with the multiselect plugin. To achieve this, I am utilizing the :before and :after pseudoelements of the a tags. .ui-state-highlight a:before, .ui-state-highlight a:after { con ...

javascriptjquerycssjquery-uidatepicker

Tips for creating a dynamic variable for an object key in jQuery to streamline your code

Utilizing the TweenMax library, I am adding styles to a div while scrolling. However, I am facing a challenge where I need different styles based on varying page resolutions. To address this issue, I implemented an if condition. Is there a way I can use a ...

javascriptjquerycssgsap

Recurrence of solely the middle segment of the separator's background picture

I have a unique divider image with fading top and bottom parts. I'm wondering if it's possible to use a sprite and 3 divs to only repeat the middle section, considering that my height is variable. Do I need separate images for the top, middle, an ...

javascripthtmlcss

Rotate the front view image to the left view with a three-dimensional twist

I've been attempting to rotate the image using the code below, but I can only manage to go from a front view to a bottom view. My goal is to rotate the image from the front view to the left view. Is there a way for me to achieve this? body { heig ...

htmlcsscss-transforms

How can one determine the dimensions of the browser window using a property?

Can someone please clarify how to find the width and height of the browser window specifically? Thanks in advance! ...

javascripthtmlcss

Zooming in on the background with an animated effect

I'm experimenting with a zoom in animation on a background image for a brief moment. It seems to work initially but then resets itself. To see an example, I've created a jsfiddle link: https://jsfiddle.net/onlinesolution/tk6rcLdx/ Any idea what ...

csscss-transitionscss-animations

How to perfectly center the Bootstrap Modal using CSS styling

Looking for a way to vertically align the Bootstrap Modal? I've attempted using CSS with no success. I tried this: .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; } However, the modal still displays in t ...

css

variable identifier looping through elements

I'm attempting to assign a dynamic ID to my div using ng-repeat. Here's an example: <div id="$index" ng-repeat="repeat in results.myJsonResults"> <div id="$index" ng-click="saveID($index)" ng-repeat="subRepeat in results.myJsonResul ...

javascripthtmlangularjs

unable to establish a connection to SQL in [PHP]

I'm having an issue with my code and need some help fixing it. The website is supposed to allow users to add, edit, and delete data. However, when I fill out the fields and click "add", it redirects me to a blank page. Here's the code that I have ...

phphtmlsqlphpmyadminweb

Having trouble printing webpages? Need a useful tutorial on how to print web pages created using jQuery UI, jqGrid, and Zend?

I have been tasked with printing web pages of a website that utilize jqgrid, Jquery calendar, various Jquery UI components, and background images. The server side is built with Zend Framework. Although I lack experience in web page printing, this has beco ...

javascriptjquerycssprintingjqgrid

The image wrapping feature within a div element will only function properly when there are more than one line of text present

I have come across a strange issue that I am struggling to solve. I have an image within a div with the float: left; attribute, but this styling only seems to work when the div has more than one line of text. When the div contains just one line, it ends ...

htmlcss

How can I remove specific items from a session array when they are selected?

I am seeking a solution that will allow me to remove a specific item from an array when that item is clicked. For example, if I click on "Two", it should disappear. See a demonstration here: CODE: <form method="post"> <input type="text" i ...

phphtmlarrayssessionunset

Flask caches JSON files automatically

I am currently working on a visualization app using js and python. The functionality of my app is as follows: There is a textbox in the browser where I input an URL The URL is then sent to Python via Flask In Python, the URL is processed to create ...

javascriptpythonhtmljsoncaching

How can I design DIVs to resemble a radio station or television schedule grid?

Check out the JSFiddle for my page with the source code included: https://jsfiddle.net/g0kw1Le8/ Here is a snippet of the source code: <TITLE>Hallam FM - Best Variety of Hits</TITLE> <style> /* CSS styles go here */ /* End of CSS */ & ...

htmlcssdivide

Add Your Logo to the Navigation Bar using CSS

Can someone please assist me with adding a logo to my CSS navbar? I am struggling to figure out how to do this and would appreciate any guidance or tips on how to successfully implement a logo in the navbar. body { margin: 0px; } ul { list-style-ty ...

htmlcss

View does not display initial value selected in ReactJS

I'm having trouble setting an initial value for a select element that isn't displaying in the view. Here's my JSX: var SelectOKNO = React.createClass({ render() { return ( <div> <select className="selectpicker" ...

htmlreactjsjsx

The menu seems to be off-center

I'm struggling to center my menu/navigation bar horizontally. I can't seem to figure out what mistake I've made or what I've forgotten. Additionally, there is right padding after my last list item. How can I get rid of it? HTML <di ...

csshtml

The border length of the unordered list is equal to half of the length

I would like the blue borders of these "ul" elements to be centered beneath the black "li" elements, with a width that is 50% of the child width. However, I'm unsure about how to achieve this. I attempted using ":before", but it only seems to work for ...

htmlcss