Div height problem

December 25, 2007

I have a layout that has a div (frame) that encapus the entire page, and two div's inside it. The left div1 (nav) has less content so it is shorter, and the second div2 (content) is the content. How can I get these two div's to be the same hight if the content div changes from page to page?

2,153 · December 25, 2007

encapsulate both divs in one div?

2,445 · December 25, 2007

This page should be helpful...

http://www.alistapart.com/articles/fauxcolumns/

December 25, 2007

sweetsam said:
This page should be helpful...
http://www.alistapart.com/articles/fauxcolumns/

This would work, but div1(nav) has a special boarder around it. Any ideas now?

2,445 · December 25, 2007

It will be very helpful to provide a solution if you can post the layout you are trying to code.

2,153 · December 25, 2007

heffer86 said:
This would work, but div1(nav) has a special boarder around it. Any ideas now?

Tables for layout?

haha... I jest... but funny how the thing that once worked flawlessly is now not allowed, and what's meant for 'layout' doesn't work, no?

Yes, I cringe over what once took a few hundred bytes of HTML now takes 1000's of bytes in HTML and nearly as many in CSS stylesheets. And this is supposed to download faster?

I don't know where you come from but I'd rather wait a few seconds for one frame to download than have to wait for 30 seconds or more for a complete CSS layout to download for the current page including all of the content I've already downloaded and cached... but the CSS styles and DIV's don't seem to want to cache... oh well.

December 25, 2007

sweetsam said:
It will be very helpful to provide a solution if you can post the layout you are trying to code.

Here is my ASP.Net Master page

&lt;%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %&gt;

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">t;html xmlns="http://www.w3.org/1999/xhtml">;head runat="server"&gt;
	&lt;title&gt;Untitled Page&lt;/title&gt;
	&lt;asp:ContentPlaceHolder id="head" runat="server"&gt;
	&lt;/asp:ContentPlaceHolder&gt;
	&lt;link href="css/style.css" rel="stylesheet" type="text/css" /&gt;




&lt;/head&gt;
&lt;body&gt;
	&lt;form id="form1" runat="server"&gt;
	&lt;div id="frame"&gt;

		&lt;div id="header"&gt;
			&lt;div class="float_left"&gt;&lt;img src="images/master/ge_logo.gif" alt="" /&gt;&lt;/div&gt;
			&lt;div class="float_left"&gt;&lt;img src="images/master/nav/home.gif" alt="" /&gt;&lt;/div&gt;
			&lt;div class="float_left"&gt;&lt;img src="images/master/nav/learn.gif" alt="" /&gt;&lt;/div&gt;
			&lt;div class="float_left"&gt;&lt;img src="images/master/nav/inspiration.gif" alt="" /&gt;&lt;/div&gt;
			&lt;div class="float_left"&gt;&lt;img src="images/master/nav/transformation.gif" alt="" /&gt;&lt;/div&gt;
			&lt;div class="float_left"&gt;&lt;img src="images/master/nav/about.gif" alt="" /&gt;&lt;/div&gt;  

			&lt;!-- end header --&gt;   
		&lt;/div&gt;
		&lt;div id="nav"&gt;
			&lt;div id="nav_content"&gt;
				&lt;img src="images/master/nav/garten_center.gif" alt="" /&gt;
				&lt;ul&gt;
					&lt;li&gt;&lt;a href="Default.aspx">Annuals</a></li>		&lt;li&gt;Trees, shrubs, persnnials&lt;/li&gt;
					&lt;li&gt;Pavers and Retaining Walls&lt;/li&gt;
					&lt;li&gt;Other Products&lt;/li&gt;
					&lt;li&gt;Pictures&lt;/li&gt;
				&lt;/ul&gt;

				&lt;img src="images/master/nav/landscaping.gif" alt="" /&gt;
				&lt;ul&gt;
					&lt;li&gt;Designing&lt;/li&gt;
					&lt;li&gt;Pictures&lt;/li&gt;
					&lt;li&gt;Pavers and Retaining Walls&lt;/li&gt;
				&lt;/ul&gt;
				&lt;img src="images/master/nav/flower_shop.gif" alt="" /&gt;
				&lt;ul&gt;
					&lt;li&gt;Fresh ideas&lt;/li&gt;
					&lt;li&gt;Christmas&lt;/li&gt;
					&lt;li&gt;Silks&lt;/li&gt;
					&lt;li&gt;Pictures&lt;/li&gt;
				&lt;/ul&gt;
				&lt;img src="images/master/nav/contact_us.gif" alt="" /&gt;
			&lt;/div&gt;
			&lt;!-- end nav --&gt;
		&lt;/div&gt;

		&lt;div id="content_container"&gt;
			&lt;div class="content"&gt;
			&lt;asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"&gt;

			&lt;/asp:ContentPlaceHolder&gt;
			&lt;/div&gt;

		&lt;!-- end Content --&gt;
		&lt;/div&gt;

		&lt;div class="clear"&gt;&lt;/div&gt;
	&lt;!-- end frame --&gt;
	&lt;/div&gt;
	&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

And the css file

/* global styles */
body {
	color:#6d941a;
	background-color:#83a43c;
	text-align:center;
	background-image:url(../images/patter1.gif);
	background-repeat:repeat;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

p {
	margin: 0px;
	padding: 0px;
}

ul {
	text-decoration:none;
	margin:0px;
	padding:0px;
	list-style-type:none;
	list-style-position:outside;
	list-style:none;
}

img {
	border-style:none;
}

a:link {
	color:#000066;
	text-decoration:none;
}


#frame {
	width: 915px;
	text-align:left;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

#header {
	color:#ffffff;
	text-align:left;
	height: 145px;
	width: 915px;
}


#nav {
	width: 184px;
	height:100%;
	background-position: top;
	float:left;
	background-color:#fffff0;
}


#nav_content {
	padding: 3px;
	border: medium double #6d941a;
	height:100%;
}

#nav_content li.current {
	color: #000099;
	text-decoration:line-through;
	background-color:#000000;
}


#nav li.current {
	color: #000099;
	text-decoration:line-through;
	background-color:#000000;
}



#content_container {
	float:left;
	background-color:#fffff0;
	width:730px;
	height:100%;
}

.content {
	padding: 3px;
	height:100%;
	border: medium double #6d941a;
}

.float_left {
	float:left;
}

.float_right {
	float:right;
}

.clear {
	clear:both;
}

Edited December 25, 2007 by Joel

2,445 · December 25, 2007

By layout I meant the image not the code :)

12,995 · December 25, 2007

Just wrap both divs inside a wrapper div, and apply 'overflow:hidden;' on the wrapper, and add 'padding-bottom: 32767px; margin-bottom: -32767px;' to the shorter div.

sweetsam said:
This page should be helpful...
http://www.alistapart.com/articles/fauxcolumns/

It's a horrible way of making columns. it's rigid, only works for fixed width. hard to maintain, every time you change the style or width of the column you need to make a whole new image. And it's a waste of bandwidth.

Regression_88 said:
Yes, I cringe over what once took a few hundred bytes of HTML now takes 1000's of bytes in HTML and nearly as many in CSS stylesheets. And this is supposed to download faster?
I don't know where you come from but I'd rather wait a few seconds for one frame to download than have to wait for 30 seconds or more for a complete CSS layout to download for the current page including all of the content I've already downloaded and cached... but the CSS styles and DIV's don't seem to want to cache... oh well.

What are you talking about? Table layouts take much more space than div layouts. Not to mention the accessibility horrors. And CSS does cache, you only need to download it once, that's the whole point of using external styles.

Edited December 25, 2007 by Primexx

Sign In

Div height problem

Question

heffer86

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

abecedarian paradoxious

Link to comment

Share on other sites

sweetsam

Link to comment

Share on other sites

heffer86

Link to comment

Share on other sites

sweetsam

Link to comment

Share on other sites

abecedarian paradoxious

Link to comment

Share on other sites

heffer86

Link to comment

Share on other sites

sweetsam

Link to comment

Share on other sites

primexx

Link to comment

Share on other sites

Recently Browsing 0 members

Posts

Recent Achievements

Popular Contributors

Tell a friend

Choose your Ad Blocker