Problem with text wrap and centered layout

Ceepop

10-27-2011, 01:00 AM

The page I am trying to create has an H1 tag and container called .body. The two objects are different lengths, but I would still like them centered perfectly in the browser window. The problem I am having is that when the window is resized to be smaller than the length of the text, the text moves to the next line and, as you can see, looks really bad.

I know the answer is in how I position the elements but I cannot find a balance. When I used pixel values (fixed width) the boxes don't look perfectly aligned in every window, but the text doesn't wrap. When I use percentage values, the boxes look perfectly centered, but the text looks horrible.

How can I position the elements so that I can get perfectly centered boxes without the text moving to the next line? Thanks in advance. Im kind of new to CSS by the way.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Centered H1 over centered container</title>
<style>

body {
background:rgb(28,143,55);
font-family: 'BonvenoCFLight';
}

h1 {
position: absolute;
margin: -100px 13%;
width: 50%;
min-width: 50%;
height: 75px;
max-height: 75px;
background-color: rgb(46,184,87);
font-style: italic;
color: black;
text-align: center;
font-size: 350%;
padding-top: 40px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 10px;
border-style: solid;
border-top-width: 0px;
border-right-width: 0px;
border-left-width: 0px;
border-bottom-width: 12px;
border-color: black;
}

.body {
width: 75%;
min-width: 75%;
height: 800px;
margin: 100px auto 0 ;
background: rgb(204,207,188);;
}
</style>
</head>

<body>

<div class="body">
<h1>Heading Text Goes Here</h1>

<br/> <br/>
<p> why does the heading text collapse when the window is resized to be very small?</p>
</div>
</body>
</html>

Excavator

10-27-2011, 01:25 AM

Hello Ceepop,
That's some very involved positioning you've put on your h1. It may be easier to center that text from it's containing element, .body, with text-align.
I've also added nowrap to stop it from linebreaking but too wide is too wide and I'm not sure what you're expecting it to do when it doesn't fit.

Give this a try and see what it does for you.

h1 {
/* position: absolute;
margin: -100px 13%;
width: 50%;
min-width: 50%;
height: 75px;
max-height: 75px;
*/
white-space: nowrap;
background-color: rgb(46,184,87);
font-style: italic;
color: black;
text-align: center;
font-size: 350%;
padding-top: 40px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 10px;
border-style: solid;
border-top-width: 0px;
border-right-width: 0px;
border-left-width: 0px;
border-bottom-width: 12px;
border-color: black;
}

.body {
width: 75%;
min-width: 75%;
height: 800px;
margin: 100px auto 0 ;
background: rgb(204,207,188);
text-align: center;
}

Ceepop

10-27-2011, 02:10 AM

That, I believe, was the tag I was looking for. Once I resized the minimum width for the h1 to an acceptable pixel value, I got JUST the effect I was looking for. Thank you SO much!