Jump to content

Cannot get div height 100%

bigcheez

By bigcheez
in CSS

Recommended Posts

bigcheez Newbie

bigcheez

Posted
Posted

I am trying to get one div to fill in its height to match the parent div.The div in question has the id of content.What am I doing wrong?http://bobbysshoestore.com/bobbysshoestore2.css

html,body{background-image:url('img/bg.gif');margin:0;padding:0;}.no_css{display:none;}#banner{background-image:url('img/banner.png');height:125px;position:absolute;width:800px;margin-left:-400px;left:50%;}#wrapper{position:absolute;top:125px;width:800px;min-height:650px;margin-left:-400px;left:50%;}#content{position:relative;left:225px;width:575px;/* height:100%; <------------------------------------- need help here <----------------------- */}/* begin navigation bar */.navbar{display:block;position:absolute;width:225px;}#spacer{background-image:url('img/blank.png');height:30px;}#filler{background-image:url('img/blank.png');top:270px;bottom:350px;}#footer{background-image:url('img/footer.png');bottom:0;height:350px;}/* begin buttons */.btn1{background-position:0 180px;height:60px;}.btn1:hover{height:60px;background-position:0 0px;}.btn0{height:60px;background-position:0 60px;}.btn0:hover{height:60px;background-position:0 120px;}#about{background-image:url('img/btn/about.png');top:30px;}#contact{background-image:url('img/btn/contact.png');top:90px;}#links{background-image:url('img/btn/links.png');top:150px;}#location{background-image:url('img/btn/location.png');top:210px;}

http://edit.bobbysshoestore.com/index2.php5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>  <head>	<link rel="stylesheet" type="text/css" href="bobbysshoestore2.css"/>	<meta name="robots" content="index,follow" />	<meta name="keywords" content="redwing,shoes,boots,carhartt,clothing,worx" />	<title>Bobby's Shoe Store</title>  </head>  <body>	<div id="banner" align="center"><h1 class="no_css">Bobby's Shoe Store</h1></div>	<div id="wrapper" style="border-style:solid;border-width:1px;border-color:black">		<span id="spacer" class="navbar"><hr class="no_css"/></span>		<span class="no_css">< </span>		<a id="about" class="navbar btn1" href="about.php" target="_self"><span class="no_css">ABOUT</span></a>		<span class="no_css"> > < </span>		<a id="contact" class="navbar btn0" href="concact.php" target="_self"><span class="no_css">CONTACT</span></a>		<span class="no_css"> > < </span>		<a id="links" class="navbar btn0" href="links.php" target="_self"><span class="no_css">LINKS</span></a>		<span class="no_css"> > < </span>		<a id="location" class="navbar btn0" href="location.php" target="_self"><span class="no_css">LOCATION</span></a>		<span class="no_css"> ></span>		<span id="filler" class="navbar"><hr class="no_css"/></span>		<span id="footer" class="navbar"><hr class="no_css"/></span>	  [color="#FF0000"]<div id="content"[/color] style="border-style:solid;border-width:1px;border-color:black;"><?php include("inc/about.php"); ?></div>	</div>  </body></html>

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted 
	  [color="#FF0000"]<div id="content"[/color] style="border-style:solid;border-width:1px;border-color:black;"><?php include("inc/about.php"); ?></div>

that line seems odd. Is this incorrectly placed BBC? Also, why would you comment out height: 100% if that's what you're trying to test for? Or did you only do that for this post? :)btw, you should validate your code too... Heading tags don't self close themselves, and is even made more confusing when placed within an inline element like a span. A few more things to add but we'll start off small.
Link to comment
Share on other sites
bigcheez Newbie

bigcheez

Posted
  • Author
Posted
that line seems odd. Is this incorrectly placed BBC?
It was misplaced bbcode, tried highliting stuff inside the code tag which did not work and forgot to erase those particular tags
Also, why would you comment out height: 100% if that's what you're trying to test for? Or did you only do that for this post? :)
Because it made no difference if it were commented out or not, that was my problem area
btw, you should validate your code too...
Thought to myself 'validate, schmalidate'. But did it anyway and fixed what w3c validator complained about and what do you know, my problem area seemed to get fixed without touching it, sorry I doubted you
Heading tags don't self close themselves, and is even made more confusing when placed within an inline element like a span.
What heading tags? Do you mean the hr tags? Those are for horizontal rules. They are causing me some small problems and I am starting another topic relating to that.
A few more things to add but we'll start off small.
I'm game ... what are your thoughts?
Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

sorry my bad, they were horizontal rule tags. I think you're height isn't working because the parent div of content is wrapper, who's position has been set to absolute, meaning it's been taken out of the normal page flow. Could be part of the issue. Some other things: 1) Why do you use the no_css class? 2) I would put all your styles inside the stylesheet3) Consider using sprites for pre-loading your images and caching them (for the nav menu). Or maybe even use an <ul> in conjunction with4) I would consider using something other than absolute positioning for such a simple layout.5) target="_self"? :)

Link to comment
Share on other sites
bigcheez Newbie

bigcheez

Posted
  • Author
Posted
1) Why do you use the no_css class?
Everything under the no_css class gets replaced by something graphic. I want to make easy to have a text-only page just by pulling out the stylesheet.
2) I would put all your styles inside the stylesheet
The only styles not in the stylesheet are the inline styles that give the divs a visible border for debugging purposes.
3) Consider using sprites for pre-loading your images and caching them (for the nav menu). Or maybe even use an <ul> in conjunction with
Maybe you can enlighten me ... might be over my head :)
4) I would consider using something other than absolute positioning for such a simple layout ... I think you're height isn't working because the parent div of content is wrapper, who's position has been set to absolute, meaning it's been taken out of the normal page flow. Could be part of the issue.
I did speak too soon about my problem being solved, it is not. I still cannot get the content div to 100% height. How else do I center the wrapper div without using absolute positioning?
5) target="_self"? :)
That was actually supposed to be target="_top" to make links break out of frames (holdover from oldschool html :)) I yanked it anyway 'cause the xhtml validator did not like it, no big lossupdated and validated xhtml:http://edit.bobbysshoestore.com/index2.php5
<!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">  <head>	<link rel="stylesheet" type="text/css" href="bobbysshoestore2.css"/>	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	<meta name="robots" content="index,follow" />	<meta name="keywords" content="redwing,shoes,boots,carhartt,clothing,worx" />	<title>Bobby's Shoe Store</title>  </head>  <body>	<div id="banner"><h1 class="no_css">Bobby's Shoe Store</h1></div>	<div id="wrapper" style="border-style:solid;border-width:1px;border-color:black">		<span id="spacer" class="navbar"><span class="no_css"><br/>~ ~ ~<br/></span></span>		<span class="no_css">< </span>		<a id="about" class="navbar btn1" href="about.php"><span class="no_css">ABOUT</span></a>		<span class="no_css"> > < </span>		<a id="contact" class="navbar btn0" href="concact.php"><span class="no_css">CONTACT</span></a>		<span class="no_css"> > < </span>		<a id="links" class="navbar btn0" href="links.php"><span class="no_css">LINKS</span></a>		<span class="no_css"> > < </span>		<a id="location" class="navbar btn0" href="location.php"><span class="no_css">LOCATION</span></a>		<span class="no_css"> ></span>		<span id="filler" class="navbar"><span class="no_css"><br/>~ ~ ~<br/></span></span>		<span id="footer" class="navbar"><span class="no_css"><br/>~ ~ ~<br/></span></span>	  <div id="content" style="border-style:solid;border-width:1px;border-color:black;"><?php include("inc/about.php"); ?></div>	</div>  </body></html>

validated stylesheethttp://edit.bobbysshoestore.com/bobbysshoestore2.css

html,body{background-image:url('img/bg.gif');margin:0;padding:0;}.no_css{display:none;}#banner{background-image:url('img/banner.png');height:125px;position:absolute;width:800px;margin-left:-400px;left:50%;}#wrapper{position:absolute;top:125px;width:800px;min-height:650px;margin-left:-400px;left:50%;}#content{position:relative;left:225px;width:575px;height:100%; /* <---------- NEED HELP HERE <----------- */}/* begin navigation bar */.navbar{display:block;position:absolute;width:225px;}#spacer{background-image:url('img/blank.png');height:30px;}#filler{background-image:url('img/blank.png');top:270px;bottom:350px;}#footer{background-image:url('img/footer.png');bottom:0;height:350px;}/* begin buttons */.btn1{background-position:0 180px;height:60px;}.btn1:hover{height:60px;background-position:0 0px;}.btn0{height:60px;background-position:0 60px;}.btn0:hover{height:60px;background-position:0 120px;}#about{background-image:url('img/btn/about.png');top:30px;}#contact{background-image:url('img/btn/contact.png');top:90px;}#links{background-image:url('img/btn/links.png');top:150px;}#location{background-image:url('img/btn/location.png');top:210px;}

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

its real easy to center a block level element. Give it 

{  margin: 0 auto;}

really not necessary (or practical) to be using positioning for something like what you are trying to do.I'm still lost about your rational for the "no_css" class. All it does is change the display property to none. For instance, in the nav "menu", why don't you just leave out the text and get rid of those spans!? I don't get what these comments either: "replaced by something graphic" and "have a text-only page just by pulling out the stylesheet"? :)edit: I meant to bring this up earlier. In properly structured documents, there really shouldn't be a need for "spacer" divs/spans/whatever. That's what the box model is for. Perhaps a review of the CSS tutorials on here may clear some things up for you and potentially make your life a lot easier.

Link to comment
Share on other sites
bigcheez Newbie

bigcheez

Posted
  • Author
Posted
its real easy to center a block level element. Give it 
{  margin: 0 auto;}

really not necessary (or practical) to be using positioning for something like what you are trying to do.

Thanks, I now have the divs positioned and filling out how I want them
I'm still lost about your rational for the "no_css" class. All it does is change the display property to none. For instance, in the nav "menu", why don't you just leave out the text and get rid of those spans!? I don't get what these comments either: "replaced by something graphic" and "have a text-only page just by pulling out the stylesheet"? :)
I thought it was clear. For normal web browsers, the full graphic version will be rendered. For some instances I want a text-only version. To do this I planned on leaving the page as is except to omit the link to the stylesheet. Can I assume this is bad practice? How else would one do this without creating completely separate pages?
I meant to bring this up earlier. In properly structured documents, there really shouldn't be a need for "spacer" divs/spans/whatever. That's what the box model is for. Perhaps a review of the CSS tutorials on here may clear some things up for you and potentially make your life a lot easier.
I have reread the box model tutorial here. The spacer in question (i assume you are referring to <span id="spacer" ... </span>) is part of the graphic or text idea. The graphic version has a background image that grows with the page, and in the text version it is just a visual separator.
Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

How are you going to keep all your positioning and all the other important things you have in your stylesheet if you remove it? I guess you could just have separate stylesheet's using conditional statements and browser sniffing in javascript. What's the text only version for anyway? Mobiles?btw, are you still using absolute positioning?

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...