Jump to content

Float (div) 100% height

dbhynds

By dbhynds
in CSS

Recommended Posts

dbhynds Newbie

dbhynds

Posted
Posted

I have two float divs inside of another div. Depending on the page, either could be larger than the other. I want to have a divider between the two. I've tried doing a border, but because either one could be higher, on some pages it doesn't extend all the way down the page.I need to set one of my float divs to run the entire length of its parent div, but cannot figure out how.Any suggestions?Here's the site:www.dougberkytheatre.comHere's an example of the div not running to the bottom:www.dougberkytheatre.com/?p=7Here's my CSS:

body {background: url('/images/background.gif');background-color: #6D3115;background-repeat: repeat-x;margin-top: 24px;}h1 {font-family: 'Times New Roman';text-align: left;font=color: #271008;font-size: 24px;}a img {border: 0px;}a {font-family: tahoma;color: #BB4400;font-size: 12px;}p, b, strong, em, i, u{text-align: left;font-family: tahoma;color: #554433;font-size: 12px;line-height: 18px;}.headerdiv {background-color: #EAD5BA;width: 702px;}.pagediv {border-left: 3px #C59265 solid;border-right: 3px #C59265 solid;border-bottom: 3px #C59265 solid;width: 696px;background-color: #EAD5BA;overflow: auto;}.navdiv {background-image: url('/images/navbg.gif');background-color: #D3BB99;border-bottom: 1px #271008 solid;border-top: 1px #271008 solid;height: 29px;vertical-align: top;}.navitem {border-right: 1px #C9A883 solid;float: left;height: 23px;padding-top: 6px;}.navitem a {font-family: tahoma;color: #271008;font-size: 12px;text-decoration: none;margin-left: 20px;margin-right: 20px;}.bodydiv {background-image: url('/images/subnav.gif');background-repeat: repeat-x;background-color: #EAD5BA;padding-left: 20px;padding-right: 20px;padding-bottom: 10px;padding-top: 37px;vertical-align: top;float: left;width: 453px;border-right: 1px #C9A883 solid;}.sidebardiv {background-image: url('/images/subnav.gif');background-repeat: repeat-x;background-color: #EAD5BA;padding-left: 20px;padding-right: 20px;padding-bottom: 10px;padding-top: 37px;vertical-align: top;float: right;}.footerdiv {width: 702px;padding-top: 3px;padding-right: 23px;}.footerdiv p {color: #C59265;text-align: right;}.footerdiv a {color: #C59265;text-decoration: none;}

And here is the code on my page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>><head profile="http://gmpg.org/xfn/11"><meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /><title><?php bloginfo('name'); ?>. <?php wp_title(); ?></title><meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->    <style type="text/css" media="screen">        @import url( <?php bloginfo('stylesheet_url'); ?> );    </style><link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" /><link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /><?php wp_head(); ?></head><body><center><div class="headerdiv"><?php get_header(); ?></div><div class="pagediv"><div class="navdiv"><?php $my_query = $wp_query; ?><?php query_posts('cat=3'); ?><?php while (have_posts()) : the_post(); ?><div class="navitem" nowrap><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></div><?php endwhile; ?></div><div class="sidebardiv"><?php get_sidebar(); ?></div><div class="bodydiv"><h1><?php the_title(); ?></h1><?php the_content(); ?></div></div><div class="footerdiv"><?php get_footer(); ?></div></center><script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script><script type="text/javascript">_uacct = "UA-3170858-4";urchinTracker();</script></body></html>

Link to comment
Share on other sites
dcole.ath.cx Member

dcole.ath.cx

Posted
Posted

This is an easy fix. You give both floating divs borders on their touching sides. That is, if the left one is longer it well create the border all the way down and vise versa. The only problem you may run into is having the two borders not positioned on top of one another. Which just means you need to adjust the divs dimensions.

Link to comment
Share on other sites
aalbetski Member

aalbetski

Posted
Posted

try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html style="height:100%">	<body style="height:100%">	<div>		<div style="float:left;height:100%">		This is  div		</div>		<div style="float:left;border-left:1px red solid;height:100%">		This is  div 2		<p>This is  div 2		</div>	</div>	</body></html>

or

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html >	<body >	<div style="height:400px">		<div style="float:left;height:100%">		This is  div		</div>		<div style="float:left;border-left:1px red solid;height:100%">		This is  div 2		<p>This is  div 2		</div>	</div>	</body></html>

Link to comment
Share on other sites
rzea Member

rzea

Posted
Posted

Hello,I've ran into the same issue before, I've looked around for solutions to this but only my solution has actually worked better.Your main issue is the way you have your HTML architecture, with this I mean questions like:

  • Do you have a header?
  • Do you have a container?
  • Do you have a footer?

For what I've seen in your HTML, you don't. I suggest you 'slice' your page in several independent elements (DIVs) so you can manipulate them without having to worry about breaking others, which is what's happening to you right now.Use this code to start with a very basic HTML structure:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">body {	color:#fff;	font: 1em normal Georgia, "Times New Roman", Times, serif;	text-align:center;}#container {	width:600px;	margin:auto;	border:#000 1px solid;}#header {	height:100px;	background:#ccc;}#left-column {	float:left;	width:400px;	background:#333;}#right-column {	float:left;	width:200px;	background:#666;}#footer {	background:#999;	height:50px;}div.clear {	clear:both;}</style></head><body><div id="container"><div id="header">header</div><div id="website-content"><div id="left-column">left-column</div><div id="right-column">right-column</div></div><div class="clear"></div><div id="footer">footer</div></div></body></html>

The trick or solutionWhat you need to do is to put a background image on the #container DIV and repeat it on the Y axis, the background image is 1px high and has the borders of the left and right columns so when the image is repeated along the #container DIV it will always show the borders of the left and right columns. With this you won't need to bother with putting borders to the left or right columns at all.Now, with the #container DIV repeating the image in its background, you put a background image on your #footer DIV that exactly 'meets' with the #container DIV thus completing the overall content container of the site. This way you can have ANY amount of content on each column and the borders on them will always be all the way down to the footer.Does that make sense? :)---By visiting you site I see the columns and the border is extending all the way to the bottom now.If you have already found a fix, good, if not, maybe you might want to give my advice above a try.Let us know how it goes.Thanks!

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...