CODEWITHSUNDEEP
cssgridviewgridblueprint-css
Rodrigo Souza
Rodrigo Souza

Reputation: 7332

Blueprint CSS framework or any Grid system: fix for bordered divs

I've got some problems while trying to lay out my site. I'm using Blueprint Framework and it happens when I apply borders to my div. Since their width are controlled by span-XX (or grid-xx as I noticed in 960gs), the moment I apply borders to any div element I have it goes out of the grid as seen in these images out Click to zoom alt text Click to zoom

The only way I know to fix it is to change element's width, but then the framework's grid purpose finishes 'cause I won't have the span-XX classes anymore. Is there any other way to fix it?

Upvotes: 0

Views: 815

Answers (2)

Matt
Matt

Reputation: 5398

If you don't want to nest divs, you can create a few additional classes for bordered columns. I'm using 1px borders, so I created classes like:

.with-border-first {
  border: 1px solid red;
  margin-right: 8px;
}

.with-border {
  border: 1px solid red;
  margin-left: -1px; 
  margin-right: 9px;
}

.with-border-last {
  border: 1px solid red;
  margin-left: -2px;
}

There should be one more if you want borders around divs spanning all columns (eg. 24 in blueprint).

I then use those classes together with the spans, for example:

<div class="span-8 with-border-first">
...
</div>

<div class="span-8 with-border">
...
</div>

<div class="span-8 last with-border-last">
...
</div>

Upvotes: 0

Teja Kantamneni
Teja Kantamneni

Reputation: 17472

If I understand it right, you have a span-24 or something similar and want to add a border to it, right? My preferred way of doing it is 

<div class="span-24">
    <div class="box">here</div>
</div>

and add the border to the box class for above snippet.

Upvotes: 3

Related Questions