In this tutorial we will learn about max-width.Basically when
developers were work on CSS2, At that time they introduced some
new properties in CCS2 which proved really very helpful in styling
of pages.These properties are especially useful for sizing of box.
Following properties are given below.
1) max-height
2) max-width
3) min-height
4) min-width
In this tutorial we will learn about max-witdth with examples and
also with easy and understandable source code.
The max-width with value in percentage
<style type="text/css">
p{
border: 1px solid solid;
max-width: 70%;
}
</style>
<p>
This is a paragraph with max-width 70%.Test the different display effect
of max-width by making screen smaller and large.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
Output of above code
This is a paragraph with max-width 70%.Test the different display effect
of max-width by making screen smaller and large.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
The max-width with value in px
<style type="text/css">
p{
border: 1px solid solid;
max-width: 400px;
}
</style>
<p>
This is a paragraph with max-width 400px.Test the different display effect
of max-width by making screen smaller and large.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
Output of above code
This is a paragraph with max-width 400px.Test the different display effect
of max-width by making screen smaller and large.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
The max-width value none
Actually none is default property of max-width which is used for no limits to box width.
Note
These properties are not supported by Internet Explorer 6 and earlier.
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
