css help

Reanimated35 · 25th June 2012, 1:53 PM

Ok, so we're working on a website for a family member. Now please focus mainly on the question at hand instead of making complaints about the site

it's still a work in progress. Yes there is better out there etc blah blah blah

The question is,

I need to make the side panel the same length as the main body area but I really don't understand how to do that.

At present there is just a bunch of &nbsp there simply because it was working and we wanted a site up asap. I really don't want to have this stay as the permanent solution.

I did a bit of google-ing and came across something called faux columns but this didnt make too much sense to me. Worst case scenario I can just use the &nbsp but I would love another option too.

Now if you must comment on other sections of the site, please try to at least answer my main question first.

The site in question is http://www.forthebestgrindintown.com.au

Thank you in advance

rm -rp ./Matt* · 25th June 2012, 5:26 PM

Use the width attribute in divs. So imagine that a div is like a table cell or a container and everything inside that container will inherit the div's properties. Here's an example with percentage widths that maintains the same width ratio across all screens

Code:

<html>
<head>
</head>
<body>
	<div style="position:fixed;top:0%;left:0%;width:30%;height:100%;background-color:blue;">
		<p>test1</p>
	</div>
	<div style="position:fixed;top:0%;left:30%;width:40%;height:100%;background-color:red;">
		<p>test2</p>
	</div>
	<div style="position:fixed;top:0%;left:70%;width:30%;height:100%;background-color:yellow;">
		<p>test3</p>
	</div>
</body>
</html>

Instead of percentage you might prefer fixed pixel widths, just test you design on widescreens too.

25th June 2012, 1:53 PM	#1
Reanimated35 Member Join Date: Sep 2007 Location: Brisbane Posts: 3,356	css help Ok, so we're working on a website for a family member. Now please focus mainly on the question at hand instead of making complaints about the site it's still a work in progress. Yes there is better out there etc blah blah blah The question is, I need to make the side panel the same length as the main body area but I really don't understand how to do that. At present there is just a bunch of &nbsp there simply because it was working and we wanted a site up asap. I really don't want to have this stay as the permanent solution. I did a bit of google-ing and came across something called faux columns but this didnt make too much sense to me. Worst case scenario I can just use the &nbsp but I would love another option too. Now if you must comment on other sections of the site, please try to at least answer my main question first. The site in question is http://www.forthebestgrindintown.com.au Thank you in advance __________________ Any post made by me is either made up, or based off memory and therefore my not be 100% accurate. It does also not represent the view of my employer or anyone else other than me. If you share the opinion however, go us!

25th June 2012, 5:26 PM	#2
rm -rp ./Matt* Member Join Date: Sep 2008 Location: in the computer Posts: 621	Use the width attribute in divs. So imagine that a div is like a table cell or a container and everything inside that container will inherit the div's properties. Here's an example with percentage widths that maintains the same width ratio across all screens Code: <html> <head> </head> <body> <div style="position:fixed;top:0%;left:0%;width:30%;height:100%;background-color:blue;"> <p>test1</p> </div> <div style="position:fixed;top:0%;left:30%;width:40%;height:100%;background-color:red;"> <p>test2</p> </div> <div style="position:fixed;top:0%;left:70%;width:30%;height:100%;background-color:yellow;"> <p>test3</p> </div> </body> </html> Instead of percentage you might prefer fixed pixel widths, just test you design on widescreens too.