Mantener ancho de un div con grid

Tengo un template creado con grid, uno de los item de ese grid tiene establecido el ancho, pero cuando se muestra, ese item se expande de igual manera. ¿Como puedo mantenerlo con el ancho fijo?

Mi código es el siguiente

<div class="container">     <div class="itemImg"></div>     <div class="itemTitle"></div>     <div class="itemDesc"></div>     <div class="itemDate"></div> </div>  .container {     display: grid;     grid-templateareas:         'img title'         'img desc'         'img date';     width: 100%;     grid-gap: 0px 10px; } .itemImg {     width: 80px;     height: 60px;     grid-area: img; } .itemTitle {     width: 100%;     grid-area: title: } .itemDesc {     width: 100%;     grid-area: desc; } .itemDate {     width: 100%;     grid-area: date; } 

Como podeis ver, el itemImg es el que tiene establecido un width fijo, pero aun así, se expande más.

Footer ubicado solo en la parte inferior de la página sin espacios de alto y ancho en asp.net

Estoy creando una app en ASP.NET y para acomodar el footer abajo se me esta complicando al igual que poner el ancho del 100% de la página, cosa que no se quiere aplicar y se mantiene centrada, por cierto estoy usando libreria de estilos de Bootstrap. Este es el código html / aspx del footer de la página maestra:

<footer class="page-footer font-small bg-dark" style="padding: 0; margin: 0; width: 100%; bottom: 0;">                 <!-- Footer Links -->                 <div class="container-fluid text-center text-md-left">                     <!-- Grid row -->                     <div class="row">                         <!-- Grid column -->                         <div class="col-md-6 mt-md-0 mt-3">                             <!-- Content -->                             <h3 style="color: white;">Acerca de Nosotros</h3>                             <p class="lead" style="color: white;">Texto</p>                             <p style="color: white;">Esta es nuestra ubicación</p>                             <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3965.716385745309!2d-75.57092518517804!3d6.300947927458416!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e442f25d6670d4d%3A0x8043999e5e767b96!2sSENA%20-%20Centro%20de%20Tecnolog%C3%ADa%20de%20la%20Manufactura%20Avanzada!5e0!3m2!1ses!2sco!4v1570754942399!5m2!1ses!2sco" width="400" height="100" style="border: 0;"></iframe>                         </div>                         <!-- Grid column -->                         <hr class="clearfix w-100 d-md-none pb-3">                         <!-- Grid column -->                         <div class="col-md-3 mb-md-0 mb-3">                             <!-- Links -->                             <p class="lead" style="color: white;">¿Necesitas ayuda?</p>                             <ul class="list-unstyled">                                 <li>                                     <a style="color: white;">Contactenos</a>                                 </li>                             </ul>                         </div>                         <!-- Grid column -->                     </div>                     <!-- Grid row -->                 </div>                 <!-- Copyright -->                 <div class="footer-copyright text-center py-1 blue" style="color: white;">© 2019 Derechos Reservados de Jose Quintero</div>             </footer> 

igualar el ancho de un elemento a otro existente

tengo  span clase ‘.uno’ y un div clase ‘.dos’ quiero igualar el ancho del div con el span para leer el ancho uso  uno.offsetWidth y para copiarlo en el div uso:  dos.style.width = uno.offsetWidth+’px’;   pero no consigo igualarlo le paso el codigo completo, me gustaría saber como porder hacerlo, muchas gracias     

si uso jquery no tengo ningun problema sale perfecto, he observado que con el inspector del navegador las medidas son un pco diferentes ya que offsetWidth redondea, si uso getBoundingClientRect.width si me da la misma medida que en css pero al aplicar el estilo el ancho es un poco mas grande que el primer elemento.

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>     <style type="text/css">         body{             padding: 0;             margin: 0;             background: #DEC8C8;         }          .contenedor{             margin: 20px;             padding: 20px;             width: 500px;             background-color: #CED9EA;             border: 1px solid black;          }         .uno{             padding: .2rem;             background-color: green;             border: 1px solid black;         }          .dos{             padding: .2rem;             background: blue;             border: 1px solid black;         }      </style> </head> <body>      <div class="contenedor">         <span class="uno">hola amigo como estas</span>         <br>         <div class="dos">hola</div>     </div>      <script type="text/javascript">         let uno = document.querySelector('.uno');         let dos = document.querySelector('.dos');          console.log('uno offsetWidth:'+ uno.offsetWidth);          console.log('uno clienttWidth:'+ uno.clientWidth);          console.log('dos offsetWidth:'+ dos.offsetWidth);          console.log('dos clienttWidth:'+ dos.clientWidth);            dos.style.width = uno.offsetWidth+'px';      </script>  </body> </html> 

Obtener el ancho y largo de una imagen en input file

Tengo que obtener el ancho y largo de una imagen que se seleccionó de un input file. He intentado con esto, sin éxito. No estoy segura si este sea el método correcto para obtenerlos o pueda hacerlo de otra forma.

HTML

<form id="formimg">     <label>Selecciona una imagen</label>     <input type="file" name="txtFile" id="txtFile" accept="image/*"> </form> 

JS

$  ("#txtFile").change(function(e) {          var image, file;          if ((file = this.files[0])) {             image = new Image();              image.onload = function() {                 alert("La imagen es de ancho " + this.width + " y largo " + this.height);             };              image.src = _URL.createObjectURL(file);         }       }); 

¿Cómo saber el ancho de una collectionView en iOS, Xcode?

tengo una collectionView que ocupa todo el ancho de la pantalla, como quiero tener 10 columnas, tengo este código:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {     let sizePantalla = UIScreen.main.bounds     let ancho = sizePantalla.width / CGFloat(10.0)     return CGSize(width: ancho, height: ancho) 

Todo va bien, pero quisiera que la collectionView no ocupara todo el ancho de la pantalla, que fuera más pequeño. Este ancho no es fijo en diseño, sino que cambiará según el dispositivo en el que se ejecute la App. Esta es mi duda: ¿cómo consigo el ancho de la collectionView?

¿Cuál es el ancho de una tablet y de un celular?

Necesito saber que ancho y alto ponerle a un div para que sea tablet o celular, ya que estoy usando unos botones de selección de dimensiónes para mostrar unos productos que se adaptan a la pantalla. ¿qué ancho y alto usar?

body{ margin: 0; } iframe{ border: 0; height: 100%; } .box{ background-color: #ddd; display: flex; justify-content: center; align-items: center; } .tablet{ margin-top: 50px; margin-bottom: 50px; height: 700px; width: 300px; border: 10px solid #ff4000;
<div class="box">  <div class="tablet">  <iframe src="https://css-tricks.com"></iframe>  </div>  </div>

¿Cómo puedo hacer que este menú ocupe todo el ancho de la página?

Este código me lo dió mi profesor de Informática para empezar a crear una página web, he probado con cambiar el valor de widht a 100% pero lo único que hace es cambiar de posición el menú entero. Apenas estoy empezando y se me hace un tanto difícil, tenganme paciencia please.

css:

* { 				margin:0px; 				padding:0px; 			} 			 			#header { 				margin:auto; 				width:415px; 				font-family:Arial, Helvetica, sans-serif; 			} 			 			ul, ol { 				list-style:none; 			} 			 			.nav > li { 				float:left; 			} 			 			.nav li a { 				background-color:#FE2E2E; 				color:#fff; 				text-decoration:none; 				padding:12px 20px; 				display:block; 			} 			 			.nav li a:hover { 				background-color:#434343; 			} 			 			.nav li ul { 				display:none; 				position:absolute; 				min-width:140px;                                 z-index:2; 			} 			 			.nav li:hover > ul { 				display:block; 			} 			 			.nav li ul li { 				position:relative; 			} 			 			.nav li ul li ul { 				right:-140px; 				top:0px; 			}