All geek questions in one place

How do you feel about percentages and pixels in one CSS element?

In particular, I mean a situation where you need to have a total width of, say, 100% on a DIV, but an indent of 10 pixels and 1 pixel border. (And do not rely on the browser to automatically set it to this width - let's say that it, for example, floats on the left).

Is there an easy way to accomplish this without using JavaScript?

+3
source share
4 answers

No, there is no way to install this on a single element that works with current major browsers.

You can use 2 nested divs. Set the width 100%to outher divand set the registration and border to the inside div.

+2

box-sizing: border-box, width: 100%; border: 1px solid black; padding: 10px;, , , , .

EDIT: , . FF 3.5 Safari 4 , IE8 Chrome.

+2

This is only possible with CSS 3.

0
source

What about the next solution?

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Content with Menu</title>         
    <style type="text/css">
      .content .outer{
        width:100%;
        border:1px solid black;
        background-color:green;
      }
      .content .inner{
        margin-left:10px;
        margin-right:10px;
        background-color:red;
      }
    </style>          
    </head>
    <body>    
    <div class="content">
      <div class="outer">
        <div class="inner">  
          <p>Hi!</p>
        </div>
      </div>
    </div>
    </body>
</html>

Updating OK does not do what you are talking about with only one element.

0
source

Source: https://habr.com/ru/post/1710929/

More articles:


All Articles