CSS extra markup

We have covered almost all the important topics in the previous chapters. In this chapter, we will cover some remaining topics of CSS. 

Min-width and max-width:

Max-width property is used to set the maximum width of an element and min-width property is used to set the min-width of an element. These properties are used when the page is created such that the boxes can expand and shrink to fit the size of the screen.

For example,

div{
max-width: 600px;
min-width:400px;
}

Similar to min-width and max-width, CSS also has min-height and max-height properties to limit the height of a box on the page.

Overflow:

This property is used when the content present inside the box is larger than the box itself. The overflow property can have the following four values:

1. Hidden: the extra content that flows out of the box becomes invisible.
2. Visible: it is the default case i.e. the content renders outside the box and is visible.
3. Scroll: a scrollbar is added to see the rest of the extra content.
4. Auto: it adds scrollbars only when necessary

 

Example,

div{
overflow: hidden;}

Sometimes we can see overflow-x and overflow-y used. These are used to change the overflow of content horizontally or vertically.

 

CSS float:

This property is used to position the content or the images either to left or right. For example,

img{
float: right;}