Sticky header and a sidebar gallery with consistently sized thumbnails

Hello everyone, I'm stepping into the world of HTML and CSS with my first question. As a beginner, I find myself facing a challenge that seems to be beyond my current skill level.

Here's the scenario: I want to create a webpage with a fixed left navigation bar and a gallery on the right featuring items with fixed widths.

I've created a fiddle for you to check out: http://jsfiddle.net/1fbntotr/

<div class="left"> <div class="logo"> </div></div> 

<div class="right">

<div class="item"> </div><div class="item"> </div><div class="item"> </div><div class="item"> </div>
<div class="item"> </div><div class="item"> </div><div class="item"> </div><div class="item"> </div>
<div class="item"> </div><div class="item"> </div><div class="item"> </div><div class="item"> </div>
<div class="item"> </div><div class="item"> </div><div class="item"> </div><div class="item"> </div>
<div class="item"> </div><div class="item"> </div><div class="item"> </div><div class="item"> </div>


</div>

The issue is that the right part of the page doesn't recognize when the items end, resulting in a 'ghost' section in the middle, despite using percentage-based widths.

I've attempted solutions from various discussions, but they don't seem to align with my specific layout. Is there a fundamental concept or solution that I may have overlooked? Any guidance would be greatly appreciated. Thank you for your understanding.

htmlcssfixednavbar

Answer №1

Combining fixed elements with percentages and pixels can be quite challenging.

In order for everything to work correctly, not only does the container .right need to have a percentage width, but the contents within it also need to have a percentage width. However, specifying the height still requires using units like px, em, or rem.

If you're encountering difficulties, consider exploring Bootstrap as it provides solutions to many common issues related to using percentages in layouts.

For a visual representation of what you're trying to achieve, refer to this example: http://jsfiddle.net/2c2e8j86/

.logo {
    margin:0 auto;
    background-color:#97CC66;
    width:110px;
    height:110px;
    margin-top:150px;
}

.left {
    background-color:#000;
    width:19%;
    position:fixed;
    height:1400px;
}

.right { 
    background-color:#FFF;
    width:78.5%;
    margin-left: 19.5%;
}

.item {
    width:25%;
    float:right;
}

.item-inner {
    margin: 0 0 2px 2px;
    background-color:#C7003F;
    height:138px;
}

To ensure there is spacing between the .items inside the container, make sure to include an additional .item-inner div.

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 happens to the content in a browser when the window is minimized?

The appearance of my application is enhanced when the browser window is maximized to its full extent, causing the content to be collapsed upon minimizing the browser window. I prefer the content not to collapse. I have utilized a div that resembles a text ...

jqueryhtmlcssbrowseruser-interface

Horizontal SWF's are providing spaces of white in between them

I'm struggling with removing the white space between SWFs on my HTML page. I've tried using 'block' in CSS, but it's not working for a horizontal layout. Adding "0" for the border hasn't helped either. I'm getting frustr ...

htmlcssflashactionscript-3

Javascript-generated HTML elements are invisible

I am attempting to create a "circle of fifths" using html, css, and javascript. I am following this tutorial: https://blog.logrocket.com/interactive-svg-circle-of-fifths/ Although I am using the astro framework, I don't believe my issue is related to ...

javascripthtmlcssastrojs

Problem with the menu button overflowing

I'm exploring the process of designing burger menus for the mobile version of my site. I've successfully created a basic burger menu with some JavaScript assistance, but I encountered an overflow issue. The burger menu functions properly, but the ...

htmlcss

Basic HTML and JavaScript shell game concept

After spending several days working on this project, I am struggling to understand why the winning or losing message is not being displayed. The project involves a simple shell game created using HTML, JavaScript, and CSS. I have tried reworking the JavaSc ...

javascripthtmlcssshell

Why does Node.js prompt an error when using document.querySelector? Is there an alternative method to document when utilizing express in my project?

An issue arose when attempting to select the form element using const weatherForm = document.querySelector('form') ^ Unfortunately, a ReferenceError was encountered: document is not defined at Object. (/Users/sheebadola/development/quadacademy/w ...

htmlnode.jsformsexpress

Ways to monitor and measure clicks effectively

Within my website, I have a table element with one column and numerous rows. Each row serves as a hyperlink to an external shared drive. <tr><td ><a href="file://xxx">Staff1</a></td></tr> <tr ><td ><a h ...

javascripthtml

Error: The function 'document.getsElementsByClassName()' is not defined when evaluating 'undefined'

Actual Error TypeError: undefined is not a function (evaluating 'ActiveElem[i].hasClass('active'); HTML <div class = 'Carousel-Inner'> <div class="morningSlide active"> <img src="/Users/KO527/Sites/TarasDeli ...

javascriptjqueryhtmltypeerror

What is the functionality of the CSS switch button?

I'm curious about how the cool turn on/off switch button actually works. Take a look at for reference. I'm interested in implementing a prevention check to confirm whether the user truly wants to switch the button. Here's a snippet of the ...

jquerycss

Emphasize certain VueJS elements for focus

Currently, I am working with a Vue file and I'm interested in highlighting the active element. Can you recommend the most efficient method to achieve this? <li @click = "selectedComponent = 'appBugs1'"><i class="ion-bug"></i& ...

htmlvue.js

The positioning of the menu icons varies

When it comes to displaying the search icon in the WordPress toggle bar, I use a custom JavaScript file. This setup is mainly focused on website design and menu functionality. Additionally, I have integrated a newsletter subscription plugin for managing su ...

javascriptjqueryhtmlcsswordpress

Attempting to apply a minimum width to a th element using the min-width property

I'm trying to set a width for the second th element in this table, but it's not working as expected. <th style="min-width: 50px"> Date from </th> Can anyone provide assistance with this issu ...

htmlcss

color-transition effect (CSS-only)

I'm attempting to replicate the fading effect shown here in the lower right corner where the artist name and track title gradually fade out towards the right. Initially, I tried creating an overlay image, but it resulted in a jagged edge on the right ...

htmlcss

Tips for sending all form elements via ajax without explicitly mentioning their names

I'm developing an application with a dynamic form generation feature. When a button is clicked, I need to send all the form elements to another page using Ajax. The challenge is that since the form is generated dynamically, I am unable to specify elem ...

htmlajax

I'm looking for a method to retrieve the value of an option tag and then pass it to a helper within handlebars. Can someone

Currently, I am utilizing express and handlebars in my project. I have a specific view where I aim to display certain information based on the event when a client selects an option from a select tag. However, I have some queries regarding this: Is it fea ...

javascripthtmlnode.jsexpresshandlebars.js

Retrieve all information contained within the HTML tags <div align="center"></div> using Java programming

I am new to Java and feeling a bit overwhelmed since I have no experience with it. With Selenium, I was able to download the HTML of a page and store it in a string. Now, my goal is to extract all the data between <div> tags and populate an array wit ...

javahtmlseleniumwebdriver

The search functionality in an Html table is currently malfunctioning

Currently, I am working on developing a search mechanism in HTML. It seems to be functioning properly when searching for data for the first time. However, subsequent searches do not yield the expected results. Additionally, when trying to search with empty ...

javascriptjqueryhtml

execute action after a specific point in time in the video is reached

How can I hide a div after a video has been playing for a certain amount of time? The code provided below seems like it should work in theory, but is currently not doing so. Any suggestions on how to fix this issue would be greatly appreciated! <body ...

javascripthtmlif-statementcurrent-time

A step-by-step guide on using Jquery to fade out a single button

My array of options is laid out in a row of buttons: <div class="console_row1"> <button class="button">TOFU</button> <button class="button">BEANS</button> <button class="button">RIC ...

javascriptjqueryhtmlcssfadeout

Fill the second dropdown menu options based on the selection made in the first dropdown menu

I need assistance with dynamically populating my second drop-down menu based on the selection made in the first drop-down. Here are the steps I've taken so far: form.php - Utilizing javascript, I have set up a function to call getgeneral.php. The se ...

javascriptphphtmlajax