Resizable divs with flexible padding

I've been struggling to find an efficient method for creating modular containers in my stylesheet without defining a set width. My goal is to have classes like width25, width33, width50, and width100 to adjust the container's width according to different needs.

However, I also want to incorporate spacers between these containers to ensure proper spacing. The current workaround of adjusting widths and adding bumpers makes it difficult to achieve the desired layout within the parent container.

Is there a more streamlined approach to achieving this? Adding padding to the boxes further complicates the issue as it impacts the total width of the divs. I envision a clean solution where each module has the same base class with varying width classes like width25 = 25%...

Any suggestions on how to simplify this process? It's becoming quite frustrating trying to find a workable solution.

Answer №1

Alright, there are approximately 4 possible solutions you can consider.

Using box-sizing: border-box
-By applying this property, the width calculation changes. For example, if you set width: 30% and include a 2px border, the box will still be 30% wide, with the border contained within the specified width;
Utilizing calc()
-This function enables you to perform operations like width: calc(20% - 2px);
Applying outline
-The outline surrounds the element without impacting its dimensions. However, this may not be the best fit for your scenario.
Implementing divs within divs
-Set the width of the outer div according to the spacing requirements, then style the inner div as needed.

Answer №2

If you're looking to maintain a clean layout, consider utilizing padding. This will help keep the module boxes organized and create a visually appealing space effect.

One drawback of this approach is that you may sacrifice some width and height in the content areas, but overall, your box model calculations should remain intact.

Answer №3

Explore these awesome grid frameworks.

There are many more out there waiting for you to discover.

Need an example? http://jsfiddle.net/E9zfY/

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

Using Jquery, update the class toggle to apply to multiple span elements instead

I am facing an issue where I need to change the class of a span child using a toggle feature when clicking on a browser row. The problem arises when there are multiple rows, as the span cannot be found and the functionality does not work properly. I have ...

php html jquery bootstrap-4

What are some ways I can troubleshoot my contact form?

As someone new to web design, I recently completed my very first site using a combination of HTML, CSS, and a touch of JavaScript. I managed to create a small contact form within the site, but now I'm wondering if there's a way to make it functio ...

javascript html css contact-form

How can I display a specific element from a child Component when the main Component is clicked on in React?

I am currently working on my first React project and facing a challenge. I have a dropdown list on my main homepage that displays specific details when clicked. However, I am struggling to show the right corresponding detail (for example, black&white paren ...

javascript html reactjs

What is the best method for choosing all elements located between two specific elements?

If I have the following HTML code, what CSS selector can I use to target all elements between #one and #two without using jQuery? <p id="one"></p> <p></p> <p></p> <p></p> <p></p> <p></ ...

css css-selectors

Troubleshooting CSS transition issues on ASP.NET Web Forms

Is there a way to make CSS3 transitions work in a .aspx page? I prefer Web Forms for designing forms and any suggestions would be helpful. The following is the code snippet from the .aspx page: <%@ Page Title="" Language="C#" MasterPageFile="~/Sit ...

javascript html css asp.net css-transitions

Eliminate error class in jQuery Validate once validation is successful

I'm having an issue with the jQuery Validate plugin. Even after a field is successfully validated, the "error-message box" continues to be displayed. How can I remove this box? Here's my code: CSS: .register-box .field .has-error{ border ...

javascript jquery html css jquery-validate

Arrange the bootstrap columns in a grid layout both vertically and horizontally adjacent to one another

I need help with displaying my columns in this specific layout https://i.stack.imgur.com/2hzju.jpg Code <div class="row"> <div id="id-orders-stats" class="col-md-6 col-sm-6"> </div> <div class="col-md-6 col-sm-6 stats-box"&g ...

css twitter-bootstrap

Employing Visual Composer within WordPress has resulted in the raw JavaScript not being properly applied to my raw HTML code

Sharing some code that functions properly in my browser and I want to implement on my WordPress page: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8>  <script src="http://ajax.goog ...

javascript jquery html wordpress

Trouble with the Javascript function for Clearing Fields?

I wrote a function to clear text fields, but it doesn't work when custom values are entered. function clear(){ document.getElementById('bmw1').value=""; document.getElementById('bmw2').value=""; document.getElementByI ...

javascript html

Designing CSS outlines to create shapes

I want to design a unique navigation for my website without using images, so I thought using shapes would be a cool idea. Specifically, I am trying to create a crescent moon shape with a border. My goal is to have a border around the red part of the cres ...

html css css-shapes

Triangle below header that seamlessly blends with header background gradient

I need to create a unique header design which includes a gradient and a triangle for decoration. While I have no trouble implementing the gradient and positioning the triangle using ::after, I am facing an issue with matching the color of the triangle to ...

css linear-gradients

Angular: What is the best way to retrieve the class name in the app-root from a local component?

My website consists of three main pages and multiple child pages. Each child page inherits its style from the parent CSS. country.routes.ts ... path: '', children: [ { path: '/country', component: CountryComponent ...

html css angular typescript

What are the steps to incorporate an iframe containing uniquely designed XML content?

I'm currently working on a website project for a client who specifically wants to include news from the BBC. Despite spending 3 hours searching online, I haven't been able to successfully insert an XML file into an iframe and style it to the clie ...

javascript jquery css xml iframe

Having trouble with my Bootstrap 4 navbar button - what am I doing wrong?

After conducting research online, I found myself unable to resolve my issue due to my lack of proficiency in English. I apologize for any confusion caused and would like to revisit the topic. The problem lies with my navbar toggle that is not functioning ...

javascript html css bootstrap-4

Allow only specific inner divs to dictate the width of the outer div

I'm working with the following HTML structure: <div id="container"> <div id="block1"> <img src="someimage/path" /> </div> <div id="block2"> Some Text </div> <div id="block3"&g ...

html css

Sass: Setting a maximum width relative to the parent element's width

I have a resizable container with two buttons inside, one of which has dynamic text. Within my scss file, I am aiming to implement a condition where if the width of the container is less than 200, then the max width of the dynamic button should be 135px, ...

javascript css sass

Creating clean and organized spacing between boxes using Bootstrap

Having recently started working with Bootstrap to enhance my skills, I've encountered a hurdle. I have 6 boxes arranged into three on the left side and three on the right side. However, I've noticed that there is a space between box number ' ...

css html twitter-bootstrap bootstrap-4

Generating random images using Javascript

I am facing some challenges while creating my first custom JavaScript function. My goal is to display three random thumbnails on my webpage by selecting images from a pool of options. However, I am encountering issues with duplicated images and handling s ...

javascript html loops conditional-statements

Adjust the size of the mouse cursor in real time

I'm currently in the process of developing a project where I want to create a web application with a mouse cursor that appears as a circle with a customizable radius, which can be altered by the user. The main requirement is for this custom cursor to ...

javascript css html

Tips for creating a clickable title that directs to a URL

I am currently using the "Import All" WordPress plugin to bring in an Excel file containing numerous hyperlinks that point to specific Custom Post Types and a designated field. These hyperlinks are separated by commas from the corresponding title. For exam ...

php html jquery css wordpress

CSSer Q&A