I can get the divs next to each other but the over lap.

 

<style type="text/css">
<!--
#apDiv1 {
width:150px;
height:318px;
float:left;
}
#apDiv4 {
width:201px;
height:262px;
float:left;
}
-->
</style>

<div id="sidebar">
 <div>
<table width="100%">
  <tr class="title">
	<td>Welcome</td>
  </tr>
  <tr class="content">
	<td> </td>
  </tr>
</table>
 </div>
<div id="apDiv1">
 <table width="180" border="1">
<tr class="title">
  <td>netword</td>
</tr>
<tr class="content">
  <td><img src="images/thumb_2.jpg" width="100" height="40" /><br />
	<img src="images/thumb_31.jpg" width="100" height="40" /><br />
	<img src="images/thumb_51011171.jpg" width="100" height="40" /><br />
	<img src="images/thumb_Orfeh_281x211.jpg" width="100" height="40" /><br /></td>
</tr>
<tr class="title">
  <td>affiliates</td>
</tr>
<tr class="content">
  <td> </td>
</tr>
<tr class="title">
  <td>site info</td>
</tr>
<tr class="content">
  <td> </td>
</tr>
 </table>
</div>
<div id="apDiv4">
 <table width="100" border="1">
<tr class="title">
  <td>latest images</td>
</tr>
  <tr class="float">
  <td><?php
 include "./gallery/cpmfetch/cpmfetch.php";
 $objCpm = new cpm("./gallery/cpmfetch/cpmfetch_config.php");
 $objCpm->cpm_viewLastAddedMedia(2,2);
 $objCpm->cpm_close();
?></td>
</tr>
<tr class="title">
  <td>projects</td>
</tr>
<tr class="content">
  <td><img src="images/51PgctCjNNL._SL500_AA240_.jpg" width="75" height="75" hspace="2" align="left"/>What Do You Want From Me<br />
Release: 30/09/08<br />
[info]</td>
</tr>
 </table>
</div>
</div>
</div>

 

my css is:

 

@charset "utf-8";
/* CSS Document */

* {
margin:0;
padding:0;
}

body {
background-color: #000000;
text-align:center;

}

.wrapper { 
  margin: 0 auto;
width: 950px; 
text-align:left;
} 

.content (line 60)

{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #d4c7c1;
padding-right: 5px;
padding-left: 5px;
font-size: 10px;
padding-bottom: 5px;
color: #ce673a;
line-height: 13px;
padding-top: 5px;
font-family: Arial;
background-color: #d8cdc7;
text-align: justify;

}


.title3{

background-color: #997c81;
background-image: url();
background-repeat: repeat;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
font-family: arial;
font-size: 10px;
text-transform: uppercase;
text-align: center;
color: #343a44;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;

}


.title {
background-image: url();
background-repeat: repeat;
background-color: #746063;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #d3d3d3;
border-right-color: #d3d3d3;
border-bottom-color: #d3d3d3;
border-left-color: #d3d3d3;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
font-family: arial;
font-size: 10px;
text-transform: uppercase;
text-align: center;
color: #c0c0c0;

}

.content {

padding-top: 4px;
padding-right: 4px;
padding-bottom: 4px;
padding-left: 4px;
background-color: #F5EFFB;
font-family: Tahoma;
font-size: 9px;
color: #acacac;
line-height: 11px;
letter-spacing: 0px;
text-align:left;
width: 100%;
}

.content1 img{

float: left;
margin: 5px 5px 5px 5px;
border: 1px solid #666;
background-color: #fcfcfc;
font-family: Tahoma;
font-size: 9px;
color: #acacac;
line-height: 11px;
letter-spacing: 0px;
}

.float {

font-family: Tahoma;
font-size: 9px;
color: #acacac;
line-height: 11px;
letter-spacing: 0px;
border-style: solid;
border-width:1px;
border-color: #dadada;
padding:6px;
margin: 2px;
background-color:#F5EFFB;
}

.comments {

padding-top: 4px;
padding-right: 4px;
padding-bottom: 4px;
padding-left: 4px;
background-color: #F5EFFB;
font-family: Tahoma;
font-size: 9px;
color: #acacac;
line-height: 11px;
letter-spacing: 0px;
text-align:right;

}
.image {
	border-style: solid;
	border-width:1px;
	border-color: #dadada;
	padding:6px;
	margin: 2px;
	background-color:#ffffff;
}

.imageborder {
	margin-top: 30px;
	margin-bottom: 30px;
	background-color:#ffffff;
}
a img {
	border-style: solid;
	border-width:1px;
	border-color: #dadada;
	padding:6px;
	margin: 2px;
	background-color:#ffffff;
}

.img {
	border-style: solid;
	border-width:1px;
	border-color: #dadada;
	padding:6px;
	margin: 2px;
	background-color:#ffffff;
}

.content image {
	border-style: solid;
	border-width:1px;
	border-color: #dadada;
	padding:6px;
	margin: 2px;
	background-color:#ffffff;
}

.content imageborder {
	margin-top: 30px;
	margin-bottom: 30px;
	background-color:#ffffff;
}

.content img {
	border-style: solid;
	border-width:1px;
	border-color: #dadada;
	padding:6px;
	margin: 2px;
	background-color:#ffffff;
}

a:link 

{

text-decoration: none;
color: #8ca8bc;
font-weight: normal;

}

#footer {
width:100%;
height: 15px;
background-color: #746063;
}
#apDiv2 {
width:100%;
height:18px;
background-color: #746063;
}
#apDiv3 {
width:929px;
height:36px;
margin: 0 auto;
background-color: #BDAEC6;
border:solid #FFFFFF thin;
}

.menu {
background-color: #BDAEC6;
padding: 6px;
font-family:Trebuchet MS;
font-size:11px;
text-transform:uppercase;  
color: black;
}

td.menu {
background-color: #BDAEC6;
padding: 8px;
color:silver;
cursor:default;
font-family:Trebuchet MS;
font-size:11px;
text-transform:uppercase; 
line-height:13px; 
margin-bottom:0px;
margin-top:0px;
text-align:center;
text-decoration:none;
text-transform:none;
vertical-align: top;
}

td.menu:hover {
background-color: #997c81;
padding: 8px;
color: white;
cursor:default;
font-family:Trebuchet MS;
font-size:11px;
text-transform:uppercase; 
line-height:13px; 
margin-bottom:0px;
margin-top:0px;
text-align:center;
text-decoration:none;
text-transform:none;
vertical-align: top;
}

.menu a:link{
color:black;
text-transform:uppercase; 
text-decoration:none; 
font-weight:none;}

.menu a:visited{
color:black;
text-transform:uppercase; 
text-decoration:none; 
font-weight:none;}

.menu a:active{
color:white;
text-transform:uppercase; 
text-decoration:none; 
font-weight:none;}

.menu a:hover{
color:whitw;
text-transform:uppercase; 
text-decoration:underline; 
font-weight:none;}
#contentmain { 
  margin: 0 auto;
width: 929px;
height: 850px; 
text-align:left;
background-color: #ECE0F8;
border-left:solid #FFFFFF thin;
border-right:solid #FFFFFF thin;
border-top:solid #FFFFFF #ECE0F8;
}
#apDiv7 {
width:500px;
height:495px;
top:140px;
float:right;
background-color: #E3CEF6;
}
#sidebar {	
width:426px;
height:492px;
float:left;
background-color: #E3CEF6;
}
#header {	
width:929px;
height:210px;
border-left: solid #FFFFFF thin;
border-right: solid #FFFFFF thin;
border-top:solid #FFFFFF thin;
margin: 0 auto;

}

 

The width of the 2 div's is less than the containing div 'sidebar'. float:left; means it overlaps the left div, float:right; mean it comes out of the sdebar div & overlaps the main content.

 

EDIT - sorted the table & div weren't the same sizes

Why are you using tables and css?

Why are you using tables and css?

 

 

Its known as letting Dreamweaver code for you, that is why the css names are #apDiv2, #apDiv3 ect as this is what dreamweaver calls them by default,.

Tables in div tags, nested in absolutely positioned div tags WOW! is all I can say, major headache come browser testing time, personaly I would start over sticking to regular divs for my layout.

Hi

why you are using tables in css .

Its known as letting Dreamweaver code for you, that is why the css names are #apDiv2, #apDiv3 ect as this is what dreamweaver calls them by default,.

 

Really don't see what this witch hunt against dreamweaver is all about lol, I use it and never use tables and the coding all works fine. To be fair I do use the coding view so maybe thats why?

well it all depends on how you use it i gues, i use dreamweaver aswell but i never ever use the designview, only codeview