Hi Guys,

First time poster here and a total noob at css and programming. Please find the photo attached.




Basically I want to have three separate divs inside a container. I can get the left and middle one corrent but the right one does not seems to work. Any suggestions would be greatly appreciated.

Thank you!


P.S here is the code. I wanted to try it out first hence the inline css style.


body {
margin-top: 0px;
margin-bottom: 0px;
}

#wrapper {
background-color: #600;
width: 960px;
height: 1200px;
margin-right: auto;
margin-left: auto;
}
#header {
background-color: #665;
clear: none;
float: none;
width: 960px;
height:118px;
}

#slider {
background-color: #F0F;
clear: none;
float: none;
height: 398px;
width: 960px;
}


#video {
clear: none;
float: none;
height: 372px;
width: 960px;
margin-top:22px;
margin-left:11px;

}
#leftvid {
background-color: #0FF;
clear: none;
float: left;
height: 350px;
width: 300px;

}
#midvid {
background-color: #00F;
clear: none;
float: none;
height: 350px;
width: 300px;
margin-left:auto;
margin-right:auto;
}
#rightvid {
background-color: #FC0;
clear: none;
float: right;
height: 350px;
width: 300px;


}

#footer {
background-color: #666;
clear: both;
float: none;
width: 100%;
height: 62px;
}
-->
</style>

</head>

<body>
<div id="wrapper">
<div id="header">Content for id "header" Goes Here</div>
<div id="slider">Content for id "slider" Goes Here </div>


<div id="video">
<div id="leftvid">Content for id "leftvid" Goes Here </div>
<div id="midvid">Content for id "midvid" Goes Here</div>
<div id="rightvid">Content for id "rightvid" Goes Here</div>
</div>

<div id="footer">Content for id "footer" Goes Here</div>
</div>