You are currently viewing How to Use CSS width and height Properties
  • Post category:CSS

How to Use CSS width and height Properties

CSS width & height Properties

  • Introduction:
  • Create a Div Element & Adding Style
  • Reason Why Div is not Visible
  • Width & Height Properties
  • The Overflow Property
  • Min-width & Max-width
  • Max-height & Max-height
  • Conclusion

Introduction

In this articles we are learn about the CSS width and Height properties. And how to using a minimum and maximum value to the CSS width and height properties. Because it is very important for responsive design.

Create Div Element & Adding Style

  First create a HTML file and create a Div section assign in a class of a box learning CSS width and height properties. And create CSS file and linking to these HTML file. Now you want to do is to give this class a background color and assign red color value. For that you need to write style to .box in CSS file.

.box{
background-color: red;
}

Reason Why Div is not Visible

  Save it and see your webpage nothing happen because the content of this div element is empty. Every HTML element’s size such as CSS width and height are assign automatically they take an automatic value. If there no content inside this box then these new elements CSS width height properties will be automatically zero. So we don’t see anything here yet.

CSS Width & Height Properties

  Width of 50 pixels, We still don’t see anything because the  height is still zero so, let’s also assign a height property and now you save it. Now our box is visible, so now let me clear these two again and this time you would like to put inside some content. Let’s save it this time we are able to see our red box. This time to assign a fixed width property lets say 100 pixels. Save and see that the height increases because since we assigned 100 px to this div. Now it’s not possible to take more that that so, that’s why it’s height increased. Additionally if you also give a height property of 100 pixels and save it see now our box has taken a 100 pixels of CSS width and height. But the content is much larger than that so that’s why it has overflowed.

READ ALSO  Easy Way to Create 2 Equal Columns in CSS Grid Layout

Syntax:

 <html>
<head>
<style>
.box{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box">content here </div>
</body>
</html>

The Overflow Property

  But there is a way to fix this sometimes such things an happen so there is also an overflow property which allows us to hide the overflowed part. CSS width and height Communication with each other. If we assign a hidden value to our overflow property and save it we won’t be able to see the overflowed part anymore. An alternative we can assign a scroll property. This time we will able to scroll the element and see the complete content.

.box{
overflow: scroll;
}

CSS Min-width & Max-width

   I assign width property of 100 percent and assign minimum width of 200 pixels. Now this is something is necessary for responsive design once the page or the screen size gets smaller than 200 pixels a scroll bar appears. Because our elements this cannot be smaller than 200 pixels so that’s why a scroll bar appears and it cannot get smaller than that. S0, this means that normally this element will always take the whole 100 percent of space of the webpage until our page is smaller than 200 pixels.

  Once our page reaches this limit then it won’t get smaller than that and a scroll bar will appear this time for the web page. Now in addition we can also give we can also change this as a maximum bit let’s make it a little bit larger. Now our element will take 100 percent of width until it reaches this 300 pixels limit. So make it larger as we can see it keeps growing and growing until it reaches 300 pixels.

READ ALSO  How to Make Transition ease in out CSS

  So once our div element reaches 300 pixels of width as we can see it just stay like that and it’s not grow larger than that. This is some kind of useful for larger screens. If you are going to design a website and you don’t want the content always to take 100 percent sometimes. It doesn’t look good for larger screens then you can assign a maximum and it will keep the whole website or the elements that you wish in a given size.

  If you prefer you can also centralize this element by assigning a margin auto property. What this property does it will centralize our content so regardless of how large the website is your main content will always stay in the center unless it is smaller than 300 pixels. Once the web page or the device is smaller than 300 pixels then the 100 percent of width size will apply again.

.box{
min-width: 200px ;
max-width: 300px;
margin: 0 auto;
}

CSS Max-height & Max-height

  Now if you can prefer you can also use a minimum or a maximum value for the height property. I will assign a 100 pixels of maximum height now save it. See the same thing happens again since there is not enough space of the content it will overflow. You can say I would like to have a minimum height of let’s say 400 pixels. This time as we can see the height of our box will be larger than the content itself.

.box{
min-height: 300px
max-width: 300px;
margin: 0 auto;
}

Conclusion

  So guys this is how we can use the minimum and maximum values for CSS width and height properties. I hope you enjoyed this article.

Leave a Reply