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.

7 Years
Discussion Span
Last Post by tinimic

You can try something like this:

<style type="text/css">
.32 {
	line-height: 32px;
	margin: 0;
.72 {
	line-height: 72px;
	margin: 0;
.56 {
	line-height: 56px;
#header {
	height: 160px;
<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>

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


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.


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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.