How to Make CSS DIV Expand Width to Full Page

Customize HTML elements quickly using CSS properties.

In the HTML language, you can create "div" elements to group together objects such as paragraphs, images and hyperlinks. When defining a new div in a Web page, you can customize its appearance and functionality using Cascading Style Sheet properties. For example, you can add CSS to a div element that forces its width to expand to the full size of the browser window.

Things You'll Need

• HTML or text editor

Instructions

1. Launch your preferred HTML or text editor.

2. Open the Web page that you want to expand to full-page width.

3. Scroll down through the code until you find the line that begins the div element. The line will include "<div>" or an opening div tag followed by one or more parameters, such as “<div id=myDiv>.”

4. Replace the line of code with "<div style="width:100%">" to instruct a visitor’s Web browser to expand the width of the div element to the size of the browser window. If the existing div tag contains existing parameters, as in the example above, insert the “width” parameter into the tag. For example:

   <div id=myDiv style=“width: 100%”>

5. Save the edited file and publish it on your Web server.

References

• The Web Design Resource: The Box Properties