Struggling to adjust the width of a DIV based on browser size and content with CSS

I'm working with a div that contains several 210x210 pixel images, and I want to adjust its margin from the left side. The goal is for the right side of the div to be just a few pixels away from the images, which will have their own margin set. Strangely, the div I'm using is extending all the way to the end of the page.

The specific div in question has an id="thumbnails" and is nested within another div with an id="main". You can see the full code on this jsfiddle, but here's the relevant snippet:

HTML:

<div id="main">
<div id="thumbnails">
    <img class="thumb" id="1" src="images/portfolio/lorem/thumbs/1.jpg">
    <img class="thumb" id="2" src="images/portfolio/lorem/thumbs/2.jpg">
    <img class="thumb" id="3" src="images/portfolio/lorem/thumbs/3.jpg">
    <img class="thumb" id="4" src="images/portfolio/lorem/thumbs/4.jpg">
</div>

CSS:

#main {
background-color: rgba(50,50,50,0.6);
width: 100%;
height: 100%;
overflow: hidden;
}

#thumbnails {
margin-left: 300px;
margin-top: 50px;
background: rgba(50,50,50,0.6);
}

Additionally, I want the images to flow into a new row when the browser window is resized to be smaller.

htmlcss

Answer №1

It's possible that I may be misunderstanding your question (so my response may appear a bit obvious), but as a default, <div> functions as a block-level element, meaning it takes up 100% of the width.

As a result, you will either need to modify the display property of #thumbnails to adapt to varying widths (like using inline-block), or adjust it dynamically through a script. I recommend going with the first option.

Answer №2

Assign the div with the #thumbnails id a CSS style of float: left;

By doing this, the div will be positioned on the left side of the page, creating space on both sides. Remember to utilize the clear property if additional space is required for proper positioning.

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

A dynamic Angular search box designed for filtering columns in a table

I have a functioning table code that displays data related to domains: Now, I would like to enhance this table by adding a dynamic search box specifically for filtering the column named domain. As the user types in new characters in the search box, the ta ...

javascripthtmlangularjs

Using jQuery to dynamically render unordered lists from JSON data

Struggling to create a dynamic unordered list with multiple nested levels? Finding it difficult to render the necessary markup for future functionality? Take a look at the HTML structure I've created on this jsfiddle link: <ul class="nav nav-sideb ...

javascriptjqueryhtmlarraysjson

The process of running npx create-react-app with a specific name suddenly halts at a particular stage

Throughout my experience, I have never encountered this particular issue with the reliable old create-react-app However, on this occasion, I decided to use npx create-react-app to initiate a new react app. Below is a screenshot depicting the progress o ...

javascripthtmlcssreactjstypescript

Building an Array in PHP

When a user submits a form with multiple text inputs that share the same name attribute, how can I handle this in my PHP code? Example HTML: <input type="text" name="interest"/> ...

phphtml

Managing scroll position based on media queries in JavaScript

I'm currently working on implementing a fade-in/out effect on scroll for a web project. In my JavaScript code, I need to specify a certain value for the scroll position, such as an offset, to trigger the effect. The issue: The offset value may not ...

javascripthtmlcssresponsive-designmedia-queries

Implementing additional input with Jquery causes tooltips to malfunction

I am developing a form that allows users to add as many rows as needed. Each input is being treated as an array for easy data storage in the database, which is a new concept for me. $(document).ready(function() { var maxField = 10; //Limitati ...

javascriptjqueryhtmlcssmaterialize

Issue with radio button not updating when selected

I am encountering a strange issue with a form I am currently developing. The code snippet below showcases the problem: <?php $show = ' checked '; $hide = ' '; /* Some logic to swap the checked here */ ?> <label cl ...

phphtmlajaxlaravel

Page not found: unique error on alternate route

My website has different paths and pages in hbs format, such as root, help, and 404. The problem arises when I navigate to localhost:3000/wrong, the site displays correctly, but when I try localhost:3000/help/wrong, the CSS is not applied to the 404 page b ...

cssnode.jsexpresshandlebars.js

Is there a way to incorporate jQuery into SharePoint 2010?

I am encountering an issue with linking my HTML page to our organization's SharePoint 2010 portal. All necessary files (CSS, images, jQuery) are stored in the same document library. While the CSS is functioning properly, I am facing challenges with ge ...

javascriptjqueryhtmlcsssharepoint

Use jQuery to switch back and forth between two different sets of classes

I am attempting to switch between two different sets of classes using jQuery. My goal is to change from one custom icon to a font-awesome icon upon clicking an element. While I have been successful in changing a single class, I am facing challenges when tr ...

javascriptjqueryhtml

Overlap of sub menus

Seeking assistance from a CSS expert for a challenge I am facing. I am currently working on a toggle menu for mobile view, and encountering issues with the submenu. Any list item placed below another one with children is not visible. Removing the parent l ...

javascriptcss

What could be causing the uneven application of CSS padding when it is applied to a div that serves as the parent of an HTML form?

Padding has been added only to the top and bottom of a div. The padding attribute is displaying consistently for the form element, however, it is not behaving uniformly for the parent div of the form as illustrated in the image provided below. Output:- h ...

htmlcss

What is the technique for enabling a mouse click in the vicinity of an element?

During a presentation on React at a conference, I witnessed the speaker introduce a feature that allowed users to click and drag a divider on the screen by simply getting close to it instead of having to click directly on it. This concept adds to usabilit ...

htmlcssreactjsusability

Explore/Discover feature on a website

I'm currently working on a webpage where I am querying a database and retrieving file paths. I have successfully displayed the path from the database on my page. Now, as an enhancement, I would like to add an 'Open' button next to the displa ...

javahtml

Alter the div's HTML content once the Ajax operation is completed

I have a div element that looks like this: <div class="progress" id="progress-bar"></div> I am using the following JavaScript code along with an ajax call to retrieve some data. The data returned is 0, however, the content is not being added ...

javascriptjquerycssajaxtwitter-bootstrap

Utilizing personalized markers to encapsulate correct HTML elements

Recently, I came across a discussion on the implications of using custom tags in HTML. After reading about it, I have decided to avoid using custom tags in order to adhere to standards and ensure that search engine bots can properly read my code. However, ...

htmltags

The Bootstrap carousel comes with a brilliant feature! Conceal those 'previous' and 'next' buttons when you reach the first and last slide. However, it seems like the 'slide' event is not functioning as

I have implemented a standard Bootstrap carousel on my website: <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data- ...

jqueryhtmlcsstwitter-bootstrap

Transferring HTML table information to Django models for efficient data management

I am currently developing a student attendance management system using the Django framework. The objective is to fetch all the names of the students from the student database and display them in an HTML table. Additionally, I will be updating the informati ...

htmljquerydjangoajaxdjango-models

What is the best way to make ng-style append to a pre-existing style?

I am facing an issue with my custom popover directive and another custom directive that uses it. I am attempting to use ng-style to adjust the width of the popover. Below is a code snippet from the directive's html template: <div my-custom-popover ...

htmlcssangularjsangularjs-directive

Searching for a particular string, selector, or XPath on numerous web pages using the "inspect element" browser tool - what is the best approach?

Hey everyone, I hope you're all having a fantastic day. I'm wondering, is there a way to search for an element across multiple web pages simultaneously, rather than just one page at a time? The goal is to locate a specific string or code (like ...

htmlsearchbrowserprinting-web-pageinspect-element