left sidebar moves down when I insert a new content in some pages

[midiweb]

hi, there's a small gap in my left sidebar between the upper banner and the left menu  when I insert a  new content in the main middle area. The sidebar moves down a little. How to correct this? have I to change sth in PHP code or only in the css?

I use the template industry.css

Here is my css:

Code:

body {
background-color : #fdfffc;
font-family : Verdana, Geneva, Arial, helvetica, sans-serif;
font-size : 10pt;
padding : 0;
margin-top : 10px;
}
#nav {
width : 980px;
height : 25px;
border-top : 5px solid black;
position : relative;
top : 0;
margin : 0;
margin-top : 0;
margin-bottom : 0;
padding-left : 0;
text-align : right;
background: #c59856 url(../../media/navi-background.jpg) no-repeat right;
}
#nav li {
padding-left : 16px;
padding-right : 10px;
display : inline;
height : 20px;
background: url(../../media/vertical2.jpg) no-repeat;
}
#nav li a {
/*padding-left : 10px;*/
/*padding-right : 12px;*/
color : #000;
text-decoration : none;
font : normal normal normal 10px/20px "Lucida Grande", Lucida, Verdana, sans-serif;
}
#nav li a:hover
{
color: #cb1625;
}
#main {
font-family : Verdana, Geneva, Arial, helvetica, sans-serif;
font-size : 9pt;
width : 980px;
margin-left : auto;
margin-right : auto;
border-right : 1px solid #666666;
border-left : 1px solid #666666;
}
#hero {
margin : 0 10px;
width : 200px;
height : 92px;
background-image : url(../../media/jurgschat-newbanner.jpg);
background-repeat : no-repeat;
float : left;
}
#hero2 {
margin : 0;
margin-left : 217px;
height : 85px;
background-image : url(../../media/newtopbanner.jpg);
background-repeat : no-repeat;
}
.gear {
width : 970px;
height : 0px;
margin-top : 0;
margin-left : 15px;
}
#header h1 {
position : absolute;
left : 94px;
top : 8px;
color : white;
font-size : 48px;
font-weight : bold;
margin : 0;
}
#header em {
font-style : normal;
text-decoration : underline;
}
#wrapper {
padding-top : 0;
background-color : white;
position : relative;
}
#wrapper:after {
content : '.';
display : block;
height : 0;
clear : both;
visibility : hidden;
}
#wrapper {
display : inline-block;
}
#wrapper {
display : block;
}
#sidebar {
background-color: #ccf4bc;
float : left;
text-align : center;
margin-left : 0;
margin-top : 0;
position : relative;
padding : 10px 10px 20px 10px;
width : 160px;
height : 820px;
}
#aktuelles {
float : right;
text-align : center;
margin-left : 0;
margin-top : 0;
position : relative;
padding : 10px 10px 20px 10px;
width : 160px;
height : 450px;
background: url(../../media/imagefornews.jpg) no-repeat center 200px;
}
#aktuelles h4 {
background-color : #ae8055;
color : #fff6fd;
}
#sidebar h3 {
font-size : 18px;
border-bottom : 1px solid black;
margin-bottom : 4px;
margin-top : 16px;
clear : both;
}
#sidebar ul {
margin-left : 1em;
padding-left : 0;
}
#sidebar p {
margin-bottom : 8px;
}
#sidebar div.subtabs ul {
list-style : none;
width : 155px;
margin : 0;
padding : 0;
}
#sidebar div.subtabs ul ul {
list-style : none;
width : 130px;
margin : 0;
padding : 0 0 0 5px;
}
#sidebar div.subtabs ul ul ul {
list-style : none;
width : 125px;
margin : 0;
padding : 0 0 0 5px;
}
#sidebar div.subtabs ul a {
width : 100%;
margin : 3px;
text-align : left;
font-size : 0.9em;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-weight : normal;
text-decoration : none;
display : block;
padding : 3px 3px 3px 5px;
border-bottom : 1px solid #949494;
border-left : 4px solid #cccccc;
}
#sidebar div.subtabs ul a:hover {
text-decoration : none;
background : #eaeaea url(img/menubg2.gif) repeat-x bottom left;
color : #da0434;
border-left : 4px solid #a31e00;
}
#content {
margin : 0 0 0 180px;
min-height : 310px;
height : auto !important ;
/*height : 600px;*/
width : 600px;
display : block;
position : relative;
padding : 0 3px 20px 10px;
color : #333333;
}
#content h1 {
font-size : 20px;
margin : 0;
text-decoration : underline;
}
#content h2 {
font-size : 18px;
margin : 0;
text-decoration : underline;
}
#content .date {
float : right;
}
#content .postedBy {
float : left;
}
#content .meta {
height : 1em;
}
#content p {
text-align : justify;
text-indent : 1em;
line-height : 1.3em;
}
.comments {
border-top : 1px dotted #666666;
border-bottom : 1px dotted #666666;
padding : 4px;
text-align : right;
margin-bottom : 2em;
background-image : url(images/comment_edit.gif);
background-repeat : no-repeat;
background-position : center left;
}
a {
color : #666666;
}
.pullout {
background-color : #eeeeee;
padding : 5px;
float : right;
margin : 8px;
}
#footer {
width : 980px;
height : 45px;
padding-top : 0;
padding-bottom : 0;
margin-left : auto;
margin-right : auto;
color : #b0b0b0;
text-align : center;
}
.right {
float : right;
}
.csskeyword {
color : blue;
}
.cssvalue {
color : red;
}
p.caption {
text-align : center;
}
small.super {
vertical-align : top;
font-size : 0.75em;
line-height : 1.3em;
}
.nodisplay {
display : none;
}

Thanks for help

[marathoner]

What is your URI? I can see your CSS...but without the URI there is no way of knowing how you've assembled your template.

[midiweb]

hi, my homepage ist not online yet. I can send you an image copy.How can I here insert an image from my desktop.?

[marathoner]

An image won't allow us to look at how the HTML is generated.

[midiweb]

here is my code source. (it's a german homepage)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title> - Home</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />

        <link href="http://localhost/wb/templates/industry1/industry.css" rel="stylesheet" type="text/css" media="screen" />
    </head>

    <body>
        <div id="main">
            <a name="top" class="nodisplay"></a>
            <div id="hero"> </div>
                        <div id="hero2"> </div>
            <div id="header">
                <!-- <div class="gear"> </div> -->
                <div class="gear"> </div>

                       
<ul id="nav">
<li><span class="menu_current"><a href="http://localhost/wb" target="_top"  class="menu_current">Home </a></span>
</li>
<li><span class="menu_default"><a href="http://localhost/wb/pages/kontact.php" target="_top"  class="menu_default">Kontact </a></span>
</li>
<li><span class="menu_default"><a href="http://localhost/wb/pages/impressum.php" target="_top"  class="menu_default">Impressum     </a></span>
</li>
<li><span class="menu_default"><a href="http://localhost/wb/pages/sitemap.php" target="_top"  class="menu_default">Sitemap </a></span>
</li>
</ul>
                <h1 class="shad"><em></em></h1>

                <h1><em></em></h1>
            </div>

            <div id="wrapper">
                <div id="sidebar">
                    <div class="subtabs">
                        <ul class="menu-top"><li class="menu-sibling menu-first"><a href="http://localhost/wb/pages/change-management.php" target="_top">Change Management</a></li><li class="menu-sibling"><a href="http://localhost/wb/pages/projekt-coaching.php" target="_top">Projekt coaching</a></li><li class="menu-sibling"><a href="http://localhost/wb/pages/management-training.php" target="_top">Management training</a></li><li class="menu-expand menu-sibling"><a href="http://localhost/wb/pages/toolbox.php" target="_top">Toolbox</a></li><li class="menu-sibling"><a href="http://localhost/wb/pages/profil.php" target="_top">Profil</a></li><li class="menu-sibling menu-last"><a href="http://localhost/wb/pages/kunden.php" target="_top">Kunden</a></li></ul>                    </div>

                                    </div>
                <div id=aktuelles>
                <h4>Aktuelles</h4><p><a href="http://localhost/wb/pages//posts/era8.php">ERA</a><br />
 
Leistungsbeurteilung-<br />training<br /></p><p><a href="http://localhost/wb/pages//posts/15.03.20089.php">15.03.2008</a><br />
Coachingstag<br />Projetleiter <br />

</p><p><a href="http://localhost/wb/pages/.php"></a><br /></p>                </div>

                <div id="content">
                   


<p> <font size="4" face="Verdana" color="#003366"><span style="font-weight: bold;"><br />Kompetenz in Change Management</span></font></p><p><font size="4" face="Verdana" color="#003366"><span style="font-weight: bold;"></span></font><br />Seit 1991 arbeiten wir erfolgreich als Berater für Change Management und Projektarbeit.<br />
Ziel unserer Arbeit ist es Menschen und Organisationen bei Veränderungsprozessen zu unterstützen.<br />
Dabei überzeugen wir durch Kompetenz, Professionalität, Pragmatismus und Praxisnähe...mehr</p><hr style="width: 100%; height: 2px;" />
<p><img width="250" vspace="3" hspace="5" height="136" align="left" src="http://localhost/wb/media/Bild-im-text.jpg" /><br />Erfolgreiche Veränderungsprozesse brauchen klare Zukunftsziele, ein konzeptionell ausgereiftes strategisches Umsetzungsdesign, ein gutes Maß von visionärer und zielorientierter Führung sowie das Engagement und die aktive Beteiligung der betroffenen Mitarbeiter.</p>

<br /><p><br /></p><p><br />J&amp;P hat sich darauf spezialisiert, Menschen und Organisationen, bei ihren Veränderungsvorhaben zu unterstützen dabei überzeugen wir durch Kompetenz, Professionalität und Praxisnähe.<br />
</p><p>
In unseren Leistungsfeldern bieten wir eine erfolgreiche Kombination aus fachlichem Know-How und Prozesskompetenz.<br />
<br />
    * Change Management....<a href="http://localhost/wb/pages/change-management.php">mehr</a><br />
    * Projektcoaching...mehr<br />
    * Managementtraining...mehr</p>

<p>&nbsp;</p><style type="text/css">
.post_title, .post_date { border-bottom: 1px solid #DDDDDD; }
.post_title { font-weight: bold; font-size: 12px; color: #000000; }
.post_date { text-align: right; font-weight: bold; }
.post_short { text-align: justify; padding-bottom: 5px; }
</style>
<table cellpadding="0" cellspacing="0" border="0" width="98%"></table>
<table cellpadding="0" cellspacing="0" border="0" width="98%" style="display: none">
<tr>
<td width="35%" align="left"></td>
<td width="30%" align="center"></td>
<td width="35%" align="right"></td>
</tr>
</table>                </div>
                            </div>
           
            <div id="footer">
                <b>Copyright © 2008   *************-<b>            </div>

        <div style="clear:both;"></div>
    </div>

    </body>
</html>

[midiweb]

youpi! I found the solution thanks to this marvellous add-on of Firefox Browser: Web Developer Toolbar

Code:

#wrapper {
display : inline-block;
padding-top : 0;
background-color : white;
position : relative;

}

must be:

Code:

#wrapper {
display : inline;                   "block"  must not be added
padding-top : 0;
background-color : white;
position : relative;

}

Code:

display:inline;