Avoid the visibility of content in one div overlapping with content in another div

I'm looking for a way to prevent the central text from surpassing the red limits. When viewing at full screen, everything looks fine, but upon resizing I want the text to remain within a defined "block".

<div class="centered">
  <div style="float: left; width: 20%;text-align : left">Title1      Title2<br>Components<br> Comp1 <br> Comp2 <br> Comp3 <br> Comp4 <br> Comp5 <br> Comp6 </div>
  <div style="width: 80%;text-align : center; float: middle;"><p align="justify"> Historia </p></div></div>
</div>

htmlcss

Answer №1

To ensure the second div remains as a block element, you can use the CSS property overflow: hidden.

This will force the div to maintain its block-level display.

Check out this demo for more information.

Answer №2

In order for the second nested div to align to the left, you should apply the float: left; property. Remember, there is no such thing as float: middle.

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

Locating a File in the Bootstrap 4 File Explorer

Bootstrap 4's file browser lacks the file name display, showing only "Choose file...". To address this issue, I created a JavaScript solution. Are there any alternative methods to solve this problem? HTML <label class="file"> <input typ ...

jqueryhtmlcsstwitter-bootstrap-4

Is it possible to echo a CSS class using PHP?

I have a PHP structure and I would like to embed my div in PHP. I need to write CSS with echo class, but I am unsure of how to do it. Here is my div: <div class="mydiv"> <img src="catalog/view/theme/default/img/mypng.png" alt=""> </div ...

phpcss

Maintaining uniform cell width in tables even when some data is missing

Hello, I have a webpage that dynamically displays various tables with different data sets. The issue I'm facing is that some columns do not have data, causing the tables to display at varying widths. This inconsistency in width is aesthetically unplea ...

htmlcss

Transforming videos into a series of individual images

Recently, I created an HTML5 app that can record videos of about 20 seconds in length using a specific function. My goal is to convert these recorded videos into image sequences and then integrate them back into the app for additional processing. With a se ...

phphtmlimagevideojpeg

Align a text box and button in the center with precision using Bootstrap 5

Here is the code snippet using bootstrap 5: <div style="margin-top: 30%" class="text-center"> <h1>Let's get started...</h1> <input id="form-input" style="display: inline-block;" ...

cssbootstrap-5

Access the second argument in the method `document.getElementById("box5" && "box14")`

I need help with a script that should set the variable trouve_coupable to true only if both box 5 and box 14 are checked on my HTML page. However, no matter what I do on the page, whenever box 14 (="case14") is checked, it always returns true whe ...

javascripthtml

``There seems to be an issue with implementing the SlideDown feature in JavaScript

I am having an issue with a code where the expected behavior is to slide down a div when a person hovers over text, but it's not working. Can someone please review and identify the cause of this problem? <script type="text/javascript" src="/js/jqu ...

javascriptjquerycss

Customizing the input field to have a width of 100%

Could someone provide a solution, like a link or working example, for creating input fields with rounded corners that have a width of 100% and a customizable right border? Here is the current structure I am using: <span class="rounded left-corner" ...

htmlcssinputwidthrounding

Issue within the application causing a sudden shutdown

I have been encountering an application error in my android phonegap app. The issue arises when I transition from one page to another page, resulting in the following message: "A network error occurred.(file:///android_asset/www/home/home.html?userid=91 ...

androidhtmlcordova

How can I retrieve the selected value from an Angular 2 dropdown menu when it changes, in order to utilize it within a function?

I am currently working on creating a dropdown menu with multiple options. When a user selects an option, I need to make an API call that requires an ID parameter. Inside my component.ts file, I have defined an array containing the values like this: valu ...

javascripthtmlangulartypescript

Using JavaFX to showcase FontAwesome icons

I've been working on a project to create a custom icon class that can load FontAwesome icons, but I'm facing issues with reading the fontawesome-webfont.ttf file. Here is the code for creating an icon: import javafx.scene.control.Label; import ...

javacssjavafxfont-awesome

Tips for positioning a dropdown submenu

Check out this JSFiddle demo I created for a small dropdown menu¹. The one thing I'm struggling with is aligning the dropdown sub menu box properly. <ul id="nav"> <li> <a href="#" class="main-menu">vcds ...

htmlcss

Is there a way to achieve a full-page inset shadow using absolute positioned elements?

Currently, I am facing a challenge with a page that has an inset box shadow on the body element. When there are absolute and relative positioned divs on the page that expand enough to generate a scrollbar, the box shadow is cut off even when the height is ...

htmlcss

What is the best way to delete multiple highlighted contenteditable elements in HTML?

Is there a way to easily delete multiple HTML elements by selecting them and pressing the Backspace key? This functionality is available in the WordPress block editor as well as Editor.js. Users can highlight several blocks and remove them with a simple ke ...

javascripthtmlcss

Saving Selected Radio button values into Jquery Array

In my HTML table, there are multiple rows with radio buttons representing the sexes in the 0th position of <td>. I am trying to store the values of sex (either 1 or 0) in an array. Below is a snippet for a table with 3 rows. HTML Code: <table> ...

javascriptjqueryhtml

Guide to Hosting HTML on a Server Separate from Heroku

I currently have my index.html and the necessary .js files hosted on Heroku, where everything is functioning properly. However, I wish to avoid directing my users to "myappname.herokuapp.com", so I am considering using my own website to host the .html file ...

htmlnode.jsheroku

Exploring the depths of recursive descent parsing and the intricacies of abstract

As I dive into creating a recursive descent parser from scratch for educational purposes, I've encountered some challenges along the way. To illustrate my point, let's take a quick look at a snippet of the CSS3 grammar: simple_selector = type_s ...

cssparsingcss-selectorsabstract-syntax-treerecursive-descent

Adding hue to the portion of text following a JavaScript split() operation

I need assistance in printing the text entered in a textarea with different colors. I am separating the string using the split() method, which works fine. However, I now want to print the substrings in the textarea with colors. How can this be achieved? & ...

javascripthtml

Achieving Vertical Alignment of Content in Bootstrap 5

I've experimented with different approaches based on search results, StackOverflow suggestions, and examining existing code snippets. Here is the snippet of code I am working with: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a ...

htmlcsstwitter-bootstrapbootstrap-5

The collapsing z-index menu in Bootstrap 4 is experiencing CSS issues and is not functioning correctly

I have a bootstrap 4 menu with a slide effect that is functioning correctly, but there seems to be an issue with the z-index value I have set for it. Specifically, there is some content within a parallax jumbotron that is overlapping the menu links. I need ...

htmlcsstwitter-bootstrap