Home Is there a way to use css to style html elements to display full width across the page without putting text content into the elements?

Questions

Is there a way to use css to style html elements to display full width across the page without putting text content into the elements?

byMR

October 20, 2024

I am wanting to display a page with no content that just visually displays the basic structure of a html page using semantic tags without actually putting in any text content (yet).

The effect I’m looking for is a page that looks like this:

Here is the html that I have written so far:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #wrapper {
            width: 500px;
            margin: 0 auto;
        }
        
        header {
            background-color: green;
            width: 100%;
        }
        
        nav {
            background-color: aqua;
            width: 100%;
        }
        
        main {
            background-color: lightblue;
            width: 100%;
        }
        
        footer {
            background-color: bisque;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <main>
        </main>
        <footer>
        </footer>
    </div>
</body>
</html>

My problem is that it doesn’t display anything at all, until I put some kind of text into each of the semantic tags (even if it’s a   ).

Is there a way to style the tags, such that they will show the full box for each of the semantic elements , , and across the width of the page without having to add some text into each of them?

Thanks heaps 🙂

>Solution :

The problem here is that the elements have a height of 0 pixels. This is also the reason why they are visible once you add text to them.

You can set the height of a normal line of text for the elements like this:

    header {
        background-color: green;
        width: 100%;
        height: 1em;
    }

Of course you can also set an absolute height using px or vh.

See a Codepen with multiple examples: https://codepen.io/konlanx/pen/LYwjxNN

You can also use your browsers developer tools by right-clicking your page and choosing "Inspect element". In this view you can highlight an element and investigate its properties in the "Layout" tab. Here you can see that your elements are being rendered, but have a height of 0 pixels.