Blueprint CSS is causing a padding problem

This piece of code is perfectly styled with blueprintcss: 

<div class="container">
  <div class="span-12" style="background-color : cyan">
Hello
  </div>
  <div class="span-12 last" style="background-color : green">
Bye
  </div>
</div>

It creates two columns that each take up half the space, which is quite nice: 

Hello              Bye

However, the text "Hello" is too close to the edge of its container div, so adding a bit of padding seems like the right move, doesn't it? 

<div class="container">
  <div class="span-12" style="background-color : cyan; padding-left : 5px">
Hello
  </div>
  <div class="span-12 last" style="background-color : green">
Bye
  </div>
</div>

Unfortunately, this approach doesn't seem to work as expected, and the "Bye" column ends up positioned below the "Hello" column:

 Hello              
Bye

Decreasing the size of the second column isn't a viable solution since it should remain "12 grid columns wide".

Is there a better solution besides adding another markup level? 

<div class="container">
  <div class="span-12" style="background-color : cyan">
    <div style="padding-left : 5px">Hello</div>
  </div>
  <div class="span-12 last" style="background-color : green">
Bye
  </div>
</div>

What am I missing here?

cssblueprint-css

Answer №1

It seems like you may not be utilizing the box-sizing: border-box property. If you incorporate this, your proposed solution should function correctly. Otherwise, you may need to add another layer of markup.

Keep in mind, the default behavior for widths is to include only the content, not the border. So, when Blueprint specifies a width and padding is added, the padding is actually included in the width, which can lead to issues. The use of the box-sizing: border-box property resolves this problem.

Answer №2

To achieve the desired outcome, consider including border-left: 5px in the styling of the specific .container element. If the color is solid or has rgba() transparency, it should not impact the layout.

.container
{
  /* cyan is the test color */
  background-color: cyan;
  border-left: 5px;
  border-color: cyan;
  border-style: solid;
}

Blueprint has advanced features and undergoes thorough testing, so it may be a more reliable option than my suggestion. If necessary, consider using an inner element for optimal compatibility with older versions of Internet Explorer.

Answer №3

To avoid any potential issues, it's a good idea to insert an additional div within the existing one.

My personal practice involves adding inner divs with the class name "padding".

.padding { padding:1.5em; }

Therefore, in your code, it should be structured like this:

 <div class="container">
    <div class="span-12" style="background-color: cyan">
      <div class="padding">
           Hello
      </div>
    </div>
    <div class="span-12 last" style="background-color: green">
       Bye
    </div>
</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

stop automatic resizing of windows

My CSS is written using percentages. I need to maintain the percentages intact. Is there a way to stop the layout from changing when the browser window is resized? I want the percentages to remain unaffected, even when the browser window is being resized ...

javascriptjqueryhtmlcss

Creating various styles for cards using ngFor within Angular

I have been working on applying different styles to cards created using ngFor in Angular. Here's how it currently looks: https://i.sstatic.net/UhbSp.png My aim is to set unique styles for each card. Due to the ngFor loop used in creating them, I ini ...

htmlcssangular

Tips for altering the appearance of a dropped item using JQueryUI sortable

I have a straightforward website where I need to implement the ability to drag and drop styled DIV elements between two containers. Utilizing JQueryUI's sortable function, this behavior was successfully achieved with the following code: $("#active-co ...

javascriptjqueryhtmlcssjquery-ui

Optimized layout for screen resolutions exceeding 1000 pixels wide

As I work on making my website responsive using Dreamweaver CC, I'm encountering a problem with screen sizes larger than 1000px. In Dreamweaver, there are three options for responsive web design at the bottom: desktop 1000px and less, tablet 768px an ...

htmlcssresponsive-design

Is it possible to eliminate the border of an HTML element when clicked, while still keeping the border intact when the element is in

I am currently developing a project with an emphasis on Web accessibility. Snippet of Code: function removeBorder(){ li=document.getElementById("link"); li.classList.add(".remove") } body{ background:#dddddd; } p:focus{ border:1px solid red; } li{ ...

javascripthtmlcss

Synchronize two div elements with JavaScript

The demonstration features two parent divs, each containing a child div! The first parent div's child div is draggable and resizable using JQueryUI. There are events for both dragEnd and resizeEnd associated with this div. The goal is to synchronize ...

javascriptjqueryhtmlcssjquery-ui

Importing CSS with Node Sass using npm

Instead of inlining css within sass, I attempted to utilize the npm package Node Sass CSS importer. Unfortunately, I am struggling to get it to function properly. I typically use npm as my build tool: "build:css": "node-sass some_path/style.scss some_pa ...

cssnode.jsnpmsass

Attempting to ensure that my website is fully optimized for all devices and

I am currently facing an issue with my CSS code on iPad. I want to change the background-image displayed based on whether the user is using an iPad or not. Specifically, I want to use headerold.jpg as the background-image for iPads while keeping headernew. ...

css

Exploring JavaFX and FXML TreeTableView customization for column and header styles

I've been working on a JavaFX project and I'm having trouble customizing the style of the TreeTableView header or columns, like changing the color, width, font size, etc. I've tried using various codes like these but none seem to work. ...

cssjavafx-8fxml

What is causing items to stack using responsive CSS?

My portfolio page is structured in a grid layout that is responsive on most devices, but encounters issues on certain mobile devices like the Nexus 6P. The content ends up stacking in a strange way, similar to Russian Dolls. UPDATE: Through troubleshootin ...

cssresponsiveness

Vue.js displaying incorrectly on Windows Server 2019 IIS post deployment

Once I run npm serve, everything runs smoothly. However, when I deploy my app with an API in an ASP.NET application, it doesn't scale properly. I am using Router and History for navigation. Anonymous user authentication is enabled and static content h ...

cssvue.jsiiswindows-server-2019

Can MUI 5 replicate the Emotions 'css' function through analog?

From what I've learned, MUI 5 utilizes Emotion for its styling framework. Emotion offers a convenient helper function called css, which generates a string - a class name that can be used as a value for the className property or any other relevant prop ...

cssmaterial-uiemotioncss-in-js

What is the best way to connect a line from the edge of the circle's outermost arc?

I am attempting to create a label line that extends from the outermost point of the circle, similar to what is shown in this image. https://i.sstatic.net/OqC0p.png var svg = d3.select("body") .append("svg") .append("g") svg.append("g") .attr("cl ...

javascripthtmlcssd3.jssvg

Creating an artistic blend by layering p5.js drawings over images in an HTML canvas

I'm having a tough time solving this issue. My goal is to overlay circles on top of an image, ideally using HTML for the image. However, I just can't seem to make it work. let img; function setup() { createCanvas(800,800); img = loadImage(&qu ...

htmlcssp5.js

Hiding my valuable content with a sneaky CSS nav bar

My current issue involves the nav bar overlaying my content Here is a link to the problem for reference I am seeking advice on how to resolve this issue, as I'm unsure of what steps to take The nav bar functions properly in responsive/mobile mode, ...

htmlcsscss-float

Having trouble with Vuejs Ternary Operator or Conditional in v-bind-style?

Having some unexpected issues while trying to implement a style conditional for items in Vuejs. I have come across Stack Overflow posts on how to use a ternary, either through an interpolated string or a computed style object. I've attempted both met ...

javascriptcssvue.jsconditional-statementsternary-operator

Height Miscalculation: Chrome and FF encounter window dimension

There is a large application with numerous pages. When I use the console to execute console.log($(window).height()) on any page within the application, it returns the expected result: the height of the window, not the document. For instance: $(window).he ...

javascripthtmlcssgoogle-chromeprimefaces

How can I align multiple lines of text vertically?

Currently employing: #leftfoot {padding-left: 20px; vertical-align: middle;} Unfortunately, this code is not yielding the desired results. Despite searching through numerous explanations, I haven't been able to find a solution that works for me. Can ...

cssvertical-alignment

Using jQuery to toggle the menu

I've been brainstorming ways to add a toggle menu on my website and finally stumbled upon a solution that works great! http://jsfiddle.net/hhcsz5cr/ <div> <h1><button class="button" data-circle="travel"> <i cl ...

htmljquerycsstoggle

Dynamic drop-down navigation with rearranging menu

I am attempting to design a drop-down navigation bar with 2 rows. Initially, only 1 row is visible. Upon clicking the visible row, both rows should appear. Subsequently, when one of the 2 rows is clicked, only that specific row should be displayed. Below a ...

javascripthtmlcssdrop-down-menunavigation