Changing the div width on an HTML page can be a source of frustration for those new to web design. In this short tutorial, the basics of the CSS process will be explained in detail to ensure even the greenest of designers can use it for themselves.
Sample code and output images are provided to help guide you through the work as well. If you are not familiar with the basics of HTML or how to use a style sheet, please have a look at HTML for Dummies and How to Use a CSS Stylesheet to get a solid grasp on both topics before moving on to manipulating the width of a div.
Understanding the Width Property
It helps to know exactly what you are working with when you alter a CSS property. The width property will change the width of an element as the name implies. However, it’s also important to note that it is the content section of the element that changes with this manipulation.
All HTML elements have their content placed within a set of margins, borders, and padding that surround them. This is the base of the CSS box model that you will modify for proper positioning on the page. For a quick introduction on the topic, check out The CSS Box Model: Explained for Beginners to become familiar with the box model concepts.
Setting the Div Width Property
In the HTML code example below, two divs are set up for display.
In the next image, you can see a small amount of CSS applied to the first div. The rendered output is displayed next to it as well.
With both elements in place, the div width property will be added to demonstrate how it affects the element’s content space.
In the example, the div’s padding, margins, and borders remained unchanged. Only the width of the content area has been altered.
Note that the values for width have been set using pixels. These values can be applied with percentages as well. For more details on using percentages, take a look at CSS Size: Width and Height Explained.
The div width value can be set to the value of “auto” as well. In this method, the browser will automatically apply the calculated width for the element. With the following example, the div width has been set to auto to show how it would render on the HTML page.
Div Width and Inline Display
In the previous example, you could see a change in the div width instantly. The div was set at the default display value as a block-level element. However, if the display was set to inline instead, you will notice that the width property seemingly does not have any effect.
From the example above, you can see the div width has been set to 500 pixels, which should extend its appearance on the HTML page, although here it has not budged. The reason for this is that an inline element has its width determined by the content itself.
In the next example, the div has extra text added to increase the level of content. You can see that the width of the div does not extend out to 500 pixels but only extends to the length of the content itself.
It’s important to keep this in mind when trying to position multiple elements on a single line. You could end up with CSS properties that have no purpose as they are simply ignored. Adding to that, you can also see that the first div overlaps with the second one after the display property changes. Practice with the CSS box model can help you get a finer understanding of how these display properties can affect your own design work.
The Max Width Property
Another way to set the div width is by advising the browser to use the maximum width available. The max-width property will dictate the maximum allowed width of the element’s content area.
In the CSS example provided below, note that the max-width property is set to 400px.
Now take a look at how the output changes when the max-width property is set down to 80 pixels instead of 400.
The internal content area of the div has been reduced to conform with the allowed maximum width value. This forced area or restriction can be useful when you want to ensure a div’s content does not expand beyond a space of your choosing.
Using max-width over width should be a matter of stability. If you set the width of the div to be 800 pixels, it will adhere to that value regardless of a change to the window size. If a value of max-width is set to 800 pixels, it will scale as needed to use the full width provided. However, if the screen size is reduced, the element will re-size as needed to the new display area.
Taking it Up A Level
Knowing how to manipulate the div width property can help with design and positioning on the page. However, to really take advantage of CSS positioning, the concepts of grids and floats can become your best friends. For detailed reads on both, check out CSS Grid Layout: Lines and Gaps Explained and The Beginner’s Guide to CSS Float to get started.
Why stop at just web design? The creative ability in programming allows people to do even more with their ideas. If you want to advance your career, take the first steps by learning to code. Having these skills can help you open doors to those new professional possibilities. Enroll in Udacity’s Intro to Programming Nanodegree today to start the journey.
