Make sure the image div container fully extends within the custom image box design

I have created a custom image box HTML control that features an image area with small thumbnail images positioned at the bottom, top, left, or right of the main image. However, I am facing an issue where the main image div container is not expanding to fill the remaining space in the main frame div.

Below is the code snippet:

.wvIBoxFrameDiv {
    width: 300px;
    height: 300px;
    background: red;
 }

.wvIBoxMainImageDiv {
    background: green;
}

.wvIBoxThumbContainerDiv{
    background: black;
    overflow: hidden; 
    white-space: nowrap;
}

.wvIBoxThumbImagesContainerDiv{
    background: blue; 
    display: inline-block; 
}

.wvIBoxThumbNavigationDiv{
    background: purple;
    display: inline-block;
    height: 30px;
    width: 30px;
}

.wvIBoxThumbImageDiv{
    background: orange;  
    display: inline-block;
    height: 40px;
    width: 40px;
}
<div class="wvIBoxFrameDiv">
    <div class="wvIBoxMainImageDiv">
    </div>
    <div class="wvIBoxThumbContainerDiv">
        <div class="wvIBoxThumbNavigationDiv"></div>
        <div class="wvIBoxThumbImagesContainerDiv">
            <div class="wvIBoxThumbImageDiv"></div>
            <div class="wvIBoxThumbImageDiv"></div>
            <div class="wvIBoxThumbImageDiv"></div>
            <div class="wvIBoxThumbImageDiv"></div>
            <div class="wvIBoxThumbImageDiv"></div>
            <div class="wvIBoxThumbImageDiv"></div>
        </div>
        <div class="wvIBoxThumbNavigationDiv"></div>
    </div>
</div>

I need the thumbnails div container (with a black background) to be placed at the bottom of the main (red) frame div, while the main image div (with a green background) should expand to occupy the remaining area.

What could be the error in my implementation?

javascripthtmlcss

Answer №1

Set height and width to 100% for the element with the class .wvIBoxMainImageDiv

.wvIBoxFrameDiv {
    width: 300px;
    height: 300px;
    background: red;
 }

.wvIBoxMainImageDiv {
    background: green;
    height:100%; /*set height to 100% here*/
    width:100%; /*and set width to 100% here*/
}

.wvIBoxThumbContainerDiv{
    background: black;
    overflow: hidden; 
    white-space: nowrap;
}

.wvIBoxThumbImagesContainerDiv{
    background: blue; 
    display: inline-block; 
}

.wvIBoxThumbNavigationDiv{
    background: purple;
    display: inline-block;
    height: 30px;
    width: 30px;
}

.wvIBoxThumbImageDiv{
    background: orange;  
    display: inline-block;
    height: 40px;
    width: 40px;
}
<div class="wvIBoxFrameDiv">
    <div class="wvIBoxMainImageDiv">
    </div>
    <div class="wvIBoxThumbContainerDiv">
        <div class="wvIBoxThumbNavigationDiv"></div>
        <div class="wvIBoxThumbImagesContainerDiv">
            <div class="wvIBoxThumbImageDiv"></div>
            <div class="wvIBoxThumbImageDiv"></div>
            <div class="wvIBoxThumbImageDiv"></div>
            <div class="wvIBoxThumbImageDiv"></div>
            <div class="wvIBoxThumbImageDiv"></div>
            <div class="wvIBoxThumbImageDiv"></div>
        </div>
        <div class="wvIBoxThumbNavigationDiv"></div>
    </div>
</div>

Answer №2

Another option is to utilize flexbox, with the help of auto-prefixer:

<div class="completeGallery">
  <div class="primaryImage">
  </div>
  <div class="additionalImages">
    <div class="navButton">
    </div>
    <div class="pictureGroup">
      <div class="singlePicture"></div>
      <div class="singlePicture"></div>
      <div class="singlePicture"></div>
    </div>
    <div class="navButton">
    </div>
  </div>
</div>


.completeGallery {
  width: 300px;
  height: 300px;
  background-color: red;
  display: flex;
  flex-direction: column;
}
.primaryImage {
  width: 100%;
  flex: 1;
  background-color: yellow;
}
.additionalImages {
  width: 100%;
  height: 70px;
  background-color: green;
  display: flex;
}
.navButton {
  width: 40px;
  height: 100%;
  background-color: pink;
}
.pictureGroup {
  flex: 1;
  display: flex;
  justify-content: space-around;
}

.singlePicture {
  background-color: blue;
  width: 26%;
}

http://codepen.io/anon/pen/JYrdQJ

This design appeals more to me

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

In TypeScript, how are angle brackets like methodName<string>() utilized?

Could someone please assist me in understanding why we use angular brackets <> in typescript? For example, I have provided some code below and would appreciate an explanation. export class HomePage { constructor(public navCtrl: NavController) ...

javascriptangularjstypescript

Can space variables be integrated into the Global PDF Stylesheet in Confluence? Is there a way to include them in PDF Exports as well?

When exporting PDFs, my goal is to display the space name at the bottom center of the export file. However, I have attempted the following code without success: @bottom-center { content: $space.getName(); } It seems that the space variables do not funct ...

csspdfconfluencepdf-extraction

Monitoring a specific property within an array of objects with AngularJS

I am facing an issue with the data in my controller $scope.data = { home: { baseValue: "1", name: "home" }, contact: { baseValue: "2", name: "contract" } // numerous ...

javascriptangularjs

Scroll-triggered Autoplay for YouTube Videos using JQuery

Issue: I'm trying to implement a feature where a YouTube video starts playing automatically when the user scrolls to it, and stops when the user scrolls past it. Challenges Faced: I am new to JavaScript web development. Solution Attempted: I referre ...

javascriptjqueryhtmlyoutube

Angular: Implementing asynchronous data retrieval for templates

I am currently facing the following issue: I need to create a table with entries (Obj). Some of these entries have a file attribute. When an entry has a file attribute (entry.file), I need to make a backend call to retrieve the URL of that file: public g ...

htmlangulartypescriptrxjs

Constructing a framework through an aggregation query to categorize by two identifiers

I possess a variety of documents similar to the example displayed below as 3 distinct objects. { comment:{ text_sentiment: "positive", topic: "A" } }, // DOC-1 { comment:{ text_sentiment: "negative", ...

javascriptdatabasemongodbaggregation-frameworkaggregate-functions

Encountered an error when attempting to run npm start due to the absence of the required module 'minizlib

I recently cloned a react-native project from GitHub to start working on it, but encountered an issue with npm start failing and displaying the following error: Error: Cannot find module 'minizlib' Require stack: - /usr/local/lib/node_modules/ex ...

javascriptreact-nativenpmexpo

What is the best method for bringing in gulp tasks?

After reading this article: https://css-tricks.com/combine-webpack-gulp-4/ And exploring this repository: https://github.com/PascalAOMS/gulp4-webpack I'm currently facing a challenge where I am attempting to import gulp tasks from one file into anot ...

javascriptgulp

Why is receiving input value in React not successful?

Attempted to retrieve input value when user clicks search, but encountered difficulties. var Login = React.createClass({ getInitialState: function () { return {name: ''}; }, handleSearch(){ alert(this.state.name); // Why isn't ...

javascriptreactjsecmascript-6

Buttons with a slight lean towards the edge

The alignment of these buttons within their container is not what I desire. They are currently floating to the left, which is a result of the float: left; attribute applied to them. I tried removing the float: left; and instead used text-align: center; on ...

htmlcss

Tips for aligning an icon vertically alongside text in Bootstrap 3

I've been attempting to center a Bootstrap glyphicon vertically in one column while aligning the text in another column. I've experimented with using tables and ghost cells (referencing Centering in the unknown). I'm hoping there's a so ...

csstwitter-bootstrap

Updating a specific property for each object within an array of objects in MongoDB, and inserting the object if it does not already exist

I am looking for a solution to update a property for each object in an array of objects. If some of the objects do not exist, I want to insert the missing objects instead. Currently, I have been using "upsert", which creates a new document when no documen ...

javascriptnode.jsmongodb

When attempting to modify styles in IE10, I consistently encounter an error message stating "Unable to evaluate expression."

Below is a JavaScript function I have created to hide an HTML tag: function hideObject(objectId) { var obj = document.getElementById(objectId); if (obj) { obj.style.display = "none"; } } I encountered a strange issue when using this ...

javascripthtmlinternet-explorercross-browser

Modify the color of a table cell date using PHP

I need to change the color of my td's client_birth_date based on the current date. For instance, if today is the client's birthday, I want the font color of this td to turn red. Here is a snippet of my HTML code: <?php foreach ($rows as $row) ...

phpcssarrays

What could be the reason behind the undefined return value of val()?

When I click a button, my script is supposed to get the value of the next hidden input field. However, it always returns "undefined". What could be causing this issue and why does val() return undefined? If I only try to select the element with next(' ...

javascriptjquery

Incorrect colors are shown by Electron and Webkit browsers

As I work on developing an application using Electron, I encountered a curious color discrepancy. In Adobe XD, the color reads as rgb(0,55,200), but when I input this exact value into my app created with Electron, the displayed color shifts to rgb(4,48,193 ...

javascriptvisual-studio-codeelectroncolor-profilesrgb

Child component in Angular2 makes an observer call to its parent object

Let me try to explain this in the best way possible. I have a service that includes an observable class responsible for updating itself. This observable class needs to be pushed out to the app using the observer within the service. How can I trigger that ...

javascripttypescriptangular

Enhancing leaflet popup functionality by incorporating ng-click into the onEachFeature function

After creating a map and connecting it with my geojson api, I encountered an issue when trying to link each marker popup with ng-click. Simply adding HTML like this did not work as expected: layer.bindPopup("<button ng-click='()'>+feature. ...

javascriptangularjsleafletangular-leaflet-directive

Invoke the designated JavaScript function within a subordinate <frame>

Below is an example of the standard HTML structure for a parent page named "index.html": <html> <head> <title>test title</title> </head> <frameset cols="150,*"> <frame name="left" src="testleft.html"> ...

c#javascripthtmldom

Can you pinpoint the weak wiring in this AngularJS function?

I am currently studying AngularJS and I suspect there may be a glitch in my page. On the page, there is a TEXTAREA where I have typed 'aaa'. The TEXTAREA is linked to an ng-model named input. The following AngularJS code aims to monitor external ...

javascriptajaxangularjspost