My root div has a width of 100% and I need to ensure that all children do not overlap (overflow:hidden) or exceed the 100% width.
While this works well with inner <div>s, using <table>s often causes the table to extend beyond the parent 100% div.
Is there a way to fix this issue while still utilizing the table?
Check out the solution on this JSFiddle.
See the screenshot for reference:
https://i.stack.imgur.com/0DjXQ.png
To ensure that the text within td elements displays properly, consider using word-break: break-word;. This is especially useful for long texts. Alternatively, you can use word-break: break-all; to force the text to break if needed.
Updated CSS Code
#container table td{
word-break: break-word;
}
Check out the live example here: https://jsfiddle.net/nikhilvkd/kLt1mec8/3/
If you incorporate the following CSS styles, it will likely resolve your issue:
#wrapper table {
table-layout: fixed;
}
#wrapper table td {
overflow: auto; /* can be set to hidden if desired */
}
Revised code snippet:
#wrapper {
width: 100%;
box-sizing: border-box;
padding: 20px;
}
#item {
padding: 10px;
border-style: solid;
border-color: #ff0000;
border-width: 1px;
overflow: hidden;
}
#wrapper table {
width: 100%;
border-style: solid;
border-color: #ff0000;
border-width: 1px;
table-layout: fixed;
}
#wrapper table td {
overflow: auto;
}
#wrapper table td:nth-child(1) {
width: 10%;
}
#wrapper table td:nth-child(2) {
width: 90%;
}<div id="wrapper">
<div id="item">
This is a normal text box where the width is preserved correctly.
</div>
<div id="item">
This div contains a very long word, for example, https://upload.wikimedia.org/wikipedia/commons/c/ca/Simca_1300_Serie_1_rear_20110114.jpg and the width does not exceed 100% of the parent's width as intended.
</div>
<table>
<tr>
<td>Col1</td>
<td>Col2 with lots of text including a long link like https://upload.wikimedia.org/wikipedia/commons/c/ca/Simca_1300_Serie_1_rear_20110114.jpg causing excessive width. How can I prevent this DIV from being wider than its parent?</td>
</tr>
</table>
</div>One possible solution is to use the CSS property word-break: break-all; for your table data cell
Currently, I am utilizing Twitter Bootstrap 3.3.5 within my Grails application. However, an issue has arisen where my GSP view is not displaying in full screen. Is there a way to achieve full screen display without disrupting the responsive features of B ...
A new application is in the works for a gaming project. This app is designed to display the location of a specific monster, utilizing a database containing information about monsters and their corresponding maps. Currently, the application functions almos ...
Is it considered unprofessional to construct a navigation menu without utilizing unordered list tags? For instance, opting for <div> elements instead. <div class="navbar"> <a href="#"> Home </a> </div> ...
After spending a day learning CSS and HTML, I decided to recreate a website from a YouTube video and add my own customizations. I was able to center the text in my introduction successfully. However, upon reviewing my progress (see screenshot here), it is ...
Utilizing the pagination component in Bootstrap, the structure of the pagination itself is quite straightforward: <ul class="pagination"> <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">« ...
I'm trying to figure out how to have divs start drawing from the same point. Essentially, I want to be able to add new divs and have them appear stacked on top of each other, so that they can all move together based on a single reference point. Here& ...
I need some help with bootstrap. I've looked at various discussions on this topic and tried numerous solutions, but I still can't get it right. I want the logo to be on the left and the navigation links aligned to the right. Here's what I&ap ...
Where is the navbar in this snippet? Did I overlook something important? If so, what? <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="navbar nav ...
Is there a way to apply a function to a specific class without requiring an id? For example, in CSS hover effects, where multiple elements share the same class but only the one being hovered over is affected. function toggleHeight(elementId, arrowId) { ...
@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' ); <div class="row"> <div class="col-xs-12 text-center btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> ...
I need to extract a specific div from the data returned by an if statement that is formatted as HTML, and then display it within another div. I have been attempting to achieve this using the code below, but so far it has not been successful... Here is my ...
My content includes the following: <div id="sContainer"> <div class="message0" id="l0">Initial Content 111</div> <div class="message1" id="l1">Initial Content 222</div> <div class="message2" id="l2">Initial ...
Trying to implement show/hide content with slideToggle and it's functioning, but the animation effect on the table is not smooth. Attempted two different codes, but none provided the desired animation effect: $('.more').slideToggle(' ...
Check out the Live Demo here, apologies for the messy CSS as I have been experimenting with different styles. I am currently attempting to print PDF files using the browser's print dialog. Each file consists of 4 pages in the DIN lang format with an ...
Don't forget to showcase all the amazing Tailwind CSS Colors, Sometimes they go missing unexpectedly, and only a few decide to make an appearance. I try to add them manually one by one, but sometimes they just don't show up on the map. Edit: ...
Check out the progress on this page: If you scroll to the bottom, you'll find a list of links - displayed in 4 columns in the regular view. When you resize the screen, they shift into a single column. I want them to show as a single column on an iPh ...
I have implemented a custom tag using cq:htmlTag in one of my components. Instead of assigning a static class name from a CSS file to the "class" property, I need to use the 'template name' as the value for the class property. Is there a method ...
I've encountered an unusual issue while transferring data from an email form (HTML5) to ajax/JSON and receiving false in order to prevent redirection to the php script after pressing the submit button. When I include commas between each data paramete ...
<!DOCTYPE html> <html> <body> <form action = "/submit" method = "post"> Select a file: <input type="file" name="file"> <input type="submit"> </form> </bod ...
So far, no suggestions have been made, indicating that maybe I haven't properly summarized the issue; The problem arises when I absolutely position the section with the class="container" using an additional class or id specific to that <div>. I ...