Jump to content

Ahh.. annoying error


zachary
 Share

Recommended Posts

Hi,I am having some issues with my template:http://runetomb.com/rsrush/As you can see the left column won't grow with the content column, and I need it to grow with eachother, But I want it to be able to grow down, and not have to have the height of the columns auto set. But I also need to make sure if the left column is taller then the content column that the content column will grow to match the leftcolumn.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Index - RuneScape Rush</title><style type="text/css">body{margin:0;padding:0;line-height: 1.5em;background-image: url('bg.png');background-repeat: repeat-z;}#maincontainer{width: 840px; /*Width of main container*/margin: 0 auto; /*Center container on page*/}#topsection{/* The Height of the header - DO NOT CHANGE */height: 110px;/* Header borders */border: 1px solid #000000;border-top: 0;/* Header Image Must Be (Height: 109px, Width: 838 PX) */background-image: url('blend.png');background-repeat: repeat-x;}#topsection h1{margin: 0;padding-top: 15px;}#contentwrapper{float: left;width: 100%;}#contentcolumn{margin-left: 200px; /*Set left margin to LeftColumnWidth*//* Content Column borders */border-right: 1px solid #000000;border-bottom: 1px solid #000000;background-color: #FFFFFF;}#leftcolumn{float: left;width: 200px; /*Width of left column*/margin-left: -840px; /*Set left margin to -(MainContainerWidth)*/background: #C8FC98;/* Left Column borders */border: 1px solid #000000;border-top: 0;}#footer{clear: left;width: 100%;background: black;color: #FFF;text-align: center;padding: 4px 0;}#footer a{color: #FFFF80;}.innertube{margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/margin-top: 0;}</style><script type="text/javascript">/*** Temporary text filler function. Remove when deploying template. ***/var gibberish=["Demo"]function filltext(words){for (var i=0; i<words; i++)document.write(gibberish[Math.floor(Math.random()*1)]+" ")}</script></head><body><div id="maincontainer"><div id="topsection"></div><div id="contentwrapper"><div id="contentcolumn"><div class="innertube"><script type="text/javascript">filltext(60)</script></div></div></div><div id="leftcolumn"><div class="innertube">GAH HELP ME W3SCHOOLS!</div></div><div id="footer">© 2008 RuneScape Rush. All rights reserved.</div></div></body></html>

Link to comment
Share on other sites

If you learn some basic CSS maybe you can set how those boxes will behave with layout changes like max widths or max heights with percentages.
If I could have figured it out I wouldn't have posted here :) Can anyone help me?
Link to comment
Share on other sites

In general, you put the div that's supposed to be biggest inside the div with less content to make the divs expand at the same rate. The min-height property can solve the problem if the box is too small.

Link to comment
Share on other sites

I did the min-height thing but my issue is that it will still grow if it gets past the min height and I can't devise a solution so both columns will go to the same height, I might just do a table layout in a second...

Link to comment
Share on other sites

I did the min-height thing but my issue is that it will still grow if it gets past the min height and I can't devise a solution so both columns will go to the same height, I might just do a table layout in a second...
I'm going to do a table-layout...
Link to comment
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
 Share

×
×
  • Create New...