Primero que todo voy a mencionar que la parte de código que voy a poner es sólo una parte de contenido de toda la página que estoy armando (parte del medio, donde va el contenido central), así que les pegaré sólo ese fragmento. El problema es que mi div no se ajusta al contenido, es decir, tengo un div contenedor y dentro varios divs, pero el contenido de estos se sale de mi div contenedor, traté aplicando propiedades como height:auto, min-height, max-height... pero lo que quiero hacer es que a medida que más contenido tenga un div, más se agrande, quiero decir, que tenga tamaño dinámico, se entiende? Busqué en google el mismo problema pero nada, quizás es donde no proceso que se me está llendo un detalle, ojalá me puedan ayudar.
Les dejo el código, para esto consideren que el div color blanco es mi div contenedor y bueno, color gris oscuro es sólo el color de fondo del body:
Código:
(Tenía las clases a nivel de hoja de estilo .css, así que hay algunas clases de texto que no están aquí, no son importantes por ahora)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
body {
background-color:#333333;
}
.subContainer, #container2 {
width: 900px;
margin: 0 auto 0 auto; !important
}
#container2 {
padding-left: 30px;
padding-right: 30px;
}
#contentContainer {
text-align: left;
background-color:white;
}
#subContainer {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 30px;
}
#top {
border-bottom-style : dotted;
border-bottom-width: 2px;
border-bottom-color : #999999;
padding-bottom: 20px;
margin-bottom : 20px;
}
#head {
width: 780px;
}
#letter {
position: relative;
top: 35px;
left: 27px;
}
#bottomC {
}
#formContent, #formTexts, #head {
float: left;
}
#formTexts {
width: 50px;
line-height: 26px;
}
#form {
padding-top: 5px;
}
#formContent {
border-right-style: dotted;
border-right-width: 2px;
border-right-color: #999999;
margin-right: 20px;
padding-right: 20px;
}
</style>
</head>
<body>
<div id="container2"> <!-- CONTAINER 2 -->
<div id="contentContainer"> <!-- content -->
<div id="subContainer"> <!-- subContainer -->
<div id="top"> <!-- top -->
<div id="head"> <!-- head -->
<a class="titleText">CONTACTO</a>
<br/><br/>
<a class="miniTitle">ANTE SUS DUDAS CONSULTENOS</a>
<br/><br/>
<a class="normalText">Este ciclo pretende además revisar en forma general algunos conceptos clave, las principales fases del proceso de innovación y los elementos centrales para una gestión de innovación exitosa.</a>
</div> <!-- /head -->
<div id="letter"> <!-- letter -->
<img src="img/letter.png"/>
</div> <!-- /letter -->
</div> <!-- /top -->
<div id="bottomC"> <!-- bottomC -->
<div id="formContent"> <!-- formContent -->
<img src="img/orangeBar.png"/>
<br/>
<div id="formTexts"> <!-- formTexts -->
<a class="formText">Nombre:</a>
<br/>
<a class="formText">Apellido:</a>
<br/>
<a class="formText">Cargo:</a>
<br/>
<a class="formText">E-Mail:</a>
<br/>
<a class="formText">Teléfono:</a>
<br/>
<a class="formText">Consulta:</a>
<br/>
</div> <!-- /formTexts -->
<div id="form"> <!-- form -->
<input type="text" name="nombre"/>
<br/>
<input type="text" name="apellido"/>
<br/>
<input type="text" name="cargo"/>
<br/>
<input type="text" name="email"/>
<br/>
<input type="text" name="telefono"/>
<br/>
<textarea class="formTextArea" name="consulta"></textarea>
<br/>
</div> <!-- /form -->
</div> <!-- /formContent -->
<div id="details"> <!-- details -->
DETAILS
</div> <!-- /details -->
</div> <!-- /bottomC -->
</div> <!-- /subContainer -->
</div> <!-- /content -->
</div> <!-- /bottom -->
</div> <!-- /CONTAINER 2 -->
</body>
</html>
Saludos y muchas gracias por darse el tiempo de leer, estaré muy agradecido con cualquier tipo de ayuda que me puedan otorgar.
Adiós!
Este tema le ha gustado a 1 personas