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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.