• 0

Heights. I hate them.


Question

Hi guys,

I've searched for the past two hours and really can't figure this one out. Heights of elements have always been a major pain in the ass for me, I can't help it.

Basically I have two div elements (column1 and column2) and I want them to be the height of their parent div (columns).

I have a few assumptions :

  • I don't know the height of the parent div element
  • I don't know which div element holds the biggest content. (i.e. it's not always column1 that has more content than column2)
  • I am not putting a background picture (the faux column hack method won't work)

Thanks in advance to the CSS God (or Goddess, it is still possible on Neowin :p) who will teach me this one


<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>CSS - 2 columns</title>
	<style type="text/css">
	html, body {
		color: #FFF;
		font-family: Verdana;
	}

	div.columns {
		height: auto;
	}

	div.column1 {
		float: right;
		padding-top: 10px;
		padding-bottom: 10px;
		margin-right: 10px;
		margin-left: -50px;
		width: 200px;
		text-align: center;	
		background-color: #003366;
		-moz-border-radius: 25px;
		border-radius: 25px;
		border-bottom-right-radius: 25px;
		height: 100%;
	}

	div.column2 {
		text-align: justify;
		background-color: #336699;
		padding: 10px;
		margin: 0px 10px 20px;
		font-size: 16px;
		-moz-border-radius: 25px;
		border-radius: 25px;
		height: 100%;
	}
	</style>
</head>
<body>
	<div class="columns">
        <div class="column1">
			bla bla bla<br>bla bla bla
		</div>
        <div class="column2">
        	bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>
        </div>
    </div>
</body>
</html>

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

So basically you want both columns to be 100% height to it's parent div?

You can go off of this example here:

<html>
<head>
<title></title>
<style type="text/css">
html {
    height: 100%;
}
body {
	margin: 0;
	padding: 0;
	height: 100%;
}
.container {
	position: relative;
	width: 800px;
	height: 1000px;
	margin: 0 auto;
	background: #ccc;
   }
.left-element {
	position: absolute;
	left: 0;
	width: 120px;

	height: 100%;
	background: url('gravatar.jpg') top left repeat-y;
	}

.right-element {
	position: absolute;
	right: 0;
	width: 120px;

	height: 100%;
	background: url('gravatar.jpg') top left repeat-y;
	text-align: right;
   } 
</style>
</head>
<body>

 <div class="container">

  <div class="left-element">
  </div>

  <div class="right-element">
  </div>

</div>
</body>
</html>

http://dev.icupcake.org/neowin/PyX.html

Link to comment
Share on other sites

  • 0

You can go off of this example here: (snip)

Thanks for the quick answer Cupcakes :)

However, as far as I have tested, this method involves a known height for the parent element, which is 1000 pixels.

If the browser is given a height for the parent element, it works like a breeze. In my case, I?m going to put text in that, it?s a news box in fact. I don?t know how long my news will be, so I can?t put a fixed height. That bothers me a lot :-\

Link to comment
Share on other sites

  • 0

I only entered in 1000px because I was being lazy and didn't feel like pasting in copy.

You can look now to see I removed height: 1000px; altogether from #container and the columns are still 100% height.

Link to comment
Share on other sites

  • 0

Thanks. I didn?t manage to word wrap the text in the middle column so that it doesn?t go below the columns on the left and right though.

clear:left and clear:right just won?t do it with position:absolute.

Also, if I enter some text in the column on the left, they don?t grow to the same height, only this one does. :-\

Link to comment
Share on other sites

  • 0

Uhm, that's because my code is incomplete and I only tossed in text to show you its working. The text is expanding to the full width of #container, thus why it's under either column.

As far as clearing, you should be applying something like .clearfix to #container itself and not either of the columns.

 .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Link to comment
Share on other sites

  • 0

Hmmm... I tried for about 2 hours last week and came up to nothing. Sorry, I'm really not getting this, even with your code wacko.gif

Oh well... I ended up using jQuery for this. I wanted genuine CSS, not javascript (because I believe it takes more processing power), but I guess this does it.

I found it here by the way :

http://www.cre8ivecommando.com/equal-height-columns-using-jquery-6164/

Link to comment
Share on other sites

  • 0

Oh well... I ended up using jQuery for this. I wanted genuine CSS, not javascript (because I believe it takes more processing power), but I guess this does it.

I found it here by the way :

http://www.cre8ivecommando.com/equal-height-columns-using-jquery-6164/

I was thinking about this earlier today, but why not just have the div.container have a background image with repeat-y all the way down giving the appearance that the contained divs extend their height to the size of the container / longer of the two inner divs.

Since you are going to constrain the widths of the contained divs, shouldn't be a problem.

Kind of sketchy but it makes it so it displays properly without javascript or having specific height values anywhere.

edit: on second thought it gets a little bit hackier when adjusting for the border-radius attributes you want in the inner divs, but this can be done via pre-css3 methods and alittle bit more markup.

Link to comment
Share on other sites

  • 0

Nope don't need js for that. Try this...

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS - 2 columns</title>
<style type="text/css">
	*	{
		margin: 0;
		padding: 0;
	}
	html, body {
		color: #FFF;
		font-family: Verdana;
	}
	div.columns	{
		width: 700px;
		margin: 0 auto;
		position: relative;
	}
	div.column1, div.column2	{
		z-index: 2;
		position: relative;
	}
	div.column1 {
		float: right;
		width: 160px;
		padding: 20px;
		text-align: center;
	}
	div.column2 {
		padding: 20px;
		font-size: 16px;
		text-align: justify;
		margin: 0px 200px 20px 0;
	}
	div.bg	{
		top: 0;
		height: 100%;
		position: absolute;
		border-radius: 25px;
		-moz-border-radius: 25px;
	}
	div.col1bg	{
		right: 0;
		width: 200px;
		background: #003366;
	}
	div.col2bg	{
		left: 0;
		width: 500px;
		background: #336699;
	}
	span.clear	{
		height: 0;
		clear: both;
		display: block;
		overflow: hidden;
	}
</style>
</head>

<body>

<div class="columns">
	<div class="column1">
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
	</div>
	<div class="column2">
		Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
	</div>
	<div class="bg col1bg"></div>
	<div class="bg col2bg"></div>
	<span class="clear"></span>
</div>

</body>

</html>

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.