Ensuring that text inside a float left div remains aligned with the left margin

I have a situation where I have three divs that are all floating to the left, displayed like this: (1)(2)(3). The issue arises when the font size within div1 is longer than the width I set, causing it to go to the next line within the div. However, the next line does not align with the leftmost margin of the div, rather it appears to be centered. How can I address this problem? Below is the current CSS code I am using:

.left-div-results-list  div:first-child{ 
    width:70%;       
    float:left;
}
.left-div-results-list div:nth-child(2){
    float:left;
    width:10%;        
}
.left-div-results-list div:nth-child(3){
    width:10%;
    float:left;
}
.left-div-results-list tr td{
    min-width:400px;
}

here is an example:

> -------------------------------
> -   this is correct
> -
> -
> -
> -
> --------------------------------
> 
> --------------------------------
> -
> - this is not correct when the
> -     length is longer.   --> This needs to also be left aligned.!
> -
> --------------------------------

Answer №1

It's easy to miss the simple solution sometimes. In this case, the issue was caused by the text-align left property not being overridden.

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

Utilizing the Invoke() method to display a Form from within a Threading.Timer() thread

I am struggling with displaying my only form, MainForm. Here is the code snippet: public static Form1 MainForm = new Form1(); static ManualResetEvent _running = new ManualResetEvent(false); [MTAThread] private static void Main() { ...

Utilize an icon within an input box using content and the :before pseudo-element instead of relying on

My problem is that I have a great font set up and I use it to add custom icons next to my buttons. (for example: check here) Now, I want to create an input box and place an icon before it like in this guide HERE Instead of using a background image, I wou ...

Exploring the height and overflow properties of nested div elements

Imagine a scenario where you have a fixed-size container and need all the elements to fit inside. The issue arises when some elements contain lots of text, causing the overflow to be hidden but still stretching beyond the container's height. How can t ...

When trying to click the button in Navbar.jsx, I encounter an error when attempting to invoke the setShowCart(true) function

I've encountered an issue while trying to call the setShowCart(true) function in Navbar.jsx. I'm unsure of how to fix this. import React from 'react' import Link from 'next/link'; import {AiOutlineShopping} from 'react-ic ...

Tips for modifying layout and concealment of content when using window.print()

Currently, on my web application, the vendor is able to print the invoice using windows.print(). However, in the print preview, it displays a screenshot of the current page. The vendor has specific printed paper with their own details and some blank space ...

What is the best way to invert the positioning of the li elements to move upwards?

https://i.stack.imgur.com/mZaoS.png Seeking assistance on adjusting the height of bars to start from the bottom and go upwards instead of starting from the top position and going downwards. The JavaScript code below is used to generate the li elements and ...

The modal is not displayed when the on click listener is triggered

I'm a beginner in the world of programming and I'm currently working on creating modals that pop up when clicked. However, I'm facing an issue where the pop-up message doesn't appear when I click the button. Oddly enough, only the overl ...

"Setting up a filter for the first row in an Excel-like table using a pin header

Does anyone know how to create a table filter in Excel where the header and first row stay pinned while scrolling down, even after applying filters? Here is a JSFiddle demonstrating the issue: http://jsfiddle.net/6ng3bz5c/1/ I have attempted the followi ...

The disappearing act of the Bootstrap 4 hamburger icon, despite the navbar expanding afterwards

Currently in the process of building my initial website using bootstrap 4, and encountering difficulties with my collapsible navbar and the hamburger icon. My goal is to have the navbar expand on medium screens, but switch to a hamburger icon on smaller sc ...

Unveiling the Quirk of Foundation 5: Grid Encounters a Popping

Recently, I encountered an issue with Foundation 5. Whenever I attempt to apply the "position:fixed" property on a "div" element that is part of the Foundation Grid, it causes the div to break out of the grid and align itself with the left edge of the ro ...

Tips for creating a dynamic menu with animated effects

Check out my fiddle here: http://jsfiddle.net/k3AHM/23/ $(document).scroll(function () { var y = $(this).scrollTop(); if (y > 110) { $('.menu-container').addClass( "fix-menu" ).animate('top', '-3px&a ...

Challenges with Bootstrap input groups

Despite trying various solutions, nothing seems to be working for me. I attempted using width:200px, but the issue persists. Since my form was quite outdated, I decided to switch to a bootstrap version. However, while others are able to resolve the issue w ...

Issue with sidebar display inconsistency when resizing the window

Struggling with the sidebar display issue on mobile, as the menu appears outside the sidebar when resized. Is it feasible to relocate the bar to the top and resize it for a better mobile view experience? Adjusting the navbar's position affects the hea ...

Div failing to expand to fit its contents

I'm having trouble getting my info-container div to adjust its height based on its contents. I suspect that the floating div within it might be causing the issue, but I'm not certain. I've included a link to jsfiddle where you can view the C ...

What are some effective replacements for SoundManager2 worth considering?

While Soundmanager2 is a useful app, many find the code to be overly complex and difficult to navigate. It almost seems as if it was purposely written in a way to confuse rather than clarify. Are there any recommended alternatives to Soundmanager2 that are ...

Create a chessboard with a border using only HTML and CSS

I recently completed a chessboard using only HTML and CSS, but I am facing a challenge as I attempt to add a frame around the board. Since I lack design skills, I am struggling to achieve this simple task. I have tried utilizing the CSS border property wit ...

Error in JavaScript Slideshow

I am attempting to create a slider that changes with a button click. Below is my JavaScript code: var img1=document.getElementById("p1"); var img2=document.getElementById("p2"); var img3=document.getElementById("p3"); function slide(){ ...

Adjust the background color of the choices in the select box

I'm looking to customize the appearance of a drop-down menu in a form on a website by making the background of the options transparent, similar to the initial selection. I've tried using background:rgba(255, 255, 255, 0.2) for this purpose, but ...

Divide the Javascript code from the HTML Canvas

I have been diving into HTML5 Canvas and exploring how to implement it using Javascript code. However, I am facing difficulties separating the Javascript code from the original html file. Despite trying some solutions: HTML5 Canvas not working in extern ...

Vue Error: "the main template must have one and only one root element"

Exploring My Component Setup components exposed: <template> <!--<post-form/>--> <div class="wrapper"> <b-table :data="posts"> <template slot-scope="props"> <b-table-column fie ...