What is the best way to align two paragraphs horizontally next to each other?

My issue involves two div containers wrapped by a parent div. Inside each child div is a paragraph with a header. When I attempt to align these paragraphs (including the headers) next to each other in the same row, they do not stay together. Instead, they break apart and stack on top of each other. How can I keep them side by side while maintaining a consistent margin from the top?

Note that I want to preserve the amount of text shown in the demo within my first paragraph.

HTML:

    <div id="gallery-text">

    <div id="gallery-text-left" style="float:left">
    <p id="gallery-text-quote-left" style="font-family:Century Gothic; color:#006600"><b>I am not interested in shooting new things, I am interested to see things new.</b></p>

    <p id="gallery-paragraph-1" style="font-family:Georgia">
    bodybodybodybodybodybodybodybodybodybodybodybodybodybody
    bodybodybodybodybodybodybodybodybodybodybodybodybodybody
    bodybodybodybodybodybodybodybodybodybodybodybodybodybody
    </p>
    </div>
    <div id="gallery-text-right" style="float:left">
    <p id="gallery-text-quote-right" style="font-family:Century Gothic; color:#006600"><b>External photo albums</b></p>
    <p id="gallery-paragraph-2" style="font-family:Georgia">
    <a>Link coming soon</a>
    </p>
    </div>
</div>

.CSS:

 #gallery-text-left{
}
#gallery-paragraph-1{
border-left:8px solid #3CB371;
border-radius:4px;
padding-left:15px;
}
#gallery-paragraph-2{
border-left:8px solid #3CB371;
border-radius:4px;
padding-left:15px;
}
#gallery-text-right{
}

Take a look at my Demo.

htmlcss

Answer №1

If the window width is reduced to a certain point, the text may end up overlapping with other content.

#gallery-text-left{
float:left;
width:50%
}

Instead of creating everything from scratch, it might be beneficial to utilize a framework like Bootstrap for better responsiveness.

Answer №2

Don't forget to include the width property for your floating divs. I made some updates to your code snippet.

 #gallery-text-left{
  /* Added */
  width: 50%;
}
#gallery-paragraph-1{
  border-left:8px solid #3CB371;
  border-radius:4px;
  padding-left:15px;
  /* Added */
  word-wrap: break-word;
}
#gallery-paragraph-2{
  border-left:8px solid #3CB371;
  border-radius:4px;
  padding-left:15px;
}
#gallery-text-right{
  /* Added */
  width: 50%;
}

http://jsfiddle.net/v48tbqxx/1/

I also implemented word-wrap to ensure the text breaks properly in the paragraphs

Answer №3

It appears that you are in search of the display: table-cell property rather than using float: left.

Consider implementing the following code:

#gallery-text > div{
    display: table-cell;
}

Additionally, it is recommended to refrain from utilizing inline styles.

Answer №4

Instead of using inline float:left, try this approach:

#gallery-text{
    display:table;
}

#gallery-text-left, #gallery-text-right{
    display:table-row;
}

#gallery-text-left > p,
#gallery-text-right > p{
 display:table-cell;
}

http://jsfiddle.net/nseLmva8/

Answer №5

Check out this interactive example

#gallery-text-left{
  width:50%
}
#gallery-paragraph-1{
  border-left:8px solid #3CB371;
  border-radius:4px;
  padding-left:15px;
  word-break: break-all;
}
#gallery-paragraph-2{
  border-left:8px solid #3CB371;
  border-radius:4px;
  padding-left:15px;
}

Answer №6

It's not a complicated task, just utilize a basic div layout and apply CSS to achieve the desired outcome

.gallery-text {
    float: left;
    width: 48%;
    margin: 1%;
}
.gallery-text p {
    word-break: break-all;
}
<div id="gallery-text">
    <div class="gallery-text">
        <h3> Heading</h3>
        <p>
        Body content goes hereBody content goes hereBody content goes here
            Body content goes hereBody content goes hereBody content goes here
            Body content goes hereBody content goes hereBody content goes here
        </p>
    </div>
    <div class="gallery-text">
        <h3> Heading</h3>
        <p>
        Body content goes hereBody content goes hereBody content goes here
            Body content goes hereBody content goes hereBody content goes here
            Body content goes hereBody content goes hereBody content goes here
        </p>
    </div>
</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

What purpose does the additional symbol "$()" serve in the selector "$($())"?

Currently, I am looking to incorporate a jQuery scrollspy feature into one of my ongoing projects. Upon coming across this jsfiddle (https://jsfiddle.net/mekwall/up4nu/), I successfully integrated it into my project. However, I have hit a roadblock while ...

javascriptjqueryhtml

Transition/transform/translate3d in CSS3 may lead to significant flickering on the initial or final "frame" of the transition (specifically on an iPad)

Hello everyone, I am currently developing a web application specifically for the iPad and I have implemented a CSS3 transition to animate a div, moving it from left to right. Here is the structure of my class: .mover { -webkit-transition:all 0.4s ea ...

jqueryanimationcss

CSS3 List Style Floating Challenge

I have encountered a seemingly simple question, but I am struggling to find a solution. In my HTML code, I have two ul elements. Each li within these lists is styled with float:left in my CSS. The reason behind this styling choice is that I am working on ...

htmlcsscss-float

The SimpleHTTPServer is causing Google Maps Places Autocomplete feature to malfunction

Currently, I am implementing a location search feature along with form auto-fill using the google.maps.places.Autocomplete functionality. While accessing the HTML file directly (file:///location.html), everything is functioning as expected. However, when ...

javascriptpythonhtmlgoogle-mapsgoogle-maps-api-3

What is the best way to ensure the footer remains in an automatic position relative to the component's height?

I am struggling to position the footer component correctly at the end of my router-outlet. After trying various CSS properties, I managed to make the footer stay at the bottom but it acts like a fixed footer. However, I want the footer to adjust its positi ...

htmlcssangularangular-material

Create a dialog box with rounded triangle corners

In the process of developing an application, we are incorporating a text display feature within a div that resembles a chat box direction, but with a curved style as depicted in the screenshot linked below. Desired design exemplified in purple Target des ...

htmlcssresponsive-design

The alignment of circles and balls is steady, with no bouncing in sight

How can I place a large circle in the center of the screen and four smaller circles on the right side? The small circles should have bouncing balls inside, each with only one ball instead of multiple. An alert should be triggered by the main big circle but ...

javascripthtmlcsscanvas

Changing a CSS block in IE7 using jQuery

Users have the ability to update the look of their customizable widget by editing CSS code in a textarea that automatically updates a <style> element when changed. Here is the JavaScript function: function updateWidgetStyling() { $("#stylePrevi ...

jquerycssinternet-explorer-7stylesdhtml

Modify the appearance of a single component among a collection of 20 instances

I'm looking to dynamically change the background color of my components based on the colors of the images inside them. Each component should have its own unique color, but currently all 20 instances on the page are getting the same color. I've tr ...

cssvue.jssassvuejs3

Address Book on Rails

Hello, I'm relatively new to this and would be grateful for any assistance. My goal is to utilize the data saved by a user in their address book, and then offer them the option to use that address for delivery. Below is my Address controller: class A ...

javascripthtmlruby-on-railsjsonruby

Tips on automatically centering an image within a div as it is resized

I'm currently working on a website that showcases cards featuring Discord users. Each card includes an avatar image within a div element, and when the user hovers over it, the image expands. However, I've noticed that as it expands, it shifts to ...

htmlcss

The Facebook share button on my website is malfunctioning

Could someone please help me figure out why my custom Facebook share button is not functioning properly? When I click the button, the share window fails to appear. I have tested it as an html file on a live web server and have thoroughly reviewed the Faceb ...

javascripthtmlcssfacebookfacebook-graph-api

Unusual Behavior of *ngIf and jQuery in Angular 5: A curious case

I'm encountering a strange issue when using the expand-collapse feature of Bootstrap 4 with *ngIf for expansion and collapse. I noticed that the jQuery doesn't work when *ngIf is used, but it works fine when *ngIf is removed. HTML: <div cla ...

htmlangulartypescript

When scrolling, a sticky table cell with a rowspan escapes the confines of the table

I am facing an issue with a table that has both a sticky header and sticky td elements with rowspan. When I scroll, the td with rowspan appears on top of its header, which in this case is the first column. Setting a z-index property puts the header on top ...

htmlcsshtml-table

Issues with Bootstrap components not functioning correctly on a remote server

After developing a website using Boostrap and WAMP Server, I am now in the process of transferring it to a virtual server to allow more people to access it. While the site appears to be functioning correctly, there is an issue with a drop-down toggle - wh ...

htmlcsswampserver

Remove the container once all of its children have been dismissed

Is it possible to automatically remove the parent container when all of its children elements have been removed? Each child element has a dismissal option that, when clicked, removes the element. I am using backbone.js for this project and would like a so ...

javascriptjqueryhtmlcssbackbone.js

The React application ceases to function properly as soon as I introduce a textfield

As a newcomer to React, I am facing an issue while working on the front-end UI of a web application. Whenever I try to add a text field to the box I created, the app fails to render anything other than a blank color on the screen. Here is how it looks: W ...

htmlcssreactjsmaterial-ui

Is the Button Class failing to retrieve the entire length of the div element?

I'm having an issue with the full length of the div not applying to the button inside. Can someone help me troubleshoot this problem? <div class="col-md-3 col-sm-6 text-center card"> <button type="button" class="btn btn-primary" data-toggl ...

cssbootstrap-4

Creating a Fractional Division Formula in HTML

My goal is to create code that displays various mathematical formulas. The formula I am focusing on right now is for the mean (average) and it currently looks like this: ∑n⁄n: <span class="frac"><sup>&sum;n</sup><span> ...

javascriptjqueryhtmlcssnumbers

Emulate Bootstrap's Focus Style CSS

Is there a way to use JQuery to apply Bootstrap's blue highlight to text fields in a form that are not currently in focus, even if there are multiple inputs? ...

jquerycsstwitter-bootstrap