W3CSS Rest, Percentage and Row Padding

In previous article we studied mixed layouts, we saw how to create mix layouts for mobile and desktop as well as mobile, tablet and desktop websites. In this article we are going to study the remaining layout concepts i.e., w3-rest, percentage widths and row padding.
The w3-rest is a class that is used to take up any remaining width in the row. Similarly, percentage properties are used to specify widths in percentage and finally w3-row-padding class is used to add some padding between columns inside a row.

Setting width using rest

You can use w3-rest class to occupy the remaining width of any container. Take a look at this example.

Download the code Try the code

In the above webpage, we have two divs inside the row div. The first div has a width of 200px. To second div we have added a class w3-rest. This will make the second div take remaining width of the row.

Setting width using percentage

You can also set the width of a container by setting width style property to a percentage value. The following exampled demonstrates this concept:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
<div class="w3-row">
    <div class="w3-col w3-red" style="width:20%"><p>20%</p></div>
    <div class="w3-col w3-green" style="width:30%"><p>30%</p></div>
    <div class="w3-col w3-yellow" style="width:50%"><p>50%</p></div>
</div>


</body>
    
</html>

Download the code Try the code

In the above web page, there are three divs inside he row div. The first div has width of 20%, the second div has width of 30% while the last div has width of 50%. This is another way of setting widths of div apart from using column classes. However, these div widths remain same for all the screen sizes.

The Row Padding Class

To specify a row in W3CSS, we use w3-row class. However, w3-row class do not add any padding between the classes. Alternatively we can use w3-row-padding class which adds 8 pixels left and right padding between the columns inside the row. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-row">
  <div class="w3-col s4 w3-red">
    <p>This div covers 4 columns on all screens</p>
  </div>
  <div class="w3-col s4 w3-blue">
    <p>This div covers 4 columns on all screens</p>
  </div>
    <div class="w3-col s4 w3-green">
    <p>This div covers 4 columns on all screens</p>
  </div>
</div>
    
    <br>
    
<div class="w3-row-padding">
  <div class="w3-col s4 w3-red">
    <p>This div covers 4 columns on all screens</p>
  </div>
  <div class="w3-col s4 w3-blue">
    <p>This div covers 4 columns on all screens</p>
  </div>
    <div class="w3-col s4 w3-green">
    <p>This div covers 4 columns on all screens</p>
  </div>
</div>


</body>
    
</html>

Download the code Try the code

<<< W3CSS Mixed Grid layoutsW3CSS Code >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .