What is causing this text to shift the div to a separate line?

I am facing an issue with my three side by side divs, where if I insert too much text inside the div, it gets pushed down onto a new line.

.consoleRed {
  background: #d83435;
  border-radius: 5px;
  border: 1px #000 solid;
  color: #fff;
  margin: 5px;
}

.consoleIcon {
  float: left;
}

.consoleDesc {
  float: left;
  vertical-align: top;
}

.consoleDesc h3 {
  margin: 1px;
  padding: 1px;
  font-size: 14px;
}
<div class="container">
  <h2>Select a Console</h2>
  <div class="col-lg-4 consoleRed">
    <div class="consoleIcon"><img width="64" height="64" src="images/3ds.png"></div>
    <div class="consoleDesc">Little Text is fine</div>
    <div class="clearfix"></div>
  </div>
  <div class="col-lg-4 consoleRed">
    <div class="consoleIcon"><img width="64" height="64" src="images/3ds.png"></div>
    <div class="consoleDesc">When I add too much text, the entire div shifts to a new line</div>
    <div class="clearfix"></div>
  </div>
  <div class="col-lg-4 consoleRed">
    <div class="consoleIcon"><img width="64" height="64" src="images/3ds.png"></div>
    <div class="consoleDesc">Not sure why</div>
    <div class="clearfix"></div>
  </div>
</div>

https://jsfiddle.net/ud7xbnd7/3/

jqueryhtmlcsstwitter-bootstrap

Answer №1

If you want to achieve a side-by-side layout in CSS, consider using flexbox. It is a great tool for handling elements in this manner.

Below is an example of code you can try:

.consoleRed {
  background: #d83435;
  border-radius: 5px;
  border: 1px #000 solid;
  color: #fff;
  margin: 5px;
  display : flex;
}

.consoleDesc {
  float: left;
  vertical-align: top;
}

.consoleDesc h3 {
  margin: 1px;
  padding: 1px;
  font-size: 14px;
}
<div class="container">
  <h2>Select a Console</h2>
  <div class="col-lg-4 consoleRed">
    <div class="consoleIcon"><img width="64" height="64" src="images/3ds.png"></div>
    <div class="consoleDesc">Little Text is fine</div>
    <div class="clearfix"></div>
  </div>
  <div class="col-lg-4 consoleRed">
    <div class="consoleIcon"><img width="64" height="64" src="images/3ds.png"></div>
    <div class="consoleDesc">When i add too much text it ends up pushing the whole div onto the new line When i add too much text it ends up pushing the whole div onto the new line When i add too much text it ends up pushing the whole div onto the new line When i add too much text it ends up pushing the whole div onto the new line</div>
    <div class="clearfix"></div>
  </div>
  <div class="col-lg-4 consoleRed">
    <div class="consoleIcon"><img width="64" height="64" src="images/3ds.png"></div>
    <div class="consoleDesc">Not sure why</div>
    <div class="clearfix"></div>
  </div>
</div>

Answer №2

Implemented a row class and adjusted text alignment using CSS styling:
<div class="container">
      <h2>Choose Your Gaming Console</h2>
      <div class="row">
        <div class="col-lg-4 consoleRed">
          <div class="consoleIcon"><img width="64" height="64" src="images/3ds.png"></div>
          <div class="consoleDesc">Small amount of text works well here</div>
          <div class="clearfix"></div>
        </div>
        <div class="col-lg-4 consoleRed">
          <div class="consoleIcon"><img width="64" height="64" src="images/3ds.png"></div>
          <div class="consoleDesc">Adding too much text causes the container to shift to a new line</div>
          <div class="clearfix"></div>
        </div>
        <div class="col-lg-4 consoleRed">
          <div class="consoleIcon"><img width="64" height="64" src="images/3ds.png"></div>
          <div class="consoleDesc">Uncertain why there's an overflow of text causing layout issues</div>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
    <style>
    .consoleRed {
      background: #d83435;
      border-radius: 5px;
      border: 1px #000 solid;
      color: #fff;
      margin: 5px;
    }

    .consoleIcon {
      float: left;
    }
    .consoleDesc h3{
      margin: 1px;
      padding: 1px;
      font-size: 14px;
      text-align:justify;
    }
    </style>

Answer №3

Simply eliminate the float:left property

.consoleDesc {
  float: left;<-------------Remove this
  //more code...
}


.consoleRed {
  background: #d83435;
  border-radius: 5px;
  border: 1px #000 solid;
  color: #FFF;
  margin: 5px;
}

.consoleIcon {
  float: left;
}

.consoleDesc {
  vertical-align: top;
}

.consoleDesc h3 {
  margin: 1px;
  padding: 1px;
  font-size: 14px;
}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <h2>Select a Console</h2>
  <div class="col-lg-4 consoleRed">
    <div class="consoleIcon"><img width="64" height="64" src="images/3ds.png"></div>
    <div class="consoleDesc">Little Text is fine</div>
    <div class="clearfix"></div>
  </div>
  <div class="col-lg-4 consoleRed">
    <div class="consoleIcon"><img width="64" height="64" src="images/3ds.png"></div>
    <div class="consoleDesc">When i add too much text it ends up pushing the whole div onto the new line</div>
    <div class="clearfix"></div>
  </div>
  <div class="col-lg-4 consoleRed">
    <div class="consoleIcon"><img width="64" height="64" src="images/3ds.png"></div>
    <div class="consoleDesc">Not sure why</div>
    <div class="clearfix"></div>
  </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

The hover effect is being applied exclusively to the final React component

When using next.js and tailwindCSS for styling, I created a custom component that includes tags. The issue arises when multiple instances of this component are placed on the page, as only the last one is getting the desired hover effect. "index.js" import ...

cssreactjsnext.jshover

Top approach for implementing input validation with Asp.Net Mvc 1.0, Json, and jQuery Ajax

After reading multiple blogs and posts on input validation in Mvc 1.0, I noticed that there are several effective solutions mentioned for non-Ajax scenarios. However, when it comes to using jQuery Ajax, I am curious to know what your preferred method is ...

jqueryasp.net-mvcajaxjsonvalidation

Tips for ensuring font-face displays correctly for every character

There seems to be a CSS clash that I cannot pinpoint on the site below: You can find the code snippet here: /*Font face settings for h3*/ @font-face { font-family: carrotflower; src: url('/wp-content/uploads/fonts/Carrotflower.eot') format(& ...

cssfont-face

An Ajax call is utilized to retain previous data

I'm currently facing a slight issue with my ajax request and I am still on the lookout for a solution. Here's what I'm trying to achieve: I have a basic search form where upon submission, the data is sent to a PHP file which returns the re ...

javascriptjqueryajaxjsonlist

Trouble with Bootstrap Popover's visibility

My current setup involves a popover that is not initializing properly. The code I am using is shown below: HTML: <div data-toggle="popover" data-placement="bottom" data-content="xyz">...</div> JavaScript: $(function () { $('[data-t ...

javascriptjqueryhtmlcsstwitter-bootstrap

Server response not being awaited by Ajax call

Currently running WAMP v.2.5 on a Windows10 system for my PHP project connected to a MySQL DB that involves multiple AJAX calls, all functioning correctly. However, there is one specific call that keeps throwing an 'Unexpected end of input' error ...

phpjqueryajaxwamp

Utilizing jQuery for various dynamically generated HTML elements

I am currently working on a form for editing data in my database. The form consists of three dropdowns: Category, Subcategory, and Item. These dropdowns are dynamically populated based on the selection made in the previous dropdown. After all three dropdow ...

javascriptphpjqueryhtml

Monitor and control access to images to prevent unauthorized viewing or downloading

Is there a way to display an image on a web page without allowing direct access to it? I want to prevent users from being able to view the image by simply manipulating the URL, as seen in some Facebook applications. Are there methods for monitoring image ...

phpjqueryimageurlindirection

Is there a way to organize products by assigning each one its own unique group ID?

Challenge I am experiencing an issue where I have multiple products with different descriptions, so I needed to group them in corresponding dropdowns. However, when I modify the value in the dropdown for a particular product, it only updates the values for ...

javascripthtmldjangodjango-viewsdjango-templates

What is the best way to surround the initial x words within an element with a span tag?

Is there a way to style the first 10 words of a paragraph in a different color when the content is constantly changing? I can't manually add a span in the HTML. My approach involves using JavaScript to iterate through all instances of .overview__text. ...

javascripthtmlsplitslice

Developing a single source code that can be used across various platforms such as desktop, Android, and

Having a background in C++ and some knowledge of HTML, CSS, and JavaScript, I am currently working on developing a web application using Node.js and React.js. This application will be accessible through both web browsers and mobile devices. My goal is to ...

javascriptandroidhtmlios

Showing the number of times a button has been pressed

I have written some HTML code to create a button and now I am looking for guidance on how I can use Vue.js to track how many times the button has been clicked. Here is what I have so far: <div class="123"> <button id = "Abutton&q ...

javascripthtmlvue.jsbutton

Display a PDF on a website and ensure it is horizontally scrolled to the center

After embedding a PDF in a webpage, I noticed that the width of the window is smaller than the actual PDF, resulting in a horizontal scroll bar appearing. Surprisingly, the PDF itself has wide margins on both sides, making it challenging for users to view ...

javascriptjqueryhtmlcsspdf

Encountering issues with implementing bootstrap-datepicker on cloned rows, as the values remain locked to the first date field

Encountered an issue with cloning rows using bootstrap-datepicker and bootstrap. To reproduce the problem: 1. Select a date in the first input field (id_form-0-expense_date_item). 2. Add another row and select a date in the second input field, which shoul ...

jquerytwitter-bootstrapbootstrap-datepicker

What is the best way to designate a script as the background for a specific <section>?

Currently, I am working on a single-page website project using Bootstrap. This site is split into 4 sections, each encapsulated in a 'section' with its own distinctive background color/image and content. On the first section that covers the entir ...

javascripthtmlcssbackground

Input field with a calendar option? Validating dates using jQuery

Getting straight to the point. I have a form with multiple controls and I am implementing validations. I am having trouble with attaching a DATE-PICKER to one of my text boxes and validating it accordingly. Instead of allowing users to enter anything in ...

jqueryasp.net-mvc-4jquery-ui-datepicker

The Bootstrap-vue b-table responsive feature does not support recognition of the lg or xl values

I need help keeping the horizontal scroll bar at the bottom of my table without having to scroll all the way down. When I use the responsive property like this: <b-table :responsive="md" :items="details" > The values md and ...

htmlcssbootstrap-4bootstrap-table

I wonder where this design is originating from

After exploring several of the suggested questions that appeared while typing, I was unable to find a solution to my issue. Currently, I am utilizing Uikit V2 and I have implemented a div with the Sticky component as shown below: <div class="uk-st ...

javascripthtmlcssgetuikit

Exclude a Child with jQuery Selector

Is there a way to select the entire body excluding just one element? $("body").not('#to-exclude').mouseup(function(){ // ... }); This approach is not effective. ...

jqueryjquery-selectors

JavaScript code is experiencing issues following a for loop

I recently developed a code to upload resized images using HTML and JavaScript. Here is the HTML form setup: <form action="aa.php" method="post" id="uploadImageForm" enctype="multipart/form-data"> <input type="file" id="fileToUploadId" ...

javascriptphpjqueryhtml