Width in css
In this aticle we are going to learn about width, how we can set the size of html element with a width property in css.
We learnt about css in general learning what css can do in web pages, borders in css, padding in css, float in css and margins in css so, we are going to learn about width, how we can use width property to set size of html element.
Width
Width is used in css to change or set the width of any element in web page and allow us to set any size we need.
We are going to give the div element width of 200px, copy and paste below code.
<div style="background: yellow; width: 200px;">This is 200px width of div element.</div>
So, we should have the following results.
So, the width of div element is 200px and the text is broken into two lines because the element width is smaller than the text width.
We are going to increase the width and we will observe the results, copy and paste below code.
<div style="background: yellow; width: 80%;">This is 80% width of div element.</div>
So, we should have the following results.
So, we increased an element width and now is 80% and we can see that the text is not broken into two lines because the width of an element is larger than the width of the text.
Let us create an element with a width of 10%, copy and paste below code.
<div style="background: yellow; width: 10%;">This is 10% width of div element.</div>
So, we should have the following results.
We can see that the text overlaps an element, this is because the element is too small to contain this text so, the text is too long and is overlapping.
Let us create two elements with different widths of 65% and 90%, copy and paste below code.
<div style="background: yellow; width: 65%;">This is 65%; width of div element.</div>
<div style="background: red; width: 90%;">This is 90%; width of div element.</div>
So, we should have the following results.