content/body bg not tiling vertically to fit the height of the content (not working in safari/firefox)

bradkenyon

Regular

Posts: 14
Joined: 2008-07-15
Location: NY

Posted: Wed, 2008-07-23 19:22

site (work in progress): http://herkimer.livebrad.com

the content bg is within .content

the .content-body is w/i .content

then w/i that is col-left for the left side of content-body, and col-middle for the middle part of content-body

looks like .content or .content-body isn't playing nice, since it won't go w/ the flow of the content, and w/ the footer being shoved up too high kind of like how you would hike your pants to go up to your arm pits.

.content{
	background:#fff url('/images/content_tile.gif') repeat-y top left;
	width:966px;
	height:100%;
	margin:0em auto;
}

.content-body{
	padding:10px;
	min-height:100%;
}

screen shot: http://i34.tinypic.com/2mgrtxw.png

<div class="content">
		<div class="content-body">
			<div class="col-left">
				<div class="nav-left">
					<h1>Admissions</h1>
					<ul>
						<li><a href="/link/">Apply Now</a></li>
						<li><a href="/link/">Accepted Students</a></li>
						<li><a href="/link/">Cost of Attendance</a></li>
						<li><a href="/link/">Calendar</a></li>
						<li><a href="/link/">College Catalog</a></li>
						<li><a href="/link/">Forms</a></li>
						<li><a href="/link/">Future Students</a></li>
					</ul>
					
					<div class="feature-left">
						<p><img src="/images/feature_left.jpg" alt="Student Ambassadors" /></p>
						<p>This belongs below the left nav</p>
					</div>
					
				</div>
			</div>
			<div class="col-middle">
				<p><img src="/images/admissions_main.jpg" style="width:705px;" alt="Admissions" /></p>
				<p>uyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
			</div>			
		</div>
	</div>

wolfcry911

Guru

Posts: 2834
Joined: 2004-09-01
Location: MA, USA

the children of .content are

Posted: Wed, 2008-07-23 19:51

the children of .content are floats and are taken out of the document flow. Contain the floats. You actually have the rule necessary to do it, but you've 'x'ed it out.

.content{
	background:#fff url('/images/content_tile.gif') repeat-y top left;
	width:966px;
	height:100%;
	margin:0em auto;
	xoverflow:auto;
}

I would use overflow: hidden myself...

bradkenyon

Regular

Posts: 14
Joined: 2008-07-15
Location: NY

that did the trick, but in firefox, it looks horrible

Posted: Thu, 2008-07-24 02:10

screenshot: http://i36.tinypic.com/2nu38tx.png

/* --------------------- CONTENT BODY ------------------------- */

.content-body{
	padding:10px;
	overflow:auto;
}

/* ----------- LEFT NAV ----------- */

.nav-left ul{
	margin-left:15px;
	margin-bottom:20px;
}

.nav-left li{
	list-style-type:none;
	list-style-image:url('/images/list_arrow.png');
}

.nav-left a, a:visited{
	color:#C26B1A;
	font-weight:bold;
	text-decoration:none;
}

.nav-left a:hover{
	color:#055830;
	font-weight:bold;
	text-decoration:none;
}

.nav-left h1{
	font-size:16px;
	color:#055830;
	margin-bottom:5px;
}

/* ----------- FEATURE LEFT ----------- */

.feature-left{
	text-align:center;
}

/* -------------------------- CONTENT -------------------------- */

.content{
	background:#fff url('/images/content_tile.gif') repeat-y top left;
	width:966px;
	height:100%;
	margin:0em auto;
	xoverflow:auto;
}

.content_bottom{
	background:#e6e3da url('/images/content_bottom.gif');
	background-repeat: no-repeat;
	width:966px;
	height:5px;
	margin:0em auto;
}

/* ------------- COLUMN LEFT ------------- */

.col-left{
	float:left;
	width:20%;
	height:auto;
	padding:5px;
	font-size:.8em;
	margin-right:5px;
	font-family:arial;
}

/* ------------- COLUMN MIDDLE ------------- */

.col-middle{
	float:left;
	width:75%;
	height:auto;
	padding:5px;
	font-size:.8em;
	font-family:arial;
}