Hello ! Petit problème css pour thème wordpress

Salut à tous !!

Tout d'abord, je vous remercie pour vos tutos, la beauté de ce que vous nous proposez au quotidien grâce à CSS 3 notamment m'interesse depuis un petit bout de temps !!

Je me permets de vous poster une petite question quelque peu "noob"...

En fait, je viens de me lancer dans la création de mon propre thème wordpress uniquement en CSS.

Tout ce passe très bien, je commence à voir le résultat de mon travail mais je me heure à un problème.

Le plus simple est d'aller sur la page de mon blog :

http://www.pierrejeandel.eu/wordpress/

Comme vous pouvez le voir le thème est bien en place mais le problème c'est que le "content" de mon post dépasse largement sur la droite et se calle au dessus de ma sidebar...

Savez vous comment je pourrais travailler ça ?

Je vous donne mon style.css et le index.php de mon thème :

a écrit :
@font-face {
font-family: 'titre';
src: url('fonts/BurstMyBubble.ttf');
src: local('☺'), url('fonts/BurstMyBubble.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'titre2';
src: url('fonts/folks_tt/Folks-Bold.ttf');
src: local('☺'), url('fonts/folks_tt/Folks-Bold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'advent';
src: url('fonts/advent.otf');
src: local('☺'), url('fonts/advent.otf') format('truetype');
font-weight:bold;
font-style: normal;
}

body {
margin: 25;
padding: 0;
font-family: "Century Gothic", "Lucida Grande", "Trebuchet MS", Arial, Helvetica, FreeSans, sans-serif;
font-size: 0.8em;
line-height: 1.4;
background:url('/img/bg.gif');
}

#page {
margin: 0 auto 0 auto;
width: 1000px;
}

#content {
float: left;
width: 818px;
margin-bottom: 20px;
}

.date {
font-family: "advent";
text-transform: uppercase;
color:grey;
float:left;
font-size: 20px;
margin-right: 25px;
}

.sidebar {
font-family: "advent";
float: right;
width: 180px;
font-variant: inherit;
text-transform:uppercase;
border-left: grey 1px solid;
border-right: 1px solid grey;
-webkit-border-radius: 5px;
-moz-border-radius: 15px;
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;

}

.sidebar ul {
list-style-type: none;
}

.sidebar ul a {
text-decoration:none;
color:black;
font-size: 15px;
}

strong, b {
font-weight: 700;
}

h1 {
width: 150px;
margin-top: 0;
font-family: "titre2";
font-weight: bolder;
font-size: 25px;
text-align: left;
line-height: 0.8;
color: black;
}


h1 a {
color: black;
position: left;
text-decoration:none;
}

h1 p {
font-family: "titre2";
text-align:right;
font-size: 10px;
}

#header {

overflow: hidden;
width: 1000px;
height: 150px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;

}


#header h1 {
margin-top: 8px;
width:auto;
color:black;
float:left;
}


ul.nav {
float: right;
font-weight: 300px;
height: 70px;
width: 244px;
text-align: justify;
border-left: grey 1px solid;
border-right: 1px solid grey;
-webkit-border-radius: 5px;
-moz-border-radius: 15px;
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
}

ul.nav li {
list-style-type: none;
float:right;
text-transform: lowercase;
font-size:16px;
width: 120px;
padding: 1px;

}

ul.nav li.current_page_item a {
color:#C5C2C3;
}

ul.nav li.active a {
color:#C5C2C3;
}

ul.nav li a {
color: #342F30;
display: block;
text-decoration: none;
}

ul.nav li a:hover {
background: none;
color:#C5C2C3;
}

.emdash {
width: 160px;
float:right;
margin-top: 4px;
}

#post {
font-family: 'titre2';
margin-left: 150px;
width: 818px;
}

#post titre {
font-family: 'advent';
}

#post titre a {
color:black;
font-size: 20px;
text-transform:uppercase;
text-decoration: none;
}

#post content {
color:black;
font-size: 15px;
text-transform:uppercase;
text-decoration: none;
}


#footer {
margin-top: 200px;
float: left;
width: 1000px;
font-family: "advent";
text-transform: uppercase;
border-top: 1px solid grey;
-webkit-border-radius: 5px;
-moz-border-radius: 15px;
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
}

#footer a {
color:black;
text-decoration:dashed;
}

#footer colonne1 {
float: left;
width: 160px;
margin-right: 10px;
}
#footer colonne2 {
float: right;
width: 200px;
margin-left: 10px;
}
# footer centre {
overflow: hidden;
background: khaki;
}

footer colonne2 nav {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}

a écrit :

<?php get_header(); ?> <!-- ouvrir header,php -->


<!-- Style de la date -->

<div id="content">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

<!-- Style du titre -->
<div class="date">
<?php the_time('j F Y') ?>
</div>

<div id="post">
<titre><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></titre>
<p class="postmetadata"><?php the_time('j F Y') ?> par <?php the_author() ?> | Cat&eacute;gorie: <?php the_category(', ') ?> |
<?php comments_popup_link('Pas de commentaires', '1 Commentaire', '% Commentaires'); ?> <?php edit_post_link('Editer', ' &#124; ', ''); ?>

</p>
<content><?php the_content(); ?></content>
</div>

<?php endwhile; ?>
<?php endif; ?>

</div>


<?php get_sidebar(); ?>


<?php get_footer(); ?>

</div>



</body>
</html>

Voili voilou !!

Que pensez vous de mon site sinon ?

Merci par avance,

Pierre

oula.

je dirais réduis la taille de ton #content (ou en tout cas le div qui contient ton texte)

télécharge aussi firebug pour bien visualiser ou sont tes div.

https://addons.mozilla.org/fr/firefox/addon/firebug/