CODEWITHSUNDEEP
htmlcss
Sami Al-Subhi
Sami Al-Subhi

Reputation: 4672

How to make a DIV centered and has almost a 100% width and a 100% height

  <div class="main"></div>
   <style>
        .main{ background-color:black;
               position:absolute;
               width:???;
               height:??;
   </style>

How to center the div main and make its height and width almost 100% with 20px gap from each side of the screen.

Upvotes: 0

Views: 105

Answers (7)

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Hey now define this css

<style>
   .main{ 
       background-color:black;
       position:absolute;
       margin:20px;
       left:0;
       right:0;
       top:0;
       bottom:0;
    }
</style>

Upvotes: 1

Josh
Josh

Reputation: 2895

Since you are using absolute positioning you could try this:

<div class="main"></div>

<style>
.main {
background-color: black;
position: absolute;
top: 0;
left: 20px;
right: 20px;
height: 100%;
}
</style>

Upvotes: 0

Kyle
Kyle

Reputation: 67194

You can use the new calc() attribute in CSS3:

.main
{ 
    margin: 0 auto;
    background-color:black;
    color: #fff;
    position:absolute;
    width: -webkit-calc(100% - 20px);
    height: -webkit-calc(100% - 20px);  /*repeat with other browsers codes*/
}

This tells the div to be 100% wide/high but remove 20px while keeping it in the center.

IT can be used in IE9 (not below)m Firefox 4.0, Chrome 19 and Safari 6. So it might not be the best solution..

http://jsfiddle.net/Kyle_Sevenoaks/wVUat/

Upvotes: 0

balkon_smoke
balkon_smoke

Reputation: 1196

How about solution below:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta charset="utf-8">
    <style>
        #mask {
            background-color: rgba(0, 0, 0, .5);
            opacity: 0.5;
            position: absolute;
            top: 20px;
            left: 20px;
            right: 20px;
            bottom: 20px;
        }
    </style>
</head>
<body>
    <div id="mask" />
</body>
</html>

Please find it at http://jsfiddle.net/balkon_smoke/yPF8Y/2/

Upvotes: -1

Scott
Scott

Reputation: 21882

The width of a block element is already 100% by default.

All you need do is add padding or margin to create your "gap".

<style>
    .main{ background-color:black;
           position:absolute;
           margin: 0 20px;
           height:100%;
      }
</style>

edit

I missed your absolute positioning.
With absolute positioning, I'd use this:

#main {
background: #a00;
position: absolute;
top: 0; 
left: 50px; 
right: 50px;
height: 100%;
}

DEMO FIDDLE

Upvotes: 2

Harmeet Singh
Harmeet Singh

Reputation: 2616

You can do : 

<style>
   .main{ background-color:black;
          position:absolute;
          width:100%;
          height:100%;
          margin:20px;
 </style>

Upvotes: 0

mtk
mtk

Reputation: 13709

This would center align the div with 50px space on left and right side.

.main {
    margin: 0 50px;  /* [top,bottom] [left,rigth] shorthand syntax */
    width : 100%;
}

Upvotes: 0

Related Questions