Programming Forums > Web Development and Design > HTML / XHTML / CSS

MrMan9879 · Feb 27th, 2008, 10:30 PM

Hello guys, I'm having a bit of a problem with formatting divs for my website, and I would like some help with this. I've got a nav bar div that I would like to extend all the way to the bottom of the screen, so i assumed that height:100%; would be sufficient enough, but since testing it, I've discovered that it isn't. I've also read about it online, and apparently there are some errors with this.

I've tried setting the height element of the body, and all parent divs to 100% also, but I haven't had any luck. This is for a website I'm designing for a competition and also probably my school. <URL snipped>

Note: The site will probably not look as it is intended unless you're on Firefox at 1024x768 resolution as I'm not really done making it, and a lot of its scripts (ie. the poll on the left) are not working yet.

mrynit · Feb 28th, 2008, 2:05 AM

post code or a valid URL

Ooble · Feb 28th, 2008, 5:53 AM

Try setting the html element's height to 100% too. Some browsers need it, some don't.

mrynit · Feb 28th, 2008, 7:01 AM

Quote:

Originally Posted by Ooble

Try setting the html element's height to 100% too. Some browsers need it, some don't.

insn't that a hack?

Ooble · Feb 28th, 2008, 6:28 PM

Nope. Some browsers treat html as a rendering element, and some don't. I don't know whether the W3C tells them to or not, but it's unimportant - it's hardly hacky.

mrynit · Feb 28th, 2008, 6:41 PM

I thouhgt desinging to specific browsers was bad... of course the most popular browser doesn't follows W3C standards.

Ooble · Feb 28th, 2008, 7:58 PM

Quote:

Originally Posted by mrynit

I thouhgt desinging to specific browsers was bad... of course the most popular browser doesn't follows W3C standards.

Which is why it's accepted, if not ideal. Just get your website working in all browsers: how you do it is irrelevant.

MrMan9879 · Mar 2nd, 2008, 10:50 PM

There is a change when I add height:100; to the HTML element, but it isn't the change I was looking for. I will show you guys my code.

index.php

(Toggle Plain Text)

<html>
  <head>
  ...
  </head>
  <body>
     <div id="container">
           ...
           <div id="leftBar">
               ...
           </div>
      ...
      </div>
   </body>
</html>

stylesheets

(Toggle Plain Text)

html {
	height:100%;
}
body {
	/* Code for the body element */
	font-family: Arial;
	font-size: 13px;
	margin:0 0 0 0;
	padding:0;
	background-color:#EEEEEE;
	height:100%;
}

...

#container {
	/* Code for the entirety of the page... contains the page */
	margin:0;
	border:thin;
	border-color:#000000;
	text-align:left;
	height:100%;
}

...

#leftBar {
	/* Code for the left sidebar */
	height:100%;
	margin-top:0;
	margin-bottom:0px;
	padding-left:5px;
	margin-right:20px;
	padding-top:5px;
	float:left;
	width:19.5%;
	height:100%;
	background-image: url(../img/sideBar.jpg);
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	color:#000000;
	overflow:visible;
}

I removed large chunks of what I believed to be unimportant code to this situation. I don't know if this code will help, but I still can't get it to work how I would like it to.

MrMan9879 · Mar 4th, 2008, 1:07 AM

Another problem I'm having is getting the layout to work properly in all browsers. My sidebar doesn't reach the top on any browser I've tested other than Firefox, and on IE and Opera, the <hr /> tags that I have dividing news posts don't seem to be lining up how I'd like. I'll add my url to my signature if people would like to take a look.

If you do look, I'd suggest viewing it on Firefox at 1024x768 to see it how it's intended.

privateD.lister · Mar 4th, 2008, 3:40 PM

is this comp of which you speak being the thinkquest?

Feb 27th, 2008, 10:30 PM	#1
MrMan9879 Programmer Join Date: Sep 2005 Location: Nanaimo, BC, Canada Posts: 97 Rep Power: 0	XHTML/CSS Div formatting problem Hello guys, I'm having a bit of a problem with formatting divs for my website, and I would like some help with this. I've got a nav bar div that I would like to extend all the way to the bottom of the screen, so i assumed that height:100%; would be sufficient enough, but since testing it, I've discovered that it isn't. I've also read about it online, and apparently there are some errors with this. I've tried setting the height element of the body, and all parent divs to 100% also, but I haven't had any luck. This is for a website I'm designing for a competition and also probably my school. <URL snipped> Note: The site will probably not look as it is intended unless you're on Firefox at 1024x768 resolution as I'm not really done making it, and a lot of its scripts (ie. the poll on the left) are not working yet. Last edited by Ancient Dragon; Feb 28th, 2008 at 12:05 AM. Reason: removed URL

Feb 28th, 2008, 2:05 AM	#2
mrynit Hobbyist Programmer Join Date: Mar 2006 Location: WA, USA Posts: 342 Rep Power: 3	Re: XHTML/CSS Div formatting problem post code or a valid URL __________________ i dont know much about programming but i try to help

Feb 28th, 2008, 5:53 AM	#3
Ooble I eat cake for breakfast. Join Date: Jul 2004 Location: In my box. Posts: 4,434 Rep Power: 9	Re: XHTML/CSS Div formatting problem Try setting the html element's height to 100% too. Some browsers need it, some don't. __________________ Me :: You :: Them

Feb 28th, 2008, 6:28 PM	#5
Ooble I eat cake for breakfast. Join Date: Jul 2004 Location: In my box. Posts: 4,434 Rep Power: 9	Re: XHTML/CSS Div formatting problem Nope. Some browsers treat html as a rendering element, and some don't. I don't know whether the W3C tells them to or not, but it's unimportant - it's hardly hacky. __________________ Me :: You :: Them

Feb 28th, 2008, 6:41 PM	#6
mrynit Hobbyist Programmer Join Date: Mar 2006 Location: WA, USA Posts: 342 Rep Power: 3	Re: XHTML/CSS Div formatting problem I thouhgt desinging to specific browsers was bad... of course the most popular browser doesn't follows W3C standards. __________________ i dont know much about programming but i try to help

Mar 2nd, 2008, 10:50 PM	#8
MrMan9879 Programmer Join Date: Sep 2005 Location: Nanaimo, BC, Canada Posts: 97 Rep Power: 0	Re: XHTML/CSS Div formatting problem There is a change when I add height:100; to the HTML element, but it isn't the change I was looking for. I will show you guys my code. index.php (Toggle Plain Text) <html> <head> ... </head> <body> <div id="container"> ... <div id="leftBar"> ... </div> ... </div> </body> </html> <html> <head> ... </head> <body> <div id="container"> ... <div id="leftBar"> ... </div> ... </div> </body> </html> stylesheets (Toggle Plain Text) html { height:100%; } body { /* Code for the body element / font-family: Arial; font-size: 13px; margin:0 0 0 0; padding:0; background-color:#EEEEEE; height:100%; } ... #container { / Code for the entirety of the page... contains the page / margin:0; border:thin; border-color:#000000; text-align:left; height:100%; } ... #leftBar { / Code for the left sidebar / height:100%; margin-top:0; margin-bottom:0px; padding-left:5px; margin-right:20px; padding-top:5px; float:left; width:19.5%; height:100%; background-image: url(../img/sideBar.jpg); border-right: 1px solid #000000; border-bottom: 1px solid #000000; color:#000000; overflow:visible; } html { height:100%; } body { / Code for the body element / font-family: Arial; font-size: 13px; margin:0 0 0 0; padding:0; background-color:#EEEEEE; height:100%; } ... #container { / Code for the entirety of the page... contains the page / margin:0; border:thin; border-color:#000000; text-align:left; height:100%; } ... #leftBar { / Code for the left sidebar */ height:100%; margin-top:0; margin-bottom:0px; padding-left:5px; margin-right:20px; padding-top:5px; float:left; width:19.5%; height:100%; background-image: url(../img/sideBar.jpg); border-right: 1px solid #000000; border-bottom: 1px solid #000000; color:#000000; overflow:visible; } I removed large chunks of what I believed to be unimportant code to this situation. I don't know if this code will help, but I still can't get it to work how I would like it to.

Mar 4th, 2008, 1:07 AM	#9
MrMan9879 Programmer Join Date: Sep 2005 Location: Nanaimo, BC, Canada Posts: 97 Rep Power: 0	Re: XHTML/CSS Div formatting problem Another problem I'm having is getting the layout to work properly in all browsers. My sidebar doesn't reach the top on any browser I've tested other than Firefox, and on IE and Opera, the <hr /> tags that I have dividing news posts don't seem to be lining up how I'd like. I'll add my url to my signature if people would like to take a look. If you do look, I'd suggest viewing it on Firefox at 1024x768 to see it how it's intended.

Mar 4th, 2008, 3:40 PM	#10
privateD.lister multigamer Join Date: Mar 2008 Location: thelandofnoddy who has an addictio to vista, why has he becom sucha warped creature asthus?<("<)kirb Posts: 13 Rep Power: 0	Re: XHTML/CSS Div formatting problem is this comp of which you speak being the thinkquest?

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Challenging Programming Problem - "Pinball Ranking"	Sane	Coder's Corner Lounge	38	Jan 15th, 2008 6:16 PM
Problem solving	ReggaetonKing	Software Design and Algorithms	7	Jan 4th, 2008 2:49 PM
problem processing file into a char array	csrocker101	C++	1	May 9th, 2007 12:50 AM
cgi/perl script + IE problem	joyceshee	Perl	2	Jan 24th, 2006 12:10 PM
problem with user defined class mixed with functions	willj729	C++	4	Oct 9th, 2005 4:26 PM

Programming Forums > Web Development and Design > HTML / XHTML / CSS

XHTML/CSS Div formatting problem