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
  • 89 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by tinimic
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.