Ok, so start with we want to have a main div which stretches for 80% of the browser width. Our main div will have the class .red and uses the following CSS.

.red {
	background-color: #F00;
	width: 80%;
	height: 800px; /* Just for illustration purposes */
	margin-right: auto;
	margin-left: auto;
}

So you can see that our .red class has an 80% width and uses margin auto for left and right. This centers the div within the browser and gives it a percentage of 80%.

Now, what we want to achieve is the following. A left column within .red with the width of 250px and a right column that will fill the remainder of the 80% width. Tricky? Not really…

Our left column will be called .blue and uses the following CSS.

.blue {
	float: left;
	width: 250px;
	background-color: #06C;
	color: #FFF;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	text-align: center;
}

The CSS for our left column is simple as you can see. It uses 250px for the width and I simply float it to the left. Our right column however needs a little more to achieve our result and is achieved like so.

Our right column will have the class .green and uses the following CSS.

.green {
	float: none;
	left: auto;
	margin-left: 250px;
	position: static;
	width: auto;
	background-color: #0F6;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #000;
	text-align: center;
}

.green has a static position, uses no float and has the width set to auto to ensure it fills the remaining space and the all important margin. the margin is the important part here as you need to set the value as per the width of your left column so if you have a column on the left that is 190px wide then your margin-left must be 190px and so on.

That is all you need for the desired effect (Live Demo). As usual, to leave me a fat comment dripping with greasy left over meat just look below.

Ok, so scientists haven’t actually stated that there is indeed a www ozone layer but at this point you are reading the post so the title’s job has been done. This post is actually about the world wide web but I am going to be focussing on how we got it into the mess it is today.

Every developer or designer at one stage is guilty of a dodgy contribution to the basement of the grand old interweb and most learn from the mistake then move on to better things. I am of course reffering to bad design, markup or use of flashing animated .gif’s.

On an average day of web browsing looking for more useless information to forget an hour later I would say that 50% + of the sites either look or work absolutely cack. A little more time spent on the finer details can make a world of difference and websites that showcase the best of the best should really do what they say on the tin and actually show the ones that function, look good and inspire others.

I am guilty of shirking certain duties involved when building a site especially when the deadline is close but I like to think that the finesse is always there and my shirking will not be noticed or indeed important to the websites progression. Sometimes when there is a deadline and I have a designers block thing going on I usually check out some of the web showcase websites I frequent.

As of late (Refer to recent post) these sites seem to add more than their fair share of “ok websites” into the database so when somebody like me visits the site looking to steal some inspiration I am instead faced with trawling through more than a couple of designs to find anything decent enough to be classed as “best of the best”. A big culprit of this is CSS Showcase! The site seems to accept ANY website submitted to it (probably just to populate the database a bit more) so does not suit its purpose. It is also found on top of Google for “CSS Showcase” which is understandable by the domain name but how it could EVER inspire designers i will never know.

The birth of KIT

I’m not talking about the car off Knight Rider that would be silly and irrelevent although he does have a nice shine…Nope I am talking about a newly developed website called Keep It Tidy (keepittidy.co.uk) designed by a fat, greasy, ugly, sweaty bastard……ME

KIT is a Flash, CSS & HTML website showcase gallery which will feature websites that I deem suitable for inspiration to designers and developers. This could be for several reasons such as tutorials included, design, usability etc but ultimately will be based off the inspiration levels. I have created my own graph with an inspiration level from 1-10 and if a website reaches above 7 then it is suitable to be included.

What will this achieve?

Hopefully once we get more submissions into our database it can become an inspiration portal to designers and developers which can aid us all in our time of need when the inspiration blocker devil starts his rounds.

Have you created an awesome site? Submit it here.

Although I am a website designer and developer the focus of this blog isn’t aimed at that! Instead it is aimed at my entire life and the things that interest me along with several tutorials on certain things I see as important. To be honest, I don’t really have a lot of free time to post on here but I will post what I can, when I can.