Learn VBA & Macros in 1 Week!

CSS - Dynamically Expanding A List

Full Excel VBA Course - Beginner to Expert

Dynamically Expanding A List	View Content

I have a <div> that contains a list.

I would like to "dynamically" expand the number of items on the list when one particular item is "clicked".

Is there a tutorial for this type of action?

Full Excel VBA Course - Beginner to Expert

Expanding List Problem

Similar Tutorials

View Content

Hi all,
I really need some help figuring out this CSS issue.

I've got a client that wants to show their product list using an expanding list. This data is drawn from the database using a tool that returns an HTML table structure that I have little control over. To over come this, I used a stored procedure to format each data element returned as a span with unique name that indicates it's level and location in the product hierarchy. The lowest level of the tree are links to the actual products.

There is some javascript that toggles the display property of spans that are children of the item clicked, making them expand and collapse.

This all works fine, with one little issue. In IE 6, when the child items are all hidden (collapsed), there is some extra space (from the TD containing the links to the products I think) that creates extra space between the categories. This space varies depending on how many products are at the bottom level of the hierarchy.

I've tried everything I can to remove the space - margins, padding, borders set to 0px, etc. But I can't figure this one out.

Can anybody give a hand?

Thanks! This has been driving me nuts!

GregC

PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"(URL address blocked: See forum rules)">

<html xmlns="(URL address blocked: See forum rules)">
<head>
<title>Untitled</title>
<script type="text/javascript">
function toggle(id, level){

 allElements = document.getElementsByName(id);

 for (var i=0; i < allElements.length; i++) {
 if(allElements[i].style.display == "") {
 allElements[i].style.display = "none";

 if (level == 1) {

 //hide all things with the same id
 allElements = document.getElementsByTagName("SPAN");

 for (var i=0; i < allElements.length; i++) {
 var eName = allElements[i].id;
 if (eName) {
 if (eName.substring(0, id.length) == id) {
 allElements[i].style.display = "none";
 }
 }
 }
 }

 } else {
 allElements[i].style.display = "";

 }
 }
}
</script>

<style type="text/css">

/* --- products expanding list --- */
.products_table {
 border: 0px hidden #ffffff;
 border-spacing : 0px;
 border-collapse: collapse;
}

.products_table tr{
 border: 0px hidden #ffffff;
 background-color: #0000ff;
 color: #000000;
 padding: 0px;
}

.products_table td {
 border: 0px hidden #ffffff;
 background-color: #00ff00;
 color: #000000;
 padding: 0px;
 margin: 0px;
}

.products_table td span {
 background-color: #ff0000;
}

.hide_header {
 display: none;
}

.cat, .sub, .prod-none a, .prod a {
 display: block;
 background-color: #ffcccc;
 color: #000000;
 border: 0px hidden #ffffff;
}

.cat {
 font-weight: bold;
 margin-top: 0px;
 padding-top: 0px;
 margin-bottom: 0px;
 padding-bottom: 0px;
}

.sub {
 font-weight: normal;
 margin-left: 20px;
 margin-top: 0px;
 padding-top: 0px;
 margin-bottom: 0px;
 padding-bottom: 0px;
}

.prod a {
 padding-bottom: 0px;
 margin-left: 40px;
 font-style: italic;
 font-weight: bold;
}

</style>

</head>
<body>

<table class="products_table">
<tr><td>Actuators
</td></tr><tr><td>Electric
</td></tr><tr><td> <a href="foo">AUMATIC Electric Actuators</a>
</td></tr><tr><td> <a href="foo">Triple Play Matic Electric Actuators </a>
</td></tr><tr><td> <a href="foo">Foo1 </a>
</td></tr><tr><td> <a href="foo">Foo2 </a>
</td></tr><tr><td> <a href="foo">foo3 </a>
</td></tr><tr><td>Equipment Monitoring
</td></tr><tr><td> <a href="foo">DeviceNet Product 1</a>
</td></tr><tr><td> <a href="foo">DeviceNet Product 2</a>
</td></tr><tr><td> <a href="foo">DeviceNet Product 3</a>
</td></tr><tr><td> <a href="foo">DeviceNet Product 4</a>
</td></tr><tr><td> <a href="foo">DeviceNet Product 5</a>
</td></tr><tr><td> <a href="foo">DeviceNet Product 6</a>
</td></tr><tr><td> <a href="foo">DeviceNet Product 7</a>
</td></tr><tr><td> <a href="foo">DeviceNet Product 8</a>
</td></tr><tr><td> <a href="foo">DeviceNet Product 9</a>
</td></tr><tr><td> <a href="foo">DeviceNet Product 10</a>
</td></tr><tr><td> <a href="foo">DeviceNet Product 11</a>
</td></tr><tr><td> <a href="foo">DeviceNet Product 12</a>
</td></tr><tr><td> <a href="foo">DeviceNet Product 13</a>
</td></tr><tr><td> <a href="foo">DeviceNet Product 14</a>
</td></tr><tr><td> <a href="foo">DeviceNet Product 15</a>
</td></tr><tr><td> <a href="foo">DeviceNet Product 16</a>
</td></tr><tr><td> <a href="foo">DeviceNet Product 17</a>
</td></tr><tr><td> <a href="foo">DeviceNet Product 18</a>
</td></tr><tr><td> <a href="foo">DeviceNet Product 19</a>
</td></tr><tr><td> <a href="foo">DeviceNet Product 20</a>
</td></tr><tr><td> <a href="foo">DeviceNet Product 21</a>
</td></tr><tr><td> <a href="foo">DeviceNet Product 22</a>
</td></tr><tr><td>Controllers
</td></tr><tr><td>Tension
</td></tr><tr><td> <a href="foo">Tension Controller </a>
</td></tr><tr><td>More Controllers
</td></tr><tr><td>Anoter Item
</td></tr><tr><td> <a href="foo">More Tension Controller </a>
</td></tr></table>
</ul>
</body>
</html>

My Expanding Css Box Isn't Expanding With My Content.

Similar Tutorials

View Content

Hello,

I started off trying to find a content box that expands depending on screen res because the last one I made would break in the middle if the users screen res was over 1600px wide.

This box worked great with the screen res but now I'm trying to put content in it and my content is not expanding the box down. Instead of pushing the box lower and forcing a scroll bar. The content keeps going down past the bottom of the box and makes a scroll bar.

Any idea how I can make the box expand with my content?

here is a link to my test page. http://www.gamerunion.com/test.html

My css code.

Code:

div#case {
position:absolute;
z-index:1;
top:200px;
left:50px;
bottom:50px;
right:50px;
background:url(/assets/images/tile.png) repeat;
}
div#tlcorner span, div#trcorner span, div#blcorner span, div#brcorner span, div#lftile span, div#rttile span, div#tptile span, div#btmtile span {
width:0;
height:0;
overflow:hidden;
display:block;
}
div#tlcorner {
position:absolute;
z-index:10;
top:0;
left:0;
background:url(/assets/images/corners.png) -369px 0 no-repeat;
width:123px;
height:123px;
}
div#trcorner {
position:absolute;
z-index:10;
top:0;
right:0;
background:url(/assets/images/corners.png) -246px 0 no-repeat;
width:123px;
height:123px;
}
div#blcorner {
position:absolute;
z-index:10;
bottom:0;
left:0;
background:url(/assets/images/corners.png) 0 0 no-repeat;
width:123px;
height:123px;
}
div#brcorner {
position:absolute;
z-index:10;
bottom:0;
right:0;
background:url(/assets/images/corners.png) -123px 0 no-repeat;
width:123px;
height:123px;
}
div#lftile {
position:absolute;
z-index:5;
top:0;
left:0;
bottom:0;
background:url(/assets/images/lr.png) -20px 0 repeat-y;
width:20px;
}
div#rttile {
position:absolute;
z-index:5;
top:0;
right:0;
bottom:0;
background:url(/assets/images/lr.png) 0 0 repeat-y;
width:20px;
}
div#tptile {
position:absolute;
z-index:5;
top:0;
right:0;
left:0;
background:url(/assets/images/tb.png) 0 0 repeat-x;
height:123px;
}
div#btmtile {
position:absolute;
z-index:5;
bottom:0;
right:0;
left:0;
background:url(/assets/images/tb.png) 0 -123px repeat-x;
height:123px;
}
div#case div.content {
position:absolute;
z-index:10;
width:100%;
min-height:400px;
overflow:hidden;
}
div#case div.content h1 {
font-family: "Times New Roman", serif, sans-serif, Arial;
font-size:16px;
color:#000000;
margin:5px 0;
padding:100px 0 0 100px;
text-align:left;
text-transform:capitalize;
}
div#case div.content p {
font-family: "Times New Roman", serif, sans-serif, Arial;
font-size:14px;
color:#000000;
text-align:justify;
padding:0 100px;
}

HTML

Code:

<body>
<div id="header">
<h1 class="small">GamerUnion</h1>
<h2 class="small">For Gaming Addicts by Gaming Addicts.</h2>
</div>
<div id="case">
    <div id="tlcorner"><span>top left corner</span></div>
    <div id="trcorner"><span>top right corner</span></div>
    <div id="blcorner"><span>bottom left corner</span></div>
    <div id="brcorner"><span>bottom right corner</span></div>
    <div id="tptile"><span>top side tile</span></div>
    <div id="lftile"><span>left side tile</span></div>
    <div id="rttile"><span>right side tile</span></div>
    <div id="btmtile"><span>bottom side tile</span></div>
    <div class="content">
    <div id="nav">
		<ul>
			<li><a href="/" class="current">Home</a></li>
			<li><a href="/about.html">About</a></li>
			<li><a href="/forum/">Forum</a></li>
			<li><a href="/resources.html">Resources</a></li>
			<li><a href="/contact.html">Contact</a></li>
		</ul> 
	</div>
        
        <h1>Gamerunion</h1>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
               
    </div>
</div>
</body>

Css Expanding Background In Div

Similar Tutorials

View Content

Hi, I am trying to make a website for a friend that scales to fit most monitors. The website is very image heavy and I have a navigation bar on the left side that lines up with the background on the right. I haven't made a webpage for awhile so I don't know a lot about CSS.

This is what I have so far. It almost works, but the background on the right will not expand to fit the full div, only goes up to the content that I put inside the Div. The background also doesn't appear to shrink when I scale the window size.

HTML CODE:
Code:

<head>
<link rel="stylesheet" href="style.css" type="text/css"/>

<title>Test Page</title>
</head>

<body>

<div id="sample-container" align="center">


<div id="header"> <img src="images/header.jpg" width="1647" height="147" / id="headerbar"></div>

<div id="nav"> <img src="images/navbar.jpg" width="413" height="776" / id="navbar"></div>

<div id="content"> <img src="../../../Pictures/Misc/101_0138.JPG" width="527" height="428" />
</div>

<div id="footer"></div>
</div>
</body>
</html>

CSS CODE:
Code:

#header
{
	height: auto;
	background-color: #666;
}
#nav
{
	float: left;
	width: 25%;
	height: auto;
	background-color: #999;
	margin-bottom: 10px;
}
#content
{
	float: left;
	width: 75%;
	height: auto;
	background: url(images/mountain.jpg);
	background-repeat: no-repeat;
	margin-bottom: 10px;
}
#footer
{
	clear: both;
	height: 50px;
	background-color: #666;
	margin-bottom: 10px;
}
#headerbar
{
	height:auto;
	width:100%;
}
#navbar
{
	height:auto;
	width:100%;
}

If anyone knows a way to expand the background to fill the div and scale down when the div scales is size, that would be great.
I was also thinking that maybe I could put the the navigation bar and the background image on the page and not as an background. Put those both in a div and have a floating div on the right aligned over the top of the background that contains the page content. If anyone could give any help with a solution it would be appreciated. Thanks.

Oh No... Css + Expanding Content

Similar Tutorials

View Content

You can see the problem he

BrianRoyer.com

The google adsense ad is expanding past the container.

Here is my style.css for troubleshooting:

Code:

html, body {
	background: #a0a0a0 url(images/main_bg.gif) center top repeat-x;
	height: 100%;
  margin-top: 0px;
	margin-bottom: 0px;
	height: 100%;
}

a:link {
	color: #FFFFFF;
	text-decoration: underline;
}

a:visited {
	color: #FFFFFF;
	text-decoration: underline;
}

a:hover {
	color: #FFFFFF;
	text-decoration: none;
}

a:active {
	color: #FFFFFF;
	text-decoration: none;
}

#container {
	width: 703px;
	margin: 0 auto;
	background: #068add url('images/content_bg.gif');
	border-left: 5px solid #cdcdcd;
	border-right: 5px solid #cdcdcd;
	border-bottom: 5px solid #cdcdcd;
}

#content em.u {
  text-decoration: underline;
	font-style: normal;
}

#top {
	padding: 0;
	border: 0;
}

#top img {
	border: 0;
}

#top h1 {
	padding: 0;
	margin: 0;
}

#leftnav {
	float: left;
	width: 160px;
	margin: 0;
	padding: .25em 0 0 .75em;
}

#rightnav {
	float: right;
	width: 125px;
	margin: 0;
	text-align: center;
	padding: 1em 1em 0 0;
}

#rightnav img {
	margin: 0;
	border: 0;
	text-align: center;
	padding: 1em 0 0 0;
}

#content {
	margin-left: 200px;
	margin-right: 200px;
	padding: 1em 0 0 0;
	width: 290px;
}

#content img.left {
	margin: 5px;
	border: 1px solid #000000;
	float: left;
}

#content img.right {
	margin: 5px;
	border: 1px solid #000000;
	float: right;
}

#leftnav img {
	margin: 0;
	border: 0;
}

#google-search img {
	border: 0;
	padding: 1em;
}

#footer {
	width: 699px;
	padding-top: 1em;
	margin: 0 auto;
	background: #068add url(images/footer_bg.gif) center bottom repeat-x;
}

#leftnav p, #content p { 
	margin: 0 0 1em 0; 
	text-align: justify;
	color: #FFFFFF;
	font-family: Verdana;
	font-size: 12px;	
	line-height: 130%;
}

#rightnav p {
	margin: 0; 
	padding: 0;
	color: #FFFFFF;
	font-family: Verdana;
	font-size: 10px;	
}

#leftnav hr, #content hr, #rightnav hr { 
	color: #FFFFFF;
	height: 1px;
}

#content h2 {  
	color: #FFFFFF;
	font-family: Verdana;
	font-size: 12px;	
}

#content h2.center { 
  text-align: center;
	color: #FFFFFF;
	font-family: Verdana;
	font-size: 12px;	
}

#leftnav h2, #rightnav h2 {
	text-align: center;
	margin: 0; 
	color: #FFFFFF;
	font-family: Verdana;
	font-size: 12px;	
}

#content h6, #leftnav h6, #rightnav h6  { 
	text-align: center;
	margin: 0;
	padding: 1em;
	color: #FFFFFF;
	font-family: Verdana;
	font-size: 8px;
}

#navcontainer ul
{
	list-style-type: none;
	text-align: left;
	padding: 0 0 0 1.25em;
	margin: 0;
}

#navcontainer ul li a
{
	background: transparent url(images/list_off.gif) left center no-repeat;
	padding-left: 15px;
	text-align: left;
	font: normal 10px Verdana;
	text-decoration: none;
	color: #FFF;
}

#navcontainer ul li a:hover
{
	background: transparent url(images/list_on.gif) left center no-repeat;
	color: black;
}

#navcontainer ul li a#current
{
	background: transparent url(images/list_active.gif) left center no-repeat;
	color: #666;
}

And here is snippet of code where the adsense ad is located:

Code:

    <div id="container">
      <div id="top">
        <? include("ssi/header.inc"); ?>
        </div>
      <div id="leftnav">
        <? include("ssi/leftnav.inc"); ?>
        </div>
      <div id="rightnav">
        <? include("ssi/rightnav.inc"); ?>
        </div>
      <div id="content">

ad = rightnav.inc

Expanding Height Div

Similar Tutorials

View Content

Hello.

Trying to construct a page with vertical expansion on both of two nested DIVs. Left column is primarily text which varies in length. Right column is a navigation/contact panel that is mostly fixed height, but want ability to drop in objects and expand vertically on some pages.

I have tried to background image in container DIV, but I am still getting the content breaking out of the bottom of the DIV. Any other approaches? Min-height (could not get that to work either). Ideally I would like for these to have the same height. Not shading, so it doesn't need to be exact.

Here's a sample of code (w/o all the junk).

Ie Expanding Width Of Div!!

Similar Tutorials

View Content

going bonkers, I have tried everything to find out why on earth the background goes all the way to the right when this page is viewed in IE..

Black Background Not Stoping!!

Expanding Navbar.

Similar Tutorials

View Content

ive been at this for a while now. i have a navleft.gif, navbody.gif, and navright.gif.

what i want to do is make an expandable nav bar with the body repeating on the x axis. every attempt ive made doesnt work. im still fairly new to css.

should i have a <div id="nav"> and within this div put a another div with id=navleft and another with navright? no idea how to go about this. any help would be appreciated.

Expanding Boxes

Similar Tutorials

View Content

hi,

Im making a site, and i decided to use CSS instead of tables. I have used basic CSS before, but it gets abit harder when i start making boxes etc.

Here is my code so far -

layout.css - (one that gets included on each page)

Code:

@import "style.css";
	
body {
	margin:10px 10px 0px 10px;
	padding:0px;
}
	
#leftcontent {
	position: absolute;
	left:10px;
	top:50px;
	width:200px;
	background:#fff;
	border:1px solid #000;
}

#centercontent {
	
	background:#fff;
 		margin-left: 199px;
 		margin-right:199px;
	border:1px solid #000;		
	voice-family: "\"}\"";
	voice-family: inherit;
  	margin-left: 201px;
  	margin-right:201px;
}

#shoutbox {
	position: absolute;
	right:10px;
	top:50px;
	width:200px;
	background:#fff;
	border:1px solid #000;
}

#rightcontent {
	position: absolute;
	right:10px;
	top:50px;
	width:200px;
	background:#fff;
	border:1px solid #000;
}
	
#banner, #footer {
  background:#fff;
	height:40px;
	border-top:1px solid #000;
	border-left:1px solid #000;
	border-right:1px solid #000;
	voice-family: "\"}\"";
	voice-family: inherit;
	height:39px;
}

#footer {
  background:#fff;
	height:40px;
	border-bottom:1px solid #000;
	border-left:1px solid #000;
	border-right:1px solid #000;
	voice-family: "\"}\"";
	voice-family: inherit;
	height:39px;
}

#banner h1 {
	font-size:16px;
	padding:10px 10px 0px 10px;
	margin:0px;
}
	
#shoutbox, #rightcontent p {
	font-size:10px
}

style.css - text formatting etc.

Code:

body {
	font:	12px/1.2 Tahoma;
	background:#ddd;
	padding:0px;
	margin:0px;
}
	
a {
	text-decoration:none;
	font-weight:bold;
	color:#c00;
}
	
pre {
	font-size:11px;
	color:blue;
}
	
ol {
	margin-right:40px;
}
li {
	margin-bottom:10px;
}

p,h1,pre {
	margin:0px 10px 10px 10px;
}
		
h1 {
	font-size:14px;
	padding-top:10px;
}

it produces a good layout, with a header, 3 coloums and a footer. whoever, the boxes expand at different rates and the footer doesnt move down. the header also doesnt expand. i know how i can fix this, but i dont know how to fix it without making it so that its locked at a resolution. i would like the site to exapand as the window is made larger.

here is an image of what i get -

and this is what i am aiming to acheive -

as you can see, i want all the boxes to be the same length, which is defined by the size of the largest box. also, i want to create 2 or more boxes on the left, only the bottom of which gets made longer. on the first image you cannot see the extra box because it is covered by the other one :-/

i would be greatful for any help you guys can provide me

thanks,

dynamyt

Expanding A Column

Similar Tutorials

View Content

Hey guys,

I've got a two column layout, and I want both columns to be the same height inside the wrapper. Ussually when I do this sort of thing I have a repeating background image or something so it makes it appear they are both the same height, except this template is using rounded corners, so a repeating background won't work.

Code:

#wrapper{
	width:962px;
	margin: 25px auto;
}
#mainContent{
	width:735px;
	background-color: #F4FEFE;
	padding:0px;
	border:0px;
	float:left;
}
#rightColumn{
	background-color: #F4FEFE;
	width:207px;
	height:100%;
	min-height:100%;
	float:left;
	margin-left:20px;
}

Click here to see what I'm talking about... I want that right column to match the height of the main content div.

Would this only be possible using JavaScript or is there a CSS solution?

Div Width Expanding?

Similar Tutorials

View Content

Hi there

I have a container DIV that nests 4 DIVs one on top of the next (logo, navigation, content and footer, all the same widths).

If there is a single paragraph (or small amount) of text in the content DIV of the page, the page looks fine.

However, if there is a large amount of text in the content DIV of the page, the width gets pushed out slightly. IE5 is fine. Firefox and Opera are the problem.

Note: I have left the height of the content DIV blank as it will be of varied size. When I set a height of say, 500px, the page looks fine (but because a background colour is needed for the DIV, it doesn't appear as I intended it to).

Any ideas to why this is happening?

Thanks in advance :-)

-Solange.

Help With Expanding Div With Content

Similar Tutorials

View Content

I have started creating a new DIV layout for my website but can't seem to get it to function correctly. I finally got the DIVs to expand with whatever content is in them, but now they will only span to the height of the window and hide the rest of the content instead of expanding further and just making the IE window scroll. Maybe one of you guys can help me out? Here is the test page:

well apparently I can't post the url, so I guess I'll just "say" it.

juicyart dot net / test.html

Expanding Layout

Similar Tutorials

View Content

Hi all,

I have a site where I have several divs that stack on top of each other for layout purposes and they fill the entire width of the screen.

In the div that contains the content, I'm finding a rare case where a table appears that's so wide, it is off the edge of the content element.

I wanted to do overflow:auto so that it wouldn't mess up the layout but the customer wants the layout to expand with the content.

Since all these divs sit on top of each, they aren't really interacting with the div that has the content in it. Is the only way to make those expand to use JavaScript to detect the width and adjust on the fly or is there a better way to do it?

I'll be happy to supply some code if you all need me to but its a lot so I'll hold off on that for now.

Css Help For Simple Expanding Box

Similar Tutorials

View Content

I think that this is something really basic but I just haven't been able to put my finger on the problem. Can someone please point me in the right direction?

In IE 6 the cell background (as defined in CSS) or the table cell size is not correct, but it looks fine in FF.

The test page is: http://www.kdays.com/box/kerrin.htm

Two Layers Expanding Simultaneously

Similar Tutorials

View Content

I want to have a CSS layer that is a certain height, unless the content exceeds this height, in which case the layer will automatically expand. I have already done this before so that part is not the problem. The problem is I want to have another layer under this one. You will not be able to see this second layer if the content on the first layer does not exceed the pre-determined height of the first layer (it will have a different z-index). But I will have the background on the first layer set to no-repeat so that when the first layer is automatically expanded, you will see the second layer, which has a different background (that is its only purpose). However, I'm not sure how to make it so the second layer also expands automatically along with the first layer. Can someone help me? I hope this made sense.

Expanding/collapsing Menus

Similar Tutorials

View Content

I am just being scripting and have been messing with this problem for several hours and still have gotten no where at all so I was hoping for some assistance.

I am attempting to make my stacked links open upon mouseover to display all the sublinks beneath the main ones and then close one the mouse is moved away from that area. I have the main ones working, as that is easy, it is those others that have me stumped. I am using outset and inset boarders to make it appear as if a drawer is being pulled out to reveal the sub-links. Any advice would be great, thank you.

Center Div Not Expanding With Content

Similar Tutorials

View Content

Hi All,

I have the following layout. The problem I am having is when the "center" div has lots of text in it the text expands out of the "center" div. I would like the div to stretch with the content.

Code:

<div id="main">
	<div id="mainTop"></div>
	<div id="mainContent">
		<div id="left"></div>
		<div id="center">
			Lots and lots of text goes here
		</div>
		<div id="right"></div>
	</div><!-- end of maincontent -->
	<div id="mainBottom">
		<div id="left2"></div>
		<div id="center2"></div>
		<div id="right2"></div>
	</div>
</div>

CSS
Code:

html, body{ margin: 0px; padding: 0px; text-align: center; min-height: 100%;}
div{ border: 1px solid black;}

/* Hack for IE, Reset to 100% height */
html, body, #main, #mainContent, #left, #center, #right, #left2, #right2{
	height: 100%;
}

#left, #center, #right{
	height: 100%;
}
/* End IE Hack */

#main{
position: relative;
width: 100%;
min-height: 100%;
}

#mainTop{
margin: auto;
position: relative;
height: 210px;
width: 850px;
text-align: left;
background-color: yellow;
}

#mainContent{
margin: auto;
position: relative;
min-height: 100%;
width: 850px;
text-align: left;
}

#left{
position: absolute;
min-height: 100%;
width: 79px;
left: 0px;
background-color: yellow;
}

#center{
border: 1px solid red;
position: absolute;
width: 696px;
left: 79px;
background-color: #dcdbdc;
min-height: 100%;
}

#right{
position: absolute;
left: 775px;
width: 75px;
background-color: yellow;
}

#mainBottom{
margin: auto;
position: relative;
min-height: 146px;
width: 850px;
text-align: left;
}

#left2{
position: absolute;
min-height: 100%;
width: 79px;
left: 0px;
background-color: yellow;
}

#center2{
border: 1px solid red;
position: absolute;
width: 696px;
left: 79px;
background-color: yellow;
min-height: 100%;
}

#right2{
background-color: yellow;
position: absolute;
left: 775px;
width: 75px;
min-height: 100%;
}

Also shown he http://www.steudel.org/css/test.php

The yellow divs represent images that border the content. The whole layout is supposed to be able to stretch vertically. I'm not sure why the text is not stretching the center div.

TIA, Mark

[help]expanding Two <div> Columns As Same Length

Similar Tutorials

View Content

Alright, I am new to these forums since the other handful I have went through could not help me out.

Here is my situation, I have a layout I am creating for a final project, and I have it set up so that the navigation is in a left column and the content for the actual page is in a right column, right. Both are right next to eachother which you can see below in this image:

http://img232.imageshack.us/img232/...sitebug5la1.png

My issue is that once the content within the Right Column expands beyond the browser and creates a scroll bar, the left column no longer expands it's background image to match up.

All containers and elements have their height set to 100% that are involved.

HTML: Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/css; charset=ISO-8859-1" />
	<title>Digital Foundations Final Project</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="allcontent">
<!--PRINT LOGO-->
 <div id="logo_print"></div>
 

<!--LEFT COLUMN-->
<div id="left_column">



<!--NAVIGATION-->

		<ul>
		     <li id="home"><a href="index.html"></a></li>
		     <li id="students"><a href="students.html"></a></li>
		     <li id="faculty"><a href="faculty.html"></a></li>
		     <li id="facilities"><a href="facilities.html"></a></li>
		     <li id="maps"><a href="maps.html"></a></li>
		</ul>
<!--RIT LOGO-->
<div id="logo_rit"><a href="http://www.rit.edu"></a></div>

</div>

<!--RIGHT COLUMN-->
<div id="right_column">
<!--CONTENT-->
	<div id="header_home"></div>

<div id="content">


<p class="text">Fusce ut justo sit lectus. Duisque dolorem in non erat, congue nullam fermenterdiet imper velit. Nam rutrum velis ac, doloreet ames iacus por sit amet malestibus sempus. Vivamus dissim et leo, pede sit sit ametus eu malestie vehiculis nonummy a, rhoncus ipsum primis senean ligula, felis et, ac risus</p>

<p class="text">; In cubia tor varius met, venenatoque estibus et nunc vitae odio eget, loreet, blandis vulputate in, nunc ipsum. Nunc. Mauris. Suspendum. Nulla urna quam nunc. Nullam anteget dolorem in, vel, wisi. Nam primis varius. Quis quis nunc gravida. Vest eget hend ipsum sagittis, in et orci eu magna liberos</p>

<p class="text">Integet in dui aliquet. Morbi eleifendum. Quis ligula, magnisse bibero nisl pede, congue nec vulputate ipsum dolor. Nulla varius ipsum primis neque. Suspend ero liberos in accumsan quis nonummy condit ametus non luctus. Pellent posuere consequam quam rhoncus orna. Duis met lectus lectum wisi at a or</p>

<p class="text">atis pellus felit, erat turpiscing ris nullamcorper estibus non orci sempus. Classa ante in ornaretra tempus ac augue. Morbi ut neque. Sed sodalesuada sit a, cursus et dolor, aliquam et, diam rutrum sempus orci bibendis lor. Nam eu convallicies metuer leo. Vivamus erat. Vivamus sit lacus wisis sit a</p>

<p class="text">wisi. Sed ut, condissim turpis wisi. Aliquat libero. Cras dictus dictus in augue nunc. Donec, diam sed, eget, at ligula mollicies at eu wisi. Vestassa met diam varius. Quis parturpis. Nunc a mauristiquat faucibus sapibus a, magna arcu ad lacilis imper commodo et fermenas sed, phare. Alique euismod p</p>



</div>
</div>


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

CSS: Code:

html, body {
background-color: #262626;
margin: 0;
padding: 0;
height: 100%;
}

#allcontent { 
width: 800px;
margin: 0 auto 0 auto;
padding: 0;
height: 100%;
min-height: 100%;
}

#logo_print {
width: 702px;
height: 209px;
background-image: url(images/logo_main.png);
background-repeat: no-repeat;
margin: 0;
}

#logo_rit {
width: 204px;
height: 51px;
background-image: url(images/logo_rit.png);
background-repeat: no-repeat;
margin: 50px 0 10px 0;
}

#logo_rit a{
width: 204px;
height: 51px;
background-image: url(images/logo_rit.png);
display:block;
}



/*----LEFT SIDE OF PAGE----*/
#left_column{
background-image: url(images/BG_left.png);
background-repeat: repeat-y;
margin: 0;
width: 204px;
height: 100%;
float: left;
}


/*--NAVIGATION--*/
ul{
margin: 0;
padding: 0;
list-style: none;
}

li#home{
background-image: url(images/nav_home.png);

width: 205px;
height: 52px;
display: block;
}

li#home a{ 
background-image: url(images/nav_home.png);
background-position: 0 0;
height: 52px;
width: 205px;
display: block;
}

li#home a:hover{ 
background-image: url(images/nav_home.png);
background-position: 204px 0;
}


li#students{
background-image: url(images/nav_students.png);
background-repeat: no-repeat;
width: 205px;
height: 52px;
}

li#students a{ 
background-image: url(images/nav_students.png);
background-position: 0 0;
height: 52px;
width: 205px;
display: block;
}

li#students a:hover{ 
background-image: url(images/nav_students.png);
background-position: 204px 0;
}

li#faculty{
background-image: url(images/nav_faculty.png);
background-repeat: no-repeat;
width: 205px;
height: 52px;
}

li#faculty a{ 
background-image: url(images/nav_faculty.png);
background-position: 0 0;
height: 52px;
width: 205px;
display: block;
}

li#faculty a:hover{ 
background-image: url(images/nav_faculty.png);
background-position: 204px 0;
}

li#facilities{
background-image: url(images/nav_facilities.png);
background-repeat: no-repeat;
width: 205px;
height: 52px;
}

li#facilities a{ 
background-image: url(images/nav_facilities.png);
background-position: 0 0;
height: 52px;
width: 205px;
display: block;
}

li#facilities a:hover{ 
background-image: url(images/nav_facilities.png);
background-position: 204px 0;
}

li#maps{
background-image: url(images/nav_maps.png);
background-repeat: no-repeat;
width: 205px;
height: 52px;
}

li#maps a{ 
background-image: url(images/nav_maps.png);
background-position: 0 0;
height: 52px;
width: 205px;
display: block;
}

li#maps a:hover{ 
background-image: url(images/nav_maps.png);
background-position: 204px 0;
}
/*--END NAVIGATION--*/





/*----RIGHT SIDE OF PAGE--*/
#right_column{
background-image: url(images/BG_right.png);
background-repeat: repeat-y;
width: 498px;
float: left;
margin: 0;
height: 100%;
}
				
#header_home{
width: 498px;
height: 71px;
background-image: url(images/header_home.png);
}

#header_students{
width: 498px;
height: 71px;
background-image: url(images/header_students.png);
}

#header_faculty{
width: 498px;
height: 71px;
background-image: url(images/header_faculty.png);
}

#header_facilities{
width: 498px;
height: 71px;
background-image: url(images/header_facilities.png);
}

#header_maps{
width: 498px;
height: 71px;
background-image: url(images/header_maps.png);
}


#content {
width: 498px;
background-image: url(images/BG_right.png);
background-repeat: repeat-y;
}

p.text{
font-family: Times New Roman, Times, Palatino Linotype, Book Antiqua, Serif;
text-align: left;
padding: 10px 10px 10px 10px;
text-indent: 20px;
}

/*---Letter Linking--*/
p.letters{
font-family: Times New Roman, Times, Palatino Linotype, Book Antiqua, Serif;
text-align: center;
}

p.letters a{
font-family: Times New Roman, Times, Palatino Linotype, Book Antiqua, Serif;
text-align: center;
color: #FF6600;
}

p.letters a:hover{
color: white;
text-decoration: underline, overline;
}

/*---PROFILE IMAGE SETTINGS--*/
.profile{
float: left;
margin: 10px 10px 10px 10px;
width: 200px;
height: 200px;
}

.profile_text{
font-weight: normal;
font-family: Times New Roman, Times, Palatino Linotype, Book Antiqua, Serif;
text-align: left;
}

.bold{
font-weight: bold;
}

Both the CSS and XHTML are valid
Any help is much appreciated.

Expanding Menus Problem In Ie

Similar Tutorials

View Content

I have designed an expanding menu similiar to the one described he (URL address blocked: See forum rules)/cms/show/66.html.

The problem I am having is that I have a lot of menu items, so when it expands, the list of items is greater than the height of the containing element. In Firefox, this is not a problem, because the containing element seems to resize to show all of the items. In IE however, it does not resize. As a result, many of my items have expanded beyond the viewing region of the screen, without me being able to scroll down.

Is there any sort of way that I can to fix this, besides writing Javascript to manually change the height of the containing element every time a link is clicked?

Expanding Div's Vertically With Layers

Similar Tutorials

View Content

Ok, Im somewhat of a newb when it comes to CSS so forgive me if any of thise doesnt make sense.

Im writing a page that has 3 sections, a top-menu section, a middle dynamic section and a bottom static section.

Ive elected to use layers to display content in the middle section based on a mouseclick in the top section.

To do this Ive made used of a script that encloses the dynamic section in a div, with subsequent nested divs set to visibility: none until they are called to be displayed.

The issue that I am having is I am trying to position the bottom static section, that should always remain visible, below the middle section depending on the height of the midle section.

Essentially the bottom section should move vertically as the size of the midle section changes sizes.

The style that Im using is:

Code:

<style type="text/css">
#container { position:relative; width:495; height: 400px; z-index:100 }
.lyr { position:absolute; visibility:hidden; left:0; top:0; z-index:1 }
.layer {  }

</style>

This is an example of the code in the body:

Code:

<a href="#" onClick="swapLayers('lyr0'); return false"><font>Click to return to the Welcome Text</font></a><br />
<a href="#" onClick="swapLayers('lyr1'); return false"><font>Click to return to the Welcome Text</font></a><br />
<a href="#" onClick="swapLayers('lyr2'); return false"><font>Click to return to the Welcome Text</font></a><br />


<div id="container">
	<div id="lyr0" class="lyr">Layer 1</div>
	<div id="lyr1" class="lyr">Layer 2</div>
	<div id="lyr2" class="lyr">Layer 3<p> Continuing layer 3</p><p> Continuing layer 3</p></div>
	<div class="layer">Layer 4</div>
</div>

With the above example Layer 1-3 will display based on mouseclicks. Layer 4 should appear beneath the currently displayed layer, and re-position accordingly based on the size of the preceding DIV.

Does this make sense? Im not sure if Layer 4 should be nested inside the container div or below it. Thnx in advance for any help.

2 Column Layout Not Expanding

Similar Tutorials

View Content

I created a simple 2 column layout, by using floats. The problem I am running into with this layout, is when the right column's height expands; the left column's height does not expand. What do I need to do, to my code; too make both columns expand the to the same height; regardless of how much content is in each side?

CSS Code:
Original - CSS Code /* Document Settings - Begin */ body { text-align:center; /* for IE */ margin:0; background:silver url('bg_test2.5.jpg'); } /* Document Settings - End */ /* Layout Structure - Begin */ #wrapper { text-align:left; width:900px; margin:0 auto; border:solid 1px black; height:auto; overflow:auto; background:white; } #header { background: #000 url('ch_banner.JPG') no-repeat 50% 0%; height:146px; } #left_side { float:left; width:200px; background:#B22222; height:100%; border-right:solid 1px black; font-family:arial; } #rite_side { float:right; width:695px; background:white; height:100%; font-family:arial; color:#B22222; } #designer { text-align:left; width:900px; margin:0 auto; background:black; color:white; font-family:arial; font-size:14px; text-align:center; padding-top:3px; padding-bottom:3px; } /* Layout Structure - End */

  

 /* Document Settings - Begin */


  


 body {


 text-align:center; /* for IE */


 margin:0;


 background:silver url('bg_test2.5.jpg');


 }


  


 /* Document Settings - End */


  


 /* Layout Structure - Begin */


  


 #wrapper {


 text-align:left;


 width:900px;


 margin:0 auto;


 border:solid 1px black; 


 height:auto;


 overflow:auto;


 background:white;


 } 


 #header {


 background: #000 url('ch_banner.JPG') no-repeat 50% 0%;


 height:146px;


 }


 #left_side {


 float:left;


 width:200px;


 background:#B22222;


 height:100%;


 border-right:solid 1px black;


 font-family:arial;


 }


 #rite_side {


 float:right;


 width:695px;


 background:white;


 height:100%;


 font-family:arial;


 color:#B22222;


 }


 #designer {


 text-align:left;


 width:900px;


 margin:0 auto;


 background:black;


 color:white;


 font-family:arial;


 font-size:14px;


 text-align:center;


 padding-top:3px;


 padding-bottom:3px;


 }


  


 /* Layout Structure - End */

HTML Code:
Original - HTML Code <div id="wrapper"> <div id="header"></div> <div id="left_side"> <div id="nav"> <ul> <li><a href="#1">Our Tradition</a></li> <li><a href="#2">Menu</a></li> <li><a href="#3">Wines</a></li> <li><a href="#4">Events</a></li> <li><a href="#5">Specials</a></li> <li><a href="#6">Days & Hours</a></li> <li><a href="#7">Contact Information</a></li> </ul> </div> </div> <div id="rite_side"> Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here Line of Text Here </div> </div> <div id="designer"> </div>

  
<div id="wrapper">
<div id="header"></div>

<div id="left_side">
<div id="nav">
<ul>
<li><a href="#1">Our Tradition</a></li>
<li><a href="#2">Menu</a></li>
<li><a href="#3">Wines</a></li>
<li><a href="#4">Events</a></li>
<li><a href="#5">Specials</a></li>
<li><a href="#6">Days & Hours</a></li>
<li><a href="#7">Contact Information</a></li>
</ul>
</div>
</div>

<div id="rite_side">
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>

Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>

Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>

Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>

Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>

Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>

Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>

Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>

Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>

Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>

Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>

Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>

Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>

Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>

Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>

Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>

Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
Line of Text Here<br/>
</div>

</div>

<div id="designer">

</div>