Member Avatar for scaiferw

I have a gradient header image as a background image in a header div.

The gradient, which stretches horizontally across the entire page, has three distinct vertical partitions of 32, 72 and 56px, and I'll ultimately want to apply top and bottom padding to one or more if the three vertical partition to control exactly where my content lines up.

I tried creating a table with three precisely sized rows, but as soon as I put content in it stretches the rows vertically. The DIVs I tried didn't work either.

Can anyone tell me how to obtain three vertical slices with fixed heights? I suppose CSS would in theory be better but a table would be fine by me.

  • 2 Contributors
  • 3 Replies
  • 94 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by tinimic

Dani AI

Generated

A compact, modern approach that keeps each horizontal band at an exact height and still lets you add padding inside each band is to make the header a grid with three fixed rows. This avoids table-row expansion and works even when a band needs multiple lines or internal padding. For single-line alignment, already offered a simple solution; below is a different, more flexible method.

<div id="header">
  <div class="band top">Top content</div>
  <div class="band middle">Middle content</div>
  <div class="band bottom">Bottom content</div>
</div>
#header {
  display: grid;
  grid-template-rows: 32px 72px 56px; /* exact band heights */
  width: 100%;
  background: url('header-gradient.png') repeat-x top;
}

.band {
  box-sizing: border-box;           /* padding stays inside fixed height */
  padding: 6px 16px;                /* control top/bottom padding here */
  display: flex;                    /* simple vertical centering of content */
  align-items: center;
  overflow: hidden;                 /* keeps the band height fixed */
}

Notes and troubleshooting:

  • If one band must contain variable content, use overflow:auto on that band so it scrolls rather than stretching siblings.
  • Remove default margins on headings/paragraphs (e.g., h1, p { margin: 0; }) so they do not push band height.
  • For older browsers that lack grid support, use absolutely positioned slices inside a position:relative header (set explicit top and height for each slice).
  • CSS Grid browser compatibility and examples are documented at CSS Grid Layout.

Recommended Answers

All 3 Replies

Member Avatar for tinimic

You can try something like this:

<html>
<head>
<style type="text/css">
<!--
.32 {
	line-height: 32px;
	margin: 0;
}
.72 {
	line-height: 72px;
	margin: 0;
	}
	
.56 {
	line-height: 56px;
	margin:0;
 }
#header {
	height: 160px;
	background-color:#CCC;
}
-->
</style>
</head>
<body>
<div id="header">
  <h1 class="32">This is some text</h1>
  <p class="72">This is more text</p>
  <h2 class="56">This is even more text</h2>
</div>
</body>
</html>

You can change the upper and lower margin in each class to tweak the position of different text sizes.

Member Avatar for scaiferw

I wouldn't have thought of line height, but as long as I only need one line of text I suppose it should work.

Many thanks.

Member Avatar for tinimic

With three lines of text in one region, just divide that regions height in px by 3; etcetera.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.