html - Expanding DIV based on contents -
i have few divs nested within each other display content. 2 inner divs should expand equally in height based on text displayed inside of them text keeps going without div.
from reading other user's questions, recommended use overflow: auto; resulted in scrollbars, want height of divs grow if needed. container div has fixed height have tried changing min-height instead, causes taller actual contents inside believe caused them have 100% height.
how can fixed?
.item { width: 100%; height: 200px; background-color: #5ea8de; margin-top: 10px; border: 2px solid red; } .trigger { width: 20%; height: 100%; background-color: #5ea8de; float: left; padding-left: 15px; border: 2px solid green; } .task { width: 78%; height: 90%; margin-top: 7px; background-color: #1c3c5b; float: left; /*border: 1px solid;*/ border: 2px solid blue; }
html:
foreach ($tasks $task) { echo "<div class='item'>"; $id = $task->id; $type = $task->type; $desc = $task->description; $emits = $task->emits; $events = $task->tasks; echo "<div class='trigger'> <div class='remove'><a href=''><img src='images/remove.png'></a></div> <h4>trigger: </h4></br> $desc <p> <h4>emits: </h4>"; foreach ($emits $emit) { echo $emit . "</br>"; } echo "</div>"; echo "<div class='task'>"; foreach($events $event) { $event_id = $event->id; $event_method = $event->taskmethodname; $event_params = $event->parametermapping; $event_oneshot = $event->isoneshot; $event_enabled = $event->enabled; // use method id , retrieve description display (make helper method this???) foreach ($methods $method) { if ($method->id == $event_method) { echo "<div class='remove'><a href=''><img src='images/remove.png'></a></div>"; echo "<h4>method: " . $method->description . "</h4>"; } } // loop through individual parameters , display both key/value foreach ($event_params $key => $value) { echo "<label>" . $key . " | " . $value . "</label></br>"; } echo "<hr>"; } echo "</div>"; //task echo "</div>"; //trigger }
you can using display: table
here example
.item { width: 100%; background-color: #5ea8de; margin-top: 10px; border: 2px solid red; display: table; } .trigger { width: 20%; height: 100%; background-color: #5ea8de; vertical-align: top; padding-left: 15px; border: 2px solid green; display: table-cell; } .task { width: 78%; vertical-align: top; margin-top: 7px; background-color: #1c3c5b; display: table-cell; /*border: 1px solid;*/ border: 2px solid blue; }
Comments
Post a Comment