How do I achieve this?

Im trying to make this:



Im trying to just add the content in the middle of the page (THE WHITE CONTENT PART)

Basically I want


Advertisement, Soap Of The Month, Newest Tutorials, Featured Video, and Most Popular Tutorials to each have a heading and a gray border of about 2px around each of the elements (then within these I will have the elements described in their title, most likely using a block-list). But I want them to be spaced so it looks nice....


What is the best way to achieve it? A list? Floating divs (I tried that and it screwed up my 2 columns I had float: left;...)

Here is the live page as-is:

http://smftutorials.com/testing/phpUpdate/

*, html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: transparent;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}

#wrap {
	width:100%;
	min-width:752px;
}

#banner {
	width:100%;
	min-height:120px;
	background-color:#0f2859;
}

#banner h1 {
	position:relative;
	width:100%; /* trip haslayout */
	padding:18px 0;
	text-align:center;
	font:bold 64px/64px arial,helvetica,sans-serif;
	background:#0f2859 url(images/h1Background.png) 0 0 repeat-x;
}

#banner h2 {
	text-indent:-9999px;
}

#banner h1 a {
	text-decoration:none;
	color:#000;
}

#banner h1 span {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100px;
}

#banner h1 span span {
	background:url(images/h1Logo.png) top center no-repeat;
	margin-top:10px;
}

#topnav {
	width:100%;
	background-color:#9bbfb2;
	min-height:34px;
}

/*---------Main Menu Sprite---------*/
	ul#mainMenu {
	width: 751px; margin: 0 auto;
	list-style: none;
}

	ul#mainMenu li { 
	display: inline; 
}
	
	ul#mainMenu li a {
	display: block; float: left; height: 34px;
	background-image: url('http://www.smftutorials.com/testing/phpUpdate/images/mainMenu-sprite.png'); text-indent: -9999px;
}

	ul#mainMenu  li a.home {
		width: 91px; background-position: 0 0;	
	}
	
	ul#mainMenu  li a.soap {
		width: 65px; background-position: -91px 0;	
	}
	
	ul#mainMenu  li a.candles {
		width: 95px; background-position: -156px 0;	
	}
	
	ul#mainMenu  li a.bath-body {
		width: 140px; background-position: -251px 0;	
	}
	
	ul#mainMenu  li a.forum-tips {
		width: 129px; background-position: -391px 0;	
	}
	
	ul#mainMenu li a.faq {
		width: 61px; background-position: -520px 0;	
	}
	
	ul#mainMenu li a.links {
		width: 70px; background-position: -581px 0;	
	}
	
	ul#mainMenu li a.forum {
		width: 100px; background-position: -651px 0;	
	}
	

	
	ul#mainMenu li a.home:hover, ul#mainMenu li a.home:focus {
		background-position: 0 -33.5px;	
	}
	
	ul#mainMenu li a.soap:hover, ul#mainMenu li a.soap:focus {
		background-position: -91px -33.5px;	
	}
	
	ul#mainMenu li a.candles:hover, ul#mainMenu li a.candles:focus {
		background-position: -156px -33.5px;	
	}
	
	ul#mainMenu li a.bath-body:hover, ul#mainMenu li a.bath-body:focus {
		background-position: -251px -33.5px;	
	}
	
	ul#mainMenu li a.forum-tips:hover, ul#mainMenu li a.forum-tips:focus {
		background-position: -391px -33.5px;	
	}
	
	ul#mainMenu li a.faq:hover, ul#mainMenu li a.faq:focus {
		background-position: -520px -33.5px;	
	}
	ul#mainMenu li a.links:hover, ul#mainMenu li a.links:focus {
		background-position: -581px -33.5px;	
	}
	ul#mainMenu li a.forum:hover, ul#mainMenu li a.forum:focus {
		background-position: -651px -33.5px;	
	}


a { outline: none; }
/*---------End Main Menu Sprite---------*/

a {
	color:#0f2859;
}

a:visited {
	color:#4f70b0;
}

a:active,
a:focus,
a:hover {
	color:#4f70b0;
}

#lnav {
	width:15%;
	float:left;
	background-color:#FFF;
	min-height:500px;
	min-width:100px;
}
	
#content {
	float:left;
	min-height:500px;
	background-color:#FFF;
	width:70%;
}

.youradhere {
	padding: 10px 0 0 10px;
}

.barlist {
	padding: 10px 0 0 30px;
	display: block;
	list-style:circle;
	color:#0f2859;
}

#lnav li {
	padding-top:.5em;
}

#rnav {
	width:15%;
	float:left;
	background-color:#FFF;
	min-height:500px;
	min-width:100px;
}

#rnav h3, #lnav h3 {
	margin-top:.8em;
	padding: 0.4em 0.8em;
	background-color: #0F2859;
	color: #9BBFB2;
	text-align:center;
	text-transform:lowercase;
	font-style:avante garde;
	font-size:1.25em;
}

#footer {
	min-height:100px;
	clear:both;
	width:100%;
	background-color:#9BBFB2;
	color:#0f2859;
	font-size:smaller;
	list-style:none;
	text-align:center;
}

#footer ul {
	margin: 0; padding: 0.5em 3em;
}

#footer li {
	display: inline;
	margin-right: 0.5em; padding-right: 0.75em;
	border-right: 1px solid #0f2859;
	font-weight: bold;
}

#footer li.last {
	border-right: 0;
}

#sitemap li{
	display:inline;
	margin: 0;
	padding: 0.5em .8em;
	font-size:smaller;
	font-weight:lighter;
	border-right:none;
}

#footer a {
	color: #0f2859;
}

Code (markup):

<!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=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="English"
/>

<meta
	name="description"
	content="#######"
/>

<meta
	name="keywords"
	content="######7 Keywords#######"
/>

<link
	rel="shortcut icon"
	href="http://www.smftutorials.com/favicon.ico"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<!--

	Don't forget to implement these later!

<link
	type="text/css"
	rel="stylesheet"
	href="print.css"
	media="print"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="handheld.css"
	media="handheld"
/>

-->

<title>My New Page</title>

</head>
<body>

<div id="wrap">

<div id="banner">
		<h1>
			<a href="/">
				<h2>SMF Tutorials<h2>
				<span><span></span></span>
			</a>
		</h1><hr />
</div>

<div id="topnav">
<ul id="mainMenu">
	<li><a href="#home" class="home">Home</a></li>
    <li><a href="#soap" class="soap">Soap</a></li>
    <li><a href="#candles" class="candles">Candles</a></li>
    <li><a href="#bath-body" class="bath-body">Bath/Body</a></li>
    <li><a href="#forum-tips" class="forum-tips">Forum-Tips</a></li>
	<li><a href="#faq" class="faq">FAQ</a></li>
	<li><a href="#links" class="links">Links</a></li>
	<li><a href="#forum" class="forum">Forum</a></li>
</ul>
</div>

<div id="lnav">
<h3>Heading</h3>
<br />
<?php include("barlist.php");?>
<br />
<br />
<?php include("youradhere.php");?>
<br />
<?php include("youradhere.php");?>
<br />
<h3>Heading</h3>
<br />
<br />
</div>

<div id="content">
<h2>Welcome to our new website!</h2>
<br />
</div>

<div id="box-content">
Advertisement
</div>
<div id="box-content">
Soap Of The Month
</div>
<div id="box-content">
Newest Tutorials
</div>
<div id="box-content">
Featured Video
</div>
<div id="box-content">
Most Popular Tutorials
</div>

<div id="rnav">
<h3>Heading</h3>
<?php include("youradhere.php");?>
<br />
<?php include("youradhere.php");?>
<h3>Heading</h3>
<br />

</div>

<div id="footer">
<?php include("footer.php");?>
</div>

</div>


</body>
</html>

Code (markup):

 

No one can help this guy out ? ?

Very interesting...i'd be interested to know how this is done too.

 

I use WYSIWYG with it I can put text boxes wherever I want them on the page

 

Avoid WYSIWYGs like the plague.

Before making websites you should familiarise yourself with HTML and CSS properly. Learn the box model: http://www.w3schools.com/css/css_boxmodel.asp

I'd use floating elements. They can mess up your content, that's why you have to practice and read a lot.

 

my concept regarding to your question :

http://i51.tinypic.com/xp7uw0.jpg

I presume you know how to properly code the details of every DIV.
me my self prefer fixed size

*oops.. I forgot to change the BLACK box text to : <div class="c_r_1">

 

yeaaaaaah Im still learning the coding details... thats my hangup. Id say im a novice... are you able to give me an example of the image above in code? warm regards,

Ian

 

I'll see what I can do when I get home tonight I think I have something similar on the home laptop.

 

you rooooock...

 

To give the structure in code would be to hand it to you. Start basic then work your way up, it's how we all started. In fact, I'd recommend purchasing a CSS book. "CSS Mastery: Advanced Web Standards Solutions" by Budd, Moll and Collison is a good one. It's very practical and gives excellent and real-world case studies as examples.

 

Ive been reading quite a few books, Im just stuck on this whole fluidity issue. Obviously what I have mocked up from the ground up is not working (if you go to smftutorials.com/testing/phpUpdate/index.php you will see what I mean.

 

At a quick glance it seems you're mixing fixed and relative widths causing the fixed width elements, such as the youtube clip, to overflow its parent element.

A couple of tips for you that I wish I'd learned earlier: make sure all floating elements are "cleared" after their implementation and use "outline" or "border" for construction lines to help visualisation.

For example:

<div style='width:500px; height:500px; border:1px solid blue; margin:auto;'>
    <div style='width:200px; height:500px; border:1px solid red; margin:0px 10px; float:left;'></div>
    <div style='width:200px; height:500px; border:1px solid red; margin:0px 10px; float:right;'></div>
    <div style='clear:both;'></div>
</div>

Code (markup):

 

alright i tried again. here is where I am stuck:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: transparent;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}

a {
color:#0f2859;
}

#wrap {
	width:100%;
}

#banner {
width:100%;
min-height:120px;
background-color:#0f2859;
}

#banner h1 {
position:relative;
width:100%; /* trip haslayout */
padding:18px 0;
text-align:center;
font:bold 64px/64px arial,helvetica,sans-serif;
background:#0f2859 url(images/h1Background.png) 0 0 repeat-x;
}

#banner h2 {
text-indent:-9999px;
}

#banner h1 a {
text-decoration:none;
color:#000;
}

#banner h1 span {
position:absolute;
top:0;
left:0;
width:100%;
height:100px;
}

#banner h1 span span {
background:url(images/h1Logo.png) top center no-repeat;
margin-top:10px;
}

/*---------Main Menu Sprite---------*/
ul#mainMenu {
width: 751px; margin: 0 auto;
list-style: none;
}

ul#mainMenu li { 
display: inline; 
}

ul#mainMenu li a {
display: block; float: left; height: 34px;
background-image: url('http://www.smftutorials.com/testing/phpUpdate/images/mainMenu-sprite.png'); text-indent: -9999px;
}

ul#mainMenu  li a.home {
	width: 91px; background-position: 0 0;	
}

ul#mainMenu  li a.soap {
	width: 65px; background-position: -91px 0;	
}

ul#mainMenu  li a.candles {
	width: 95px; background-position: -156px 0;	
}

ul#mainMenu  li a.bath-body {
	width: 140px; background-position: -251px 0;	
}

ul#mainMenu  li a.forum-tips {
	width: 129px; background-position: -391px 0;	
}

ul#mainMenu li a.faq {
	width: 61px; background-position: -520px 0;	
}

ul#mainMenu li a.links {
	width: 70px; background-position: -581px 0;	
}

ul#mainMenu li a.forum {
	width: 100px; background-position: -651px 0;	
}



ul#mainMenu li a.home:hover, ul#mainMenu li a.home:focus {
	background-position: 0 -33.5px;	
}

ul#mainMenu li a.soap:hover, ul#mainMenu li a.soap:focus {
	background-position: -91px -33.5px;	
}

ul#mainMenu li a.candles:hover, ul#mainMenu li a.candles:focus {
	background-position: -156px -33.5px;	
}

ul#mainMenu li a.bath-body:hover, ul#mainMenu li a.bath-body:focus {
	background-position: -251px -33.5px;	
}

ul#mainMenu li a.forum-tips:hover, ul#mainMenu li a.forum-tips:focus {
	background-position: -391px -33.5px;	
}

ul#mainMenu li a.faq:hover, ul#mainMenu li a.faq:focus {
	background-position: -520px -33.5px;	
}
ul#mainMenu li a.links:hover, ul#mainMenu li a.links:focus {
	background-position: -581px -33.5px;	
}
ul#mainMenu li a.forum:hover, ul#mainMenu li a.forum:focus {
	background-position: -651px -33.5px;	
}


a { outline: none; }
/*---------End Main Menu Sprite---------*/

a:visited {
color:#4f70b0;
}

a:active,
a:focus,
a:hover {
color:#4f70b0;
}

#lnav {
	margin-left:-600px;
	width:15%;
	float:left;
	background-color:#FFF;
	min-height:500px;
	min-width:100px;
	background-color:#000;
}

#content {
	float:left;
	min-height:800px;
	background-color:#FF0;
	width:70%;
} 

#lnav li {
	padding-top:.5em;
}

#rnav {
	margin-left:-5em;
	width:15%;
	float:left;
	background-color:#FFF;
	min-height:500px;
	min-width:200px;
	background-color:#F0F;
}

#rnav h3, #lnav h3{
	margin-top:.8em;
	padding: 0.4em 0.8em;
	background-color: #0F2859;
	color: #9BBFB2;
	text-align:center;
	text-transform:lowercase;
	font-style:avante garde;
	font-size:1.25em;
}

#footer {
	position:relative;
	top:150px;
	clear: both;
	min-height:100px;
	width:100%;
	background-color:#9BBFB2;
	color:#0f2859;
	font-size:smaller;
	list-style:none;
	text-align:center;
}

#footer ul {
	margin: 0; padding: 0.5em 3em;
}

#footer li {
	display: inline;
	margin-right: 0.5em; padding-right: 0.75em;
	border-right: 1px solid #0f2859;
	font-weight: bold;
}

#footer li.last {
	border-right: 0;
}

#footer a {
	color: #0f2859;
}
#sitemap li{
	display:inline;
	margin: 0;
	padding: 0.5em .8em;
	font-size:smaller;
	font-weight:lighter;
	border-right:none;
}

Code (markup):

<!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=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="English"
/>

<meta
	name="description"
	content="#######"
/>

<meta
	name="keywords"
	content="######7 Keywords#######"
/>

<link
	rel="shortcut icon"
	href="http://www.smftutorials.com/favicon.ico"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen1.css"
	media="screen,projection,tv"
/>

<!--

	Don't forget to implement these later!

<link
	type="text/css"
	rel="stylesheet"
	href="print.css"
	media="print"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="handheld.css"
	media="handheld"
/>

-->

<title>My New Page</title>

</head>
<body>

<div id="wrap">

<div id="banner">
				<h1>
			<a href="/">
				<h2>SMF Tutorials<h2>
				<span><span></span></span>
			</a>
		</h1><hr />
<!--End banner--></div>

<div id="topnav">
<ul id="mainMenu">
	<li><a href="#home" class="home">Home</a></li>
    <li><a href="#soap" class="soap">Soap</a></li>
    <li><a href="#candles" class="candles">Candles</a></li>
    <li><a href="#bath-body" class="bath-body">Bath/Body</a></li>
    <li><a href="#forum-tips" class="forum-tips">Forum-Tips</a></li>
	<li><a href="#faq" class="faq">FAQ</a></li>
	<li><a href="#links" class="links">Links</a></li>
	<li><a href="#forum" class="forum">Forum</a></li>
</ul>
</div>
<!--End topNav--></div>

<div id="lnav">
<h3>Heading</h3>
<br />
<?php include("barlist.php");?>
<br />
<br />
<h3>Heading</h3>
<?php include("youradhere.php");?>
<br />
<?php include("youradhere.php");?>
<br />
<br />
<br />
<!--End lnav"--></div>

<div id="content">
<div id="googleboxad">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-5056108458616211";
/* SMFphpupdate300x250 */
google_ad_slot = "5111274024";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div id="jabdelmes">
<h3>Soap Of The Month</h3>
<br />
<br />
<p>
Send in your favorite soap recipes and pictures!
Each month a lucky winner is chosen who will receive
a free gift from our Sponsors! Have your soap featured
on our front page! 
</p>
<br />
<br />
<br />
<br />
</div>
<div id="newesttuts">
<h3>Newest Tutorials:</h3>
<br />
<ul>
<li>
<img src="http://www.smftutorials.com/images/easy-liquid-soap-teaser.png">

<p>How To Make Liquid Soap (The Easy Way)</p>
</li>
<br />
<li>
<img src="http://www.smftutorials.com/images/silly-bands5-teaser.png">

<p>Silly Bandz Melt and Pour Soap Tutorial</p>
</li>
<br />
<li>
<img src="http://www.smftutorials.com/images/dos1-teaser.png">

<p>DOS Experiment Soap Tutorial: An In Depth Look At The Dreaded Orange Spots.</p>
</li>
<br />
<li>
<img src="http://www.smftutorials.com/images/soapcurl4-teaser.png">

<p>How To Swirl Melt And Pour Soap Tutorial</p>
</li>
<br />
<li>
<img src="http://www.smftutorials.com/images/stickblender-teaser.png">

<p>What Stick Blender Should I buy? A quick guide and some recommendations</p>
</li>
<br />
</ul>
</div>

<div id="featuredvid">
<h3>Featured Video:</h3>
<div id="featurevidcontainer">
<iframe width="275" height="250" src="http://www.youtube.com/embed/yog0-s9OsDA" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div id="populartuts">
<h3>Most Popular Tutorials</h3>
<br />
<ul>
<li>
<img src="http://www.smftutorials.com/images/gemstone-teaser.png">

<p>Bonny B's "Melt and Pour Gemstone and Rock Soap Tutorial (revisited; DETAILED VERSION)"</p>
</li>
<br />
<li>
<img src="http://www.smftutorials.com/images/silicone-mold-teaser.png">

<p>How To Make Your Own Custom Silicone Soap Molds Tutorial</p>
</li>
<br />
<li>
<img src="http://www.smftutorials.com/images/silicone-liners-teaser.png">

<p>How To Make Your Own Custom Silicone Soap Mold Liners Tutorial</p>
</li>
<br />
<li>
<img src="http://www.smftutorials.com/images/salt-soap-teaser.png">

<p>How To Make Salt Soap Tutorial</p>
</li>
<br />
<li>
<img src="http://www.smftutorials.com/images/soap-packaging-ideas-teaser.png">

<p>Creative Soap Packaging Ideas Tutorial</p>
</li>
<br />
</ul>
</div>
<!--End content--></div>

<div id="rnav">
<h3>Heading</h3>
<?php include("youradhere.php");?>
<br />
<?php include("youradhere.php");?>
<h3>Heading</h3>
<!--End rnav--></div>

<div id="footer">
<?php include("footer.php");?>
<!-- #footer --></div>

<!-- #wrap --></div>


</body>
</html>

Code (markup):

 

HTML Code

<!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" xml:lang="en" lang="en">

<head>
	
	<title> </title>
	
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	
	<link href="main_layout.css" type="text/css" rel="stylesheet" />
	
</head>
<!--start the body section-->
<body>
	<!--wrapper-->
	<div id="container">
		<!--top bar for logo-->
		<div id="header">
		</div>
		<!--left madvert bar-->
		<div id="sidebar_left">
		</div>
		<!--centre of the page-->
		<div id="main_div">
			<!--menu section of the page-->
			<div id="menu">
			</div>
			<!--main left content-->
			<div id="left_content">
				<!--top box-->
				<div class="content_sub">
				</div>
				<!--bottom box-->
				<div class="content_sub">
				</div>
			</div>
			<!--main centre content-->
			<div id="main_content">
			</div>
			<!--main right content-->
			<div id="right_content">
				<!--top box-->
				<div class="content_sub">
				</div>
				<!--bottom box-->
				<div class="content_sub">
				</div>
			</div>
		</div>
		<!--right sidebar-->
		<div id="sidebar_right">
		</div>
	</div>
</body>
</html>

Code (markup):

CSS Code

* {
	margin: 0;
	padding: 0;
}
/* above we start the CSS with a basic reset so that it works in most browsers */
.body {
	width: 100%;
	height: auto;
	text-align: center;
}
/* this is the wrapper of the page */
#container {
	width: 100%;
	height: auto;
	margin: 0 auto;
}
/* where the logo is */
#header {
	width: 100%;
	height: 100px;
	border: 1px solid #ff0000;
}
/* links on the left of the page */
#sidebar_left {
	width: 15%;
	height: 600px;
	border: 1px dashed #000000;
	float: left;
}
/* links on the right side of the page */
#sidebar_right {
	width: 15%;
	height: 600px;
	border: 1px dashed #000000;
	float: left;
}
/* this is the conent section in the centre of the page */
#main_div {
	width: 69%;
	height: 600px;
	float: left;
	border: 1px dotted #ff3300;
}
/* menu top of the content */
#menu {
	float: left;
	height: 50px;
	width: 100%;
	border: solid 1px #ff0000;
}
/* left boxes videos and ads etc */
#left_content {
	width: 39.4%;
	height: 546px;
	float: left;
	border: solid 1px #ffcc33;
}
/* main section of the site */
#main_content {
	width: 40%;
	height: 546px;
	float: left;
	border: dotted 1px #ff0000;
}
/* right content again for ads/videos */
#right_content {
	width: 19.9%;
	height: 546px;
	float: left;
	border: dotted 1px #ff9966;
}
/* have used a class for this as it is used four times on the page this would be to house each individual video etc */
.content_sub {
	height: 49.9%;
	width: 100%;
	border: #000000 dotted 1px;
}

Code (markup):

This is a basic framework that I knocked up working version here

The rest of the styling is up to you.

This is a fluid layout, using % so if you resize the window it will shrink to fit. If you have issues with this and find that you need it to be set sizes for videos etc then you can change the %'s to fixed width eg rather than 100% for the width use 1000px. etc

 

thank you so much im going to try this later today

 

No problem. Once you get the hang of CSS and HTML it comes easy and you can knock things out like this quickly and easily.

My ten years of website design comes in handy some times.

 

Please do let me know when someone gets this is done. This problem has now began a real mind boggler now