Printable View
I make 3 child div within a parent div. Like this:
<div id="wrapper">
<div id="inner-left"></div>
<div id="inner-middle"></div>
<div id="inner-right"></div>
</div>
I want the div 'inner-middle' for content and other two for b g image with repeat y .
The problem is how can I make the other two divisions automatically take the the height of the 'inner-middle' division? (the height of the div 'inner-middle' will change with the content)
Let's see the css you are using, include the background images (put up a demo of the problem). The solution will probably be to clear the float(s) one way or another. There are various ways, one that often works in situations like this is to give the floated division(s):
But, as I say, to be sure we would need to see the current css in action. So, if you want more help:Code:overflow: hidden;
Please post a link to a page on your site that contains the problematic code so we can check it out.
I haven't uploaded any page but I can give you the css coding
wrapper
{
width: 90%;
margin: 0 auto 0 auto;
}
#inner-left
{
float:left;
width:25px;
background-image:url(../images/wrapper-image-left.jpg);
background-repeat:repeat-y;
height:100%;
}
#inner-middle
{
width: 90%;
background-color:#FFFFFF;
padding: 5px;
text-align: left;
float:left;
}
#inner-right
{
float:left;
width:25px;
background-image:url(../images/wrapper-image-right.jpg);
background-repeat:repeat-y;
height:100%;
}
Thanks
Here's a good tutorial on the way to do it for cross-browser compatibility.
http://matthewjamestaylor.com/blog/e...r-css-no-hacks
Please review the following sites that will detail how to contain floats, and why this happens
Containing floats: http://www.ejeliot.com/blog/59 , http://www.positioniseverything.net/easyclearing.html http://www.quirksmode.org/css/clearing.html http://www.complexspiral.com/publica...aining-floats/
Thanks, the links are very useful
do a search for div position
http://www.bing.com/search?q=div+pos...l&qs=n&sc=1-12
here is one link about div position
http://www.barelyfitz.com/screencast...s/positioning/
There's a simple way to do this using a small bit of javascript and Jquery. It uses a common 'class' for the columns you want displayed evenly. Here's a complete page sample. If you don't have Jquery you need to download it and make a reference to its location. If you don't want to do that then just link to Google's Jquery libary:
Code:<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
Code:<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Equal Height Columns with jQuery</title>
<style>
body {
font: small/1.3em Arial, Helvetica, sans-serif;
background-color: white; }
#wrap {
width: 600px;
margin: 0 auto; }
.column {
float: left;
padding: 10px; }
#col1 {
width: 110px;
margin-right: 10px;
background-color: #E2DDC4; }
#col2 {
width: 200px;
margin-right: 10px;
background-color: #6B99F6; }
#col3 {
width: 210px;
background-color: #E87C5E; }
</style>
<script language="javascript" type="text/javascript" src="../../js/jquery/jquery.js"></script>
<script>
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function() {
equalHeight($(".column"));
});
</script>
</head>
<body>
<div id="wrap">
<h1>Equal Height Columns with jQuery</h1>
<p>This is an example of equal height columns using a single short jQuery function. View the page source or <a href="http://www.cssnewbie.com/equal-height-columns-with-jquery/">refer to the original CSS Newbie article</a> to see how the function works.</p>
<div class="column" id="col1">
<p>This three-column design features three columns with significantly varying quantities of content.</p>
</div>
<div class="column" id="col2">
<p>However, despite the differing quantity amounts, these columns are exactly the same height. No tricks, no gimmicks, no resorting to repeating background images to fake our way to columnar nirvana. And certainly, no tables have been harmed in the making of these columns. </p>
<p>They're simply divs sharing a common class, all of which have been set to the same height.</p>
</div>
<div class="column" id="col3">
<p>And I think a single class is an addition we can all get behind.</p>
</div>
</div>
</body>
</html>