Fixed width blocks automatically adjusting to small containers

When I try to add text to my absolute block inner div, it doesn't expand as expected.

I am aware that expanding within a parent container with a specified width, such as 

<div class="main_wrap"></div>
, can be problematic.

Unfortunately, I cannot remove the width from the parent container. So, I am looking for a solution to correct this issue without using JavaScript. Is there a way to make it expand in width without affecting its height? Specifically, I need to address the element: <div class="abs">. Removing the width from .main_wrap fixes the display, but I require a solution that maintains the width due to the complex grid layout.

HTML:

<div class="block">
      <div class="abs">
          <table class="whf table">
              <tr>
                  <td>
                    <div class="image">
                      <div class="shadow"></div>
                      <img src="http://boardingarea.com/blogs/deltapoints/files/2012/07/test.jpg" width="77" />
                    </div>
                  </td>
                  <td class="vamid">
                      <div class="text">
                          Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum  Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
                      </div>
                  </td>
              </tr>
          </table>
      </div>

Full example available here:

http://jsbin.com/uqafuq/6/edit

Any help would be greatly appreciated.

htmlcss

Answer №1

Your explanation is a bit confusing and the way you structured it seems unconventional, but is this the outcome you were aiming for? http://jsbin.com/uqafuq/11/edit

To achieve the desired result, simply take out the height: 100% from the .abs class.

Answer №2

Remove the height: 100% declaration from the .abs class, as you are setting the height based on the parent element which does not have a defined height.

Include display: inline-block; in the .block class

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

Prevent scrolling on both md-sidenav and md-content in AngularJS Material

Currently, I am working on a website using AngularJs Material sidenav. My goal is to make both md-sidenav and md-content appear as one page, without any scroll bars showing up when the height of one element exceeds that of the other. How can I achieve th ...

cssangularjsangularjs-material

The Alchemy feature on hover is not functioning

I am currently using alchemy.js to display a graph, but I am encountering issues with showing the "onMouseOver" caption of the graph's node. The console is displaying some errors which you can see here. Here is the code snippet: <html> < ...

javascripthtmljsononmouseoveralchemy

Is it possible to show one element while hiding others upon clicking using JavaScript?

Concept My idea is to create a website with a navigation menu where only one section is visible at a time. Each section would become visible upon clicking a specific button in the navigation bar. Challenge I attempted to achieve this using the following ...

javascripthtmlcssweb-frontend

Obtain the data from the hyperlink destination

Having some trouble extracting a value from an href link to use in my database operations. Unfortunately, I couldn't retrieve the desired value. Displayed below is the code for a button: <a class="btn btn-info" href="scheduleSetTime.php?id=&apo ...

javascriptphpjqueryhtml

Scrolling to a specific position on a page when a Vue 3 component appears is a must-do for

When I click a button, my basic form component appears without using the router. I would like the scroll position of the form to automatically move down slightly (for example, on the y-axis at 40) once it is displayed. However, I am unsure of how to achi ...

javascripthtmlvue.jsvuejs3

Ways to enable JavaScript code to accept input from both a text field and a text

I have a JavaScript code that allows users to input text and choose to make it bold, italicized, or underlined. For example, if the user checks the bold option, the text will appear in bold format. Here is the JavaScript code I am using: $('input[n ...

javascripthtmljquerycss

Issue with wrapper not aligning correctly at the top of the screen

I keep noticing a gap between my wrapper and the top of the page. Despite trying multiple solutions, none seem to work for me. The background image covers the entire background and is aligned at the top perfectly, but the wrapper with its own background a ...

htmlcsstwitter-bootstrap

When the screen is at mobile width, elements with the class "Responsive" are hidden using the display:none; property. These elements can be

Hey there! So, I've got this cool interactive banner on my website. It features 2 slider sections with some awesome products on the right side. The layout is responsive, meaning that when you switch to a mobile screen size (around 515px or less), the ...

javascriptjqueryhtmlcssresponsive-design

Adding a half circle connector in HTML can be accomplished by using SVG (Scal

My task is to replicate the construction shown in this image: https://i.sstatic.net/kaRMO.png I have written the entire code but I am unsure how to include a half circle next to the full circle and connect it with a line connector. Here is my code: .ps- ...

javascripthtmlcss

Using FieldSet in ASP.net Forms

Utilizing the FieldSet element in my web application requires me to customize its style. I aim to change the border color to blue and make the legend bold in color. Any guidance on how to achieve this would be greatly appreciated. Thank you in advance. ...

htmlcss

Refreshing the parent page in Oracle Apex upon closing the child window.When the child window

I have created an interactive report with a form where the interactive report is on page 2 as the parent page and the form page is on page 3 as the child page. In the parent page, I have written JavaScript to open a modal window (form page - page 3) using ...

javascriptjqueryhtmloracleoracle-apex

Unable to get PrependTo to remove itself when clicked

Below is a custom jQuery script I put together: $(function(){ $("a img").click(function() { $("<div id=\"overlay\"></div>").hide().prependTo("body").fadeIn(100); $("body").css({ ...

javascriptjqueryhtmlxhtml

Encountering a problem when attempting to send an HTML email through PHP

Trying to use PHP to send email within an HTML code snippet. Here's the code I've written: <?php if($_SERVER['REQUEST_METHOD'] == 'POST') { if ( mail ('<a href="/cdn-cgi/l/email-protection" class="_ ...

phphtmlemail

Images displaying correctly in Next.js development environment, but failing to load on Github Pages production site

I am currently using Next.js alongside Tailwind CSS and I'm encountering an issue while attempting to set a background image for a specific div. Oddly enough, the image appears to load correctly in development mode, but fails to display when deployed ...

htmlreactjsnext.jstailwind-cssgithub-pages

Combining dropdowns, nav-pills, and separate links in Bootstrap 4 to create a seamless horizontal layout

Trying to achieve a layout in Firefox where everything is displayed in one single horizontal row. This includes the label Dropdown, dropdown box itself, bootstrap nav-pills menu, and separate link. Code snippet: (jsfiddle: https://jsfiddle.net/aq9Laaew/16 ...

csshtmlbootstrap-4

Adding a dynamic form to each row in a table: A step-by-step guide

https://i.sstatic.net/HctnU.jpg Hey there! I'm facing a challenge with dynamically generated rows in a form. I want to send only the inputs from the selected row when a checkbox is clicked. Can you help me figure this out? I tried using let rowForm ...

javascriptphphtmljquery

Combine two separate variables and insert them into a single cURL command line

I need to incorporate a random value from a variable into a cURL command. Additionally, I want the cURL command to execute a function using this random value. At the end of the function, I want to add a different value to the first one for completion and t ...

phphtmlvariablescurl

How to visually deactivate a flat button ( <input type="button"> ) programmatically with JavaScript

I am facing an issue with my buttons. I have one regular button and another flat button created using input elements. After every click, I want to disable the buttons for 5 seconds. The disable function is working properly for the normal button, but for th ...

javascripthtmlcssbutton

The hover effect is not activated by the mouse movement event

I previously encountered an issue related to flickering with an absolute div when moving my mouse, which I managed to resolve by increasing the distance between my mouse pointer and the div. Now, I am working on the next phase of my project: My goal is t ...

javascriptjqueryhtmlcss

Issue with jQuery: addClass not toggling within an IF statement

Is there a way to dynamically add the class "disable" to an anchor tag when a user selects the radio button labeled "Remove"? Currently, in the provided fiddle, the class is added as soon as the page loads. I have included code in the script that successf ...

javascriptjqueryhtml