CODEWITHSUNDEEP
htmlcsslayout
user1355300
user1355300

Reputation: 4987

CSS: Width in percentage and Borders

I've defined widths of the containers in percentage. I'd like to add a border (3px on right side of a width), since container width is in % while the border width is in px, how can I adjust the width of the container?

<div class="wrap">
  <div class="left">...</div>
  <div class="right">...</div>
</div>

.wrap{
    width:100%;
}

.left{
    width:30%;
}

.right{
    width:70%;
}

I'd like to add 3px border on the right side of .left. For example:

.left{
    width:30%;
    border:3px solid #000;
}

Since I have defined width in the %, what is the best way to re-adjust the width of the .left. I can roughly decrease the width to 29%, but I want to do precisely.

Upvotes: 50

Views: 55790

Answers (6)

Raven
Raven

Reputation: 256

One simple workaround is to base all your widths on the viewport width

That may or may not be suitable, depending on the situation. In general, tiny screens such as a smartphone will look just fine with thinner margins, padding, and borders (this reduces wasted screen space), while really wide screens can handle thicker spacing and borders without looking weird.

This scales your web page much like a PDF, wherein the line thickness changes based on the viewport width. If you want to be fully scalable, you should also scale fonts larger for larger screens, so the border doesn't start looking thicker in comparison to the text.

For a two-column layout, use the following formula:

100vw - (margin_left x 3) - (padding x 4) - (border x 4) = (column_width x 2)

For a three-column layout, use the following formula:

100vw - (margin_left x 4) - (padding x 6) - (border x 6) = (column_width x 3)

Example HTML and CSS code for a two-column layout:

<style>
  div.column {
     float            : left;
     width            : 41.5vw;
     margin-left      : 4vw;
     margin-top       : 3vw;
     padding          : 1vw;
     background-color : #777;
     border           : 0.25vw solid #000;
  }
</style>

<div class="column">
   Aut dolor facere qui impedit quod rem mollitia dolorem ab iste culpa
   qui quia eaque. Et dolor voluptatum ab voluptatibus beatae eum illo
   tenetur in galisum excepturi.
</div>

<div class="column">
   Qui totam saepe ut dolor sunt aut nihil consequatur cum quis minus
   architecto. Aut aliquam dolore eum ipsum atque et fugiat quo maiores
   similique. Ut sequi excepturi id laboriosam dolor hic illum iste.
</div>

I used the following math:

(column_width / 2) = 100vw - (margin_left x 3) - (padding x 4) - (border x 4)
(column_width / 2) = 100vw - (4vw x 3) - (1vw x 4) - (0.25vw x 4)
(column_width / 2) = 83vw
(column_width)     = 41.5vw

That produces this output on a 4K wide screen:

And this output on an extremely narrow screen:

The margins, padding, border, and column size appear to remain exactly the same at different screen widths. Because I did not also scale the fonts, they appear relatively much larger at the narrow screen size.

Upvotes: 0

AlejandroVD
AlejandroVD

Reputation: 1832

In my case I ended up adding an outer div with a padding of the size that I wanted the original margin to be, and width 100%. That allowed me to set the inner div width to 100%, fitting entirely inside the padding (that would work as the previous margin I had set)

Upvotes: 0

user2906688
user2906688

Reputation:

Just change px to vw like

border-width: 10px;

to

border-width: 10vw;

Its do whats percentage do....

Upvotes: -2

Emil Stenstr&#246;m
Emil Stenstr&#246;m

Reputation: 14126

The easiest cross-browser way is to NOT set the border on the outer divs, and instead set it on a NEW div inside .left. Simple, and works well.

Upvotes: 6

Bojangles
Bojangles

Reputation: 101543

Use the box-sizing: border-box property. It modifies the behaviour of the box model to treat padding and border as part of the total width of the element (not margins, however). This means that the set width or height of the element includes dimensions set for the padding and border. In your case, that would mean the element's width and it's border's width would consume 30% of the available space.

CSS box model

Support for it isn't perfect, however vendor prefixes will catch most if not all modern browsers:

.left {
    width: 30%;
    border: 3px solid #000;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

More information can be found on the MDN and Quirksmode.

According to Quirksmode, using the 3 vendor prefixes above (-moz-, -webkit- and -ms-), you get support for all browsers, even IE8.

Upvotes: 103

Sarfraz
Sarfraz

Reputation: 382881

That's a bit tricky but check out this post on a way to get around it:

The box-sizing property may also be of interest to you, check this out:

Upvotes: 2

Related Questions