Snippets
width

How-to articles, tricks, and solutions about WIDTH

How to Add a Background-Color for the Text Width Instead of the Entire Element Width

On this page, you will find how to set a background-color for the text width instead of the width of the entire element. Choose the appropriate method and try examples.

html css color background width

How to Add a Fixed Width Column with CSS Flexbox

On this page, you will find out how to add a fixed-width column with the help of CSS Flexbox. To achieve this, you need to use the flex or flex-basis property.

html css width column

How to Calculate the Width of an Element with the CSS calc() Function

In this snippet, you’ll learn how to calculate the width of an element with the CSS calc() function. See examples, where we mix percentages and pixels.

html css div width

How to Control the Width of the <label> Tag

Since the <label> tag is an inline element, using the width property won’t have any effect. Here you can find some methods of adding width to the <label> tag.

html css label width

How to Create Two Fixed Width Columns with a Flexible Column in the Center

In this tutorial, you can find out how to create a Flexbox layout having three columns, two of them with a fixed width and one in the center with a flexible one.

html css flexbox width column

How to Create Two Inline-Block Columns With 50% Width

In this snippet, find out how to create two inline-block columns, both having 50% width and avoid wrapping. You need to use two CSS properties: display and width.

css CSS3 width column

How to Make a Child Div Element Wider than the Parent Div

On this page, we’ll demonstrate how you can make a child <div> element wider than the parent <div> element. See what CSS properties you need and try examples.

html css div width

How to Make a Div Fill the Remaining Width

In this snippet, we’re going to demonstrate some ways of making a <div> expand to fill the remaining width. You can use the float and overflow properties.

html css div width

How to Make Flex Items Take the Content Width

In this snippet, learn how to make flex items take the content width instead of the width of the parent container. Use either the align-items or align-self property.

html css flexbox CSS3 width

How to Set the Size of the <textarea> Element

In this tutorial, you will find two ways of setting the size of the HTML <textarea> element. For that purpose, you can use HTML attributes or CSS properties.

html css textarea height width

How to Set the Table Column Width Regardless of the Text Amount in its Cells

Sometimes, when the text in one of the cells of the column is too long, the column’s width change. Read this snippet to find out how to overcome this problem.

html table width column

How to Set the Width of the Table Column

In this tutorial, we’ll show how you can set the width of the HTML table column. For that purpose, you need to use some CSS, particularly the width property.

html css table width column