CSS Full Width

Web pages are usually designed with elements that fit well across the page. Understanding the CSS properties that enable you to do this forms the basic skills needed to build upon, improve, scale, maintain and test your app.In this article, we look at how to do this step-by-step.

1. Create the Parent element styles

The parent element that acts as a wrapper for the nestedor children elements. Set the width property to fill available space.

.wrapper {
width: 100%;
}

2. Add the HTML for parent and child elements

<div class='wrapper'>
<div class='col'>column</div>
<div class='col'>column</div>
</div>

3. Other Basic styling

I have added some basic CSS styling to the body and .colto show how the page can be developed further.

See the complete result on Code pen:

Full Width in CSS (codepen.io)

--

--

Block level elements start on a new line.

Common examples are:

  • <div>
  • <p>
  • <h1> -<h6>

Inline elements don’t start on a new line.

They take as much width as necessary where started.

Common examples are:

  • <span>
  • <img>
  • <a>

--

--