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.