[SOLVED] Div Error (Problem with min-height command)

[Chezshire]

Hi all,

  I'm a new working on my school project which is to design a website, and I have a lot of it working properly and am very thankful for the tutorials and advice I've found on this site. Currently I'm having a small problem getting some of my pages to divs to fill to the full space necessary to prevent the background color from coming through (I'll be adding a fiery background image later per my client's request). If you look at this link you'll see the  that the left links column isn't going all the way down to meet the footer. http://xpg.us/xSCC/xFinalP/dinnersforsinners/template/eats/eats2.html

 

Here is the css for the divs (I've separated my CSS out in to divs, then styles, then specific page styles to help me understand what is doing what and minimize the effects of cascades & Inheritance as I learn).

* { 
padding: 0; 
margin: 0; 
}

#wrapper { 
width: 900px;
margin: 0 auto;
}

#header {
width: 900px; 
height: 168px;

/*float: left;*/
}

#indicia {	 
 /*background-image:url('images/bkg/bkg_01.gif');
 background-repeat:no-repeat;
 background-position:top right;*/

 width: 217px; 
 height: 168px;

 float: left;
}

#banner { 
 /*background-image:url('images/bkg/bkg_02.gif');
 background-repeat:no-repeat;
 background-position:top right;*/

 width: 683px;
 height: 135px;

 float: right;
 display: inline;
}

#nav_container { 	 
 width: 683px;
 height: 33px;

 float: left;

 z-index: 1;
}



#leftcolumn { 
background: #aa9f4e;

width: 188px;
min-height: 602px;

margin-left: 29px;

float: left;
}


#rightcolumn { 
background: #fffff1 url('../images/bkg/bkg_leftcolumn.jpg') no-repeat bottom left;

width: 649px; 
min-height: 602px;

border-right-style:solid;
border-width:5px;
border-color:#aa9f4e;


float: left;
display: inline;
}

#recipe { 
width: 440px;
margin-left: 10px;

float: left;
}

#ingredients {
text-align: center;
width: 185px;
margin-right: 10px;
    
float: right;
}

	/* Only applies to Schedule Page */
	#calendar { 
	width: 400px;
	margin-left: 10px;

	float: left;
	}


#footer { 
width: 900px;
height: 43px;

background-image:url('../images/bkg/bkg_06.gif');
background-repeat:no-repeat;
background-position:top right;

clear: both;
}

#login {
text-align: center;

width: 188px;
height: 43px;

margin-left: 29px;

float: left;
}

div.login {
min-height: 43px;
display: table-cell;
vertical-align: middle;
}

#legal {
text-align: center;

width: 683px;
height: 43px;

float: right;
display: inline;
}

#badgesOfHonor
{
text-align: center;

margin-top: 40px;

}

 

[haku]

Interesting to see the progression of your site. It's starting to look nice! I can code, but I can't design at all, horrible design sense, so I'm envious when I see people who can put together a decent design.

 

Anyways,  The problem with CSS is that it is not able to set sizes dynamically based on on other elements. Elements can only know their own size. There are two ways you can deal this. If you know that the left sidebar will never have more content than the content column, then you can wrap the left column div around the content div, so that as the content div expands, the left div will expand as well. This is the more difficult solution for someone who has never done it, but allows for variable width layouts. If the left column may be longer at times, and/or your layout isn't of variable width, then you can use the 'faux columns' technique. It's a little too long to explain in one post, so if you google it, you will be able to find more info on the topic.

[ngreenwood6]

If you dont already have it you need to download this right now. Firefox, Web Developer Tools(add-on), and most importantly firebug(add-on). It will make your life alot easier if you use these tools. Any way looking at your page I would probably do something like this to make it easier:

 

<div id="wrapper">
  <div id="head_wrapper">
       <div id="header">
  </div>
  <div id="content_wrapper">
       <div id="left_column">
       </div>
       <div id="right_column">
       </div>
  </div>
  <div id="footer">
  </div>
</div>

 

Now for the css it would look something like this:

 

#wrapper{
   margin:0 auto;
   width:900px;
}
#header_wrapper{
   width:900px;
}
#content_wrapper{
   width:800px;
}
#left_column{
   width:200px;
}
#right_column{
   width:600px;
}

 

Now that they are split into containers you have alot more control over what can be done with your content. If you notice the content wrapper is set to 800px instead of 900 giving it that smaller look. You could then set the background color in that container. At the same time you have control over being able to set the right_columns background as well. Hopefully that helps if you have any questions just ask.

[haku]

Great of you to help the guy out putting all that code up there.

 

The only issue with the above code is that if the right column has more content than the left column, the left column will not extend down as far as the right column.

 

But, this is a perfect setup for the faux columns technique. What you do is apply a background image to the content wrapper div, that is the width of the entire content wrapper, and has two colors in it - one for the left column and one for the right column. Set this background image to be about 5px in height, and the width of the content wrapper div. Then set the background image to repeat along the y-axis. Since the content-wrapper div will always be the full height, as a result the background image will repeat, making it look as if the two columns are extending all the way to the bottom of the page, even if they are not.

[ngreenwood6]

I love to help out people who take a genuine effort to do somethng.

 

The only issue with the above code is that if the right column has more content than the left column, the left column will not extend down as far as the right column.

 

That is the point of this code though. His right column is going to have more content. but no matter what if he sets the background color in the container he will be fine.

[Chezshire]

Hi Guys,

  First, WOW, I feel so stupid as I feel that I do know enough that I should have thought of placing the left and right columns in a div and using that to handle the expansion as Haku suggests (not that I exactly understand how to do that, but I intend to google the hell out of it as Haku suggests. So, asways tremendous hats off to Haku (who has the best-est sig name ever in my opinion))

  Second, thank you to ngreenwood6 for the firebug/firefox web dev tools. I actually have downloaded these, but I'd been told they were only for dealing with javascript issues by my javascript teacher. That said, I don't know how to use them and would appreciate being pointed to a good tutorial (Also I think i accidently sent a thank you for this tip to Haku by accident - ooops - i'm dyslexic and got confused. So I still wish Haku thanks but I also want to extend thanks to ngreenwood6 for the suggestion).

  I've got errands to run today, but when I'm done I'll be exploring everything the pair of you genius suggested and thank you for your help and look forwards to the day when I'll be able to help pay your kindness forward.

  Thanks folks!

[ngreenwood6]

Ok so I dont know of any tutorials for firebug(figured it all out on my own) so I am going to just help you off the top of my head. Firebug can be used to troubleshoot javascript issues as well as help with styling a site. Everything that you do in firebug happens while you are in the browser and updates the page that you are on. So for instance one this page through firebug you can remove all the styling to this page and even give it a completely new style. The changes do not save so when you hit the refresh button all the changes will be removed and the page will look the original again.

 

First I will go over javascript. If you click the little bug in the lower right hand side it will pop up firebug. Once that is open you will have some tabs at the top along with a few buttons. The one we are interested for this one will be the console tab. Go ahead and click the drop down button next to the word console. Make sure AT LEAST these options are checked:

• Enabled
  
• Show Javascript Errors
  
• Show Javascript Warnings
  
• Show XMLHttpRequests

[*]Show Stack Trace With Errors

Now that these are checked we can use the console to troubleshoot javascript problems as well as run javascript right inside of our browser. The console portion of the window will show you javascript problems as well as POST or GET's. So if you leave that window open and browse around the web with it open you will see stuff happening down there (not all the time so browse around pretty good). I am not going to go much in detail about that because there is a lot to that. But I do want to show you some thing really cool In order to run javascript you will see a little bar on the right that has buttons that say "Run","Clear","Copy". Right above that I want you to type this:

alert("hello javascript");

If you did this correctly you should have noticed an alert box with the text hello javascript in it. So if you need to do any javascript testing you can simply put some code in here and test it as it runs realtime.

 

Ok now we are going to go over styling which is pretty big in firebug and can save you tons of time. With firebug open I want you to click on the HTML tab. In there you will see the outline of the page you are on. You can click the + signs and expand the elements so you can see the elements inside of the one you are on. Now a cool feature about this is that if you hover over a div it will actually highlight it on the screen if it is there. Try hovering over some divs just to see the screen highlighted. Now with the html tab open you may also see an edit button right below the main tabs all the way to the left. If you click that you can edit the html for the element that you selected in the window below. And like I said it all updates real time, so as you are typing you will start seeing the page change. Im not going to go in much detail about that because you can try it out and play with it. Now one of the best features is on the html tab, the right side has a style tab. That tab is the actual css that is being used on the element that you have highlighted. So on this page if you pull up firebug and click on body on the left you will see properties for it on the right. You can also change these properties as well as add properties to this window. So you can try playing around with the colors on this page and see what it does.

 

My favorite feature of firebug is the option to select elements on the page. To do this you will see a rectangle looking thing with a cursor going into it. If you click that and move your cursor to the page you will see what i mean. It highlights whatever you are hovering. It will then allow you to click it and select the element (if you click a button with this enabled it doesnt click the button just hightlights it). This is the best tool becuase now you can find the issue with certain elements on a page.

 

To end this I would like to say that I would also download the web developer toolbar like I said before I think. In this toolbar it also has some really nice features like a ruler, viewing generated source, seeing if there are any javascript errors, seeing if there are any css errors, and tons more. If you have any questions feel free to ask.

[haku]

who has the best-est sig name ever in my opinion

 

Thanks.... but what's a sig name?

[Chezshire]

Hey Guys -- As always WOW and THANK YOU for the advice, as always very appreciated; Today I am settling in and spending the day exploring the firebug tool and firefox webdev toolkit (Is that the right name?). I am also exploring the Safari webdev toolkit as well so that I will have more then one set in my 'toolbox' Thanks for the direction and advice!

 

Secondly, huge thanks to ngreenwood6 for the notes on firefox - I'm sure that a few people out there besides me will find this useful. Thank you very very much.

 

Third, based on your suggestions, I've created a div to place the left and right column divs which i gave a background repeating image to on the y access. It's working very nicely in firefox, opera and safari (I can't test in Internet Exploder as I work on a mac, but when I go to school on monday I will test it in I.Explorder).

 

Thank you so so so much once again for the kindly help (my bed room walls don't have that big head banging dent in them that I thought i would pound in to them earlier this week) Thanks for all the help - you guys are very awesome - love this place.

 

Chez

 

PS. Haku, a 'sig' is short for a signiture/sig-name or so i've been told. So my sig is 'Chezshire', yours is 'Haku'

[FaT3oYCG]

also i find it helpful to have a bookmark in firefox with the location set as: javascript:resizeTo(800,600); all the other perameters are up to you but it helps for testing what your page would look like on an 800 x 600 res screen .

 

EDIT:

 

set the location to this to center and set to 800 x 600: javascript:resizeTo(800,600);self.moveTo(((document.body.clientHeight()-800)/2),((document.body.clientWidth()-600)/2));

[haku]

Ahh, thanks.

 

Actually haku is one of the readings for the Japanese kanji '白' (you will only see that character if you have East Asian fonts installed on your computer). That kanji means 'white', and I'm as white as they come! So that's why I have that name.

[Chezshire]

Hi Guys,

  Once again thanks to everyone -- and watch for it as i stumbled on something new as I had a goofy idea using iframes, my question will be up shortly and I think you will find it interesting (I hope ). Regarding  FaT3oYCG statement (' i find it helpful to have a bookmark in firefox with the location set as: javascript:resizeTo(800,600);') Are you FaT3oYCG saying that you can set a specific window in firefox with unique properties like 'view this at 800 x 600 pxls' as that is what I'm taking this to be.

 

If so that is both amazing to me and really cool. I just want to make sure that I'm understanding this as it's a bookmark so i would have thought it was to a specific page, not to a dimension or whatever.

 

Looking forwards to your comments - thanks once again everyone

-Chez

[haku]

You can get the web developer toolbar for firefox that allows you to resize your browser to preset sizes you choose.