Jump to content
xisto Community
RJM

100%x100% Table With filler cells on the bottom and right.

Recommended Posts

I'm laying out my site and I'm trying to come up with a layout like the one in this sketch I did:

Posted Image

Should I use Div, Frames, or Tables? Can I do this using only CSS and HTML? Or do I need to write a script?

 

Also the box on the right will have an x-repeat image across the top 25px tall and the rest a full tile background. Do I need to split it with a 25px tall cell?

 

First responder with working solution gets my manginity.

Share this post


Link to post
Share on other sites

Tables should never be used for layout. Tables are there for tabular data, not for laying pages out.Frames are somewhat inaccessible and outdated considering current methods for accomplishing the same thing, although there is nothing specifically wrong with them.I would recommend using divs to make the layout. They can be fully styled with HTML and CSS, and no scripting would be required.For the box on the right, the CSS for using two background images isn't fully supported yet, so I would add a 25px tall bar at the top for your first image.

Share this post


Link to post
Share on other sites

I tried with div, but I get problems with some things. Like what width do I set the right box at? 100% and it's 100%+800px off to the side and I get a scrollbar going way out in right field.And same with the bottom box.

Share this post


Link to post
Share on other sites

Here's what I have:

}#SiteHolder {	position:absolute;	width:100%;	height:100%;	z-index:1;}#BannerDiv {	position:relative;	width:100%;	height:92px;	z-index:1;	left: 0;	top: 0;}#ContentDiv {	position:relative;	width:100%;	height:808px;	z-index:1;	left: 0px;	top: 0px;}#BkgDiv {	position:relative;	width:767px;	height:808px;	z-index:2;}#RightbarDiv {	position:relative;	float:right;	z-index:2;	background-image: url(images/sky-bkg.gif);}#RightShadow {	position:relative;	height:25px;	z-index:3;	background-image: url(images/shadow.gif);}#FooterDiv {	position:relative;	width:100%;	z-index:1;	background-image: url(images/tile.gif);	top: 900px;	visibility: inherit;}--></style></head><body><div id="SiteHolder">	<div id="BannerDiv" style="background-color:#000000">		<img src="images/Logo_main.gif" width="380" height="92" align="left" />	</div>		<div id="ContentDiv" style="background-image:url(images/tile.gif)">		<div id="BkgDiv">			<img src="images/bkg.gif" width="767" height="808" align="left" />		</div>		<div id="RightbarDiv">			<div id="RightShadow">			</div>		</div>	</div>	<div id="FooterDiv">	</div></div>

Edited by RJM (see edit history)

Share this post


Link to post
Share on other sites

To the topic starter: it is impossible to make a table that is 100% by 100% if you are following standards. But your current mistake is positioning the layout structure as absolute. In this case you are giving the effect of the DIV as appearing to be "floating" in mid air—at least by design. Due to this, the browser is incapable of determining what is "100%" width and height for that specific DIV element. You should remove "position" from everything in the CSS if you want better results. Albeit, you still won't get 100% height no matter what you do, even if you were to give the HTML and BODY element 100% height.

Tables should never be used for layout. Tables are there for tabular data, not for laying pages out.

Tables as structure support isn't a taboo, even in a standards compliant world. They just don't want you to go all out with them. There's currently no way to visually obtain the same result as a table using pure DIVs and CSS. Ironically, when people attempt to achieve such results they end up producing code that looks like a table anyway. Here's an example of such (see the similarities):
<table><tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

<div id="container">
<div id="left"></div>
<div id="content"></div>
<div id="right"></div>
</div>


Share this post


Link to post
Share on other sites

How wide is the sidebar? Are you wanting the Header and Footer to be 'fixed position' so the centre content scroll independently of them?

Share this post


Link to post
Share on other sites

Here's my latest code...I simplified it to just the divs and color coded each div to see exactly what each is doing. The RightShadow div is the one I need to fix. I want to make it 100% of RightbarDiv. I want RightbarDiv to fill the space between the BkgDiv div and the right side of the window. But RightbarDiv is contained by ContentDiv and so 100% covers the whole thing. How do I make RightbarDiv "see" and stop at BkgDiv?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://forums.xisto.com/no_longer_exists/ xmlns="http://forums.xisto.com/no_longer_exists/ http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Imagaeon Branding</title><style type="text/css"><!--body {	margin-left: 0px;	margin-top: 0px;	margin-right: 0px;	margin-bottom: 0px;}div {display:inline-block}#SiteHolder {	position:absolute;	width:100%;	height:100%;	z-index:1;}#BannerDiv {	position:relative;	width:100%;	height:92px;	z-index:1;	left: 0;	top: 0;}#ContentDiv {	position:relative;	width:100%;	height:808px;	z-index:1;	left: 0px;	top: 0px;}#BkgDiv {	position:relative;	width:767px;	height:808px;	z-index:2;	float:left;}#RightbarDiv {	position:relative;	z-index:2;	float:right;}#RightShadow {	position:relative;	height:25px;	z-index:3;	width: 100px;}#FooterDiv {	position:relative;	width:100%;	z-index:1;	visibility: inherit;	height: 30px;}--></style></head><body><div id="SiteHolder" style="background-color:#99FF00">  <div id="BannerDiv" style="background-color:#FF0000">  </div>	  <div id="ContentDiv" style="background-color:#666666">   	<div id="BkgDiv" style="background-color:#33FF00">	</div>		<div id="RightbarDiv" style="background-color:#CC9900">			<div id="RightShadow" style="background-color:#FF00FF">			</div>	</div>  </div>	<div id="FooterDiv" style="background-color:#999999">  </div></div></body></html>

Share this post


Link to post
Share on other sites

Check this out for a starting point: http://forums.xisto.com/no_longer_exists/
*I think* that will work as a 'template' for your design. Header and Footer fixed. I can alter (I think) the content to go full width and have a second div beside the existing content. Be back in a flash.

Share this post


Link to post
Share on other sites

I'm thinking I might need to do a script function for the Div's width... I'll see if I know enough JS yet...

Share this post


Link to post
Share on other sites

Or maybe this one might be a better start. Already has the right column there.

http://forums.xisto.com/no_longer_exists/

Yes, I'm thinking that there needs to be something 'flex' in the layout. What happens to someone viewing in a 800px wide monitor? There are still loads of them around. Fixing the left hand side to 800px and then adding the right column will be a challenge. Why the 800px width on the left? Where is the Flash going? Can you use a fixed width on the right and the left is the balance?

Share this post


Link to post
Share on other sites

I'm thinking I might need to do a script function for the Div's width... I'll see if I know enough JS yet...

Here's an updated version of the code you have provided. I removed all the unnecessaries. It doesn't yet do 100% height, but a workaround can be implemented later (as i find it quite annoying trying to work with 100% height, so i didn't try to here).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://forums.xisto.com/no_longer_exists/ xmlns="http://forums.xisto.com/no_longer_exists/ http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Imagaeon Branding</title><style type="text/css"><!--body {	margin-left: 0px;	margin-top: 0px;	margin-right: 0px;	margin-bottom: 0px;}p {	padding: 0 5px 0 5px;}#SiteHolder {}#BannerDiv {	height:92px;}#ContentDiv {	background-color: #CC9900;}#BkgDiv {	width: 80%;}#RightbarDiv {	float:right;	width: 20%;}#RightShadow {	height:25px;	width: 100px;}#FooterDiv {	width:100%;	height: 30px;}--></style></head><body><div id="SiteHolder" style="background-color:#99FF00">	<div id="BannerDiv" style="background-color:#FF0000"></div>	<div id="ContentDiv">		<div id="RightbarDiv">			<p>asdf</p>		</div> <!-- // End of RightbarDiv -->		<div id="BkgDiv" style="background-color:#33FF00">			<p>asdfaf</p>			<p>asdfaf</p>			<p>asdfaf</p>			<p>asdfaf</p>			<p>asdfaf</p>			<p>asdfaf</p>			<p>asdfaf</p>			<p>asdfaf</p>			<p>asdfaf</p>			<p>asdfaf</p>			<p>asdfaf</p>			<p>asdfaf</p>			<p>asdfaf</p>			<p>asdfaf</p>			<p>asdfaf</p>			<p>asdfaf</p>			<p>asdfaf</p>			<p>asdfaf</p>			<p>asdfaf</p>			<p>asdfaf</p>			<p>asdfaf</p>			<p>asdfaf</p>		</div> <!-- // End of BkgDiv -->	</div> <!-- // End of ContentDiv -->	<div id="FooterDiv" style="background-color:#999999"></div></div></body></html>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.