Adjust the parent's height to match the height of its content (CSS)

Could anyone assist me in figuring out how to adjust the height (red border) to fit the content (green border)?

https://i.sstatic.net/l1p9q.png

I'm struggling to determine which property to use, I'm aiming for this outcome but haven't had any luck so far

https://i.sstatic.net/YEakI.png

div.items {
  position: fixed;
  top: 7.4cm;
  left: 1cm;
  width: 19.6cm;
  height: 4.5cm;
  border: 1px solid black;
}

div.item {
  border: 1px solid red;
  height: 19px;
}

div.cantidades {
  position: absolute;
  left: 0.1cm;
  width: 1.6cm;
}

div.descripcion {
  position: absolute;
  left: 1.9cm;
  width: 10.5cm;
}

div.precioUnitario {
  position: absolute;
  left: 12.4cm;
  width: 1.5cm;
}

div.ventas {
  position: absolute;
  left: 17.4cm;
  width: 2.2cm;
}

div.green {
  border: 1px solid green;
}
<div class="items">
  <div class="item">
    <div class="cantidades">2</div>
    <div class="descripcion">TM. MAIZ AMARILLO DE MUELLE DE CEPA HACIA BODEGAS DE ALMAPAC</div>
    <div class="precioUnitario">$1.60</div>
    <div class="ventas">$60</div>
  </div>
  <div class="item">
    <div class="cantidades">2</div>
    <div class="descripcion">TM. MAIZ blanco</div>
    <div class="precioUnitario">$1.90</div>
    <div class="ventas">$6</div>
  </div>
</div>

htmlcss

Answer №1

If you want your layout to be responsive, then always go with the flex property. I've also cleaned up some unnecessary code that was conflicting with your requirements.

div.items {
  top: 3.4cm;
  left: 1cm;
  width: 19.6cm;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

div.item {
  border: 0px solid red;
  display: flex;
  border: 1px solid blue;
}

div.cantidades {
  left: 0.1cm;
  width: 1.6cm;
  border: 1px solid green;
}

div.descripcion {
  left: 1.9cm;
  width: 10.5cm;
  border: 1px solid green;
}

div.precioUnitario {
  left: 12.4cm;
  width: 1.5cm;
  border: 1px solid green;
}

div.ventas {
  border: 1px solid green;
  left: 17.4cm;
  width: 2.4cm;
  position: absolute;
}
<html>

<head>
  <title>Print Test</title>
</head>

<body>
  <div class="items">
    <div class="item">
      <div class="cantidades">2</div>
      <div class="descripcion">TM. MAIZ AMARILLO DE MUELLE DE CEPA HACIA BODEGAS DE ALMAPAC TM. MAIZ AMARILLO DE MUELLE DE CEPA HACIA BODEGAS DE ALMAPAC</div>
      <div class="precioUnitario">$1.60</div>
      <div class="ventas">$60</div>
    </div>

    <div class="item">
      <div class="cantidades">2</div>
      <div class="descripcion">TM. MAIZ blanco</div>
      <div class="precioUnitario">$1.90</div>
      <div class="ventas">$6</div>
    </div>
  </div>
</body>

</html>

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

What is the best way to ensure that the content on my webpage stays below the navbar, no matter the height of the

I've been working on my homepage layout and encountered an issue with positioning the content below the navbar, which is centered on the page. Every time I adjust the window height, the content shifts. How can I ensure that it stays fixed below the na ...

htmlcssresponsive-designscreen-orientation

Modifying the maximum length of input fields in HTML, Javascript, and PHP is possible by adjusting the value through

Hi there, I'm facing an issue that should be easy for you guys to help me with. I recently discovered a security flaw while using the maxlength function in HTML. Users can easily modify the maxlength attribute by inspecting elements on the website, wh ...

javascriptphphtmlmaxlength

Ways to adjust the width of grid columns within an implicit row

I am curious about changing grid columns on an implicit row. While I won't provide the exact code that I'm working on, I will offer a brief example to clarify my question. <div class='container'> <p>item-1</p> <p& ...

csscss-grid

Can you point me in the right direction for declaring the ImageObject format in Angular?

To create an Image Slider similar to the one shown here, I need to load images from a source. However, I'm unsure about where exactly in the file (possibly in the component.ts?) I should declare them: imageObject: Array<object> = [{ ...

htmlcssangularslideshow

Strategies for smoothly navigating the page to a specific div every time

Currently, I am working on a form that requires submitting multiple child forms. To enhance user experience, I have incorporated jQuery functionality to display a message at the top of the page upon each submission. Now, my goal is to implement a feature w ...

javascriptjqueryhtmlcss

Display two images consecutively within a single img tag

My goal is to display two images using a single <img /> tag. The first small image will be loaded and shown using the src attribute, while the second large image will be contained within the data-src attribute. Only one image will be displayed at a t ...

javascriptjqueryhtmlcssimage

Remove the </div> text and replace it with nothing

I'm attempting to substitute the end tag div with an empty string. Here is my code: $('#textDiv').html().replace(/'</div>'/g,'').replace(/<div>/g,'\n') This is the HTML: <div id='tex ...

javascriptjqueryhtml

Having issues with jQuery not functioning on this specific web page across all browsers. The reason behind this puzzling dilemma remains elusive to me

I am experiencing issues with the functionality of my website. The buttons with + signs are meant to be drop-down toggles, and the mini-tabs below them should work as tabs. Additionally, the sample images at the bottom are not loading properly when clicked ...

javascriptjquerycssdebugging

There seems to be an issue with the CSS file linking properly within an Express application

Every time I run my app.js file, the index.html file is displayed. However, when I inspect the page, I notice that the CSS changes are not taking effect. Strangely, if I open the HTML file using a live server, the CSS changes are visible. Can someone exp ...

javascripthtmlcssnode.jsexpress

What is the process of closing a dropdown in Vue 3 JS when clicking on any part of the page?

I am currently working with Vue 3 JS and Tailwind CSS. My dropdown functionality is working correctly, but I want the dropdown to close when clicking anywhere on the page. Initially, Tailwind guided me towards using Popovers and PopoverButtons, which cau ...

htmlvue.jsvuejs3dropdowntailwind-css

How to make sure that an element overflowing its container always starts from the top

My website has a section called <mat-drawer-container>, which contains a list of items called <mat-selection-list>. However, when the number of elements in the list exceeds the display height and scrolling is necessary, the scroll position star ...

htmlangularangular-material

Issue with long text in a resizable table using jQuery tablesorter 2.31.1

My issue is that when I try to resize the columns in tablesorter, they snap back into place. The column width set with resizable_widths does not apply correctly until a column is manually resized. Despite setting the width of all cells to 120px, any cells ...

javascriptjqueryhtmlcsstablesorter

Creating a menu bar in jQuery that functions similarly to tabs, but without the need to change divs

Currently, I am exploring ways to create tab functionality similar to jQuery's tabs plugin but without the need to switch between DIVs. Essentially, I am looking for a jQuery plugin that solely handles rendering the tab bar and allows me to designate ...

jquerycss

What is a reliable method for automatically refreshing a webpage despite encountering server errors?

I'm working on an HTML+JS web page that refreshes itself automatically every few seconds using http-equiv="refresh". The problem is, sometimes the server returns a 502 "bad gateway" error, preventing the HTML code from loading and causing th ...

javascripthtmlhttphttp-headers

The jQuery function for $(window).scroll is not functioning as expected

My challenge is getting the scroll to reveal my scrollTop value I've been working with this code: $(document).ready(function(){ console.log('Hello!'); $(window).scroll(function(){ console.log('Scrolling...'); var wScroll = ...

javascriptjqueryhtmlcss

No mouse cursor activity while in Pointer Lock mode

Using Pointer Lock for capturing the cursor in a game being developed in JavaScript with three.js has been quite interesting. Despite extensive online research, the reason why the cursor doesn't seem to move on Chrome OS remains elusive. A working exa ...

javascriptjqueryhtmlgoogle-chromethree.js

The input box fails to show larger values on the user's page

Show me the biggest number that the user enters in an input box and then display it back to them. I need some improvements to my code, ideally making it possible with just one input box instead of two. <!DOCTYPE html> <html la ...

javascripthtmlcssif-statement

What is the process for developing multiple screens or views in PhoneGap?

Currently working on a reading app and decided to give phoneGap a shot for the first time. I'm pretty proficient in HTML, CSS, and JS, but not very familiar with xCode. In this app, I plan to have a button on the home screen that redirects users to an ...

ioscsscordovamobile

Positioning of the footer using CSS: A query

What is the best way to position a footer if we know its height? For instance, if the height of the footer is 100px: footer { position:absolute; bottom: 100px; background: red; } If this approach is not recommended, could someone assist m ...

css

Detecting when users stop scrolling in Angular 5

Is there a way to toggle visibility of a div based on user scrolling behavior? I'd like the div to hide when the user scrolls and reappear once they stop. I've attempted to achieve this effect using @HostListener, but it only seems to trigger wh ...

htmlangulartypescript