Problème css

Bonjour,
J'ai un problème:
Je voudrais que sa ressemble a sa:(visualiseur adobe dw cc)
http://imageshack.com/a/img89/7955/uule.png
mais sa me donne sa:(tout navigateurs)
http://imageshack.com/a/img593/3218/xgm8.png

Voila mon code
html
<div id="tout">
<div id="coulgauche">gbbgdenytnbhteddd</div>
<div id="coulgauche1">bbvdrthntygb</div>
<div id="couldroite1">gbdrdtynhythytc</div>
<div id="couldroite">avfbvrtb</div>
</div>

css

<style>
#tout{
position:relative;
width:100%;
}


#couldroite{
position:absolute;
right:0%;
background:#02dae6;
width:25%;
height:100%;
}
#coulgauche1{
position:absolute;
left:25%;
background:#ed1c24;
width:25%;
height:100%;
}
#couldroite1{
position:absolute;
left:50%;
background:#fff200;
width:25%;
height:100%;
}
#coulgauche{
position:absolute;
left:0%;
background:#04ff30;
width:25%;
height:100%;
}
/*#coulgauche{
position:absolute;
left:0%;
background: #04ff30;
width:25%;
height:100%;
}
#coulcenter{
position: absolute;
right: 50%;
background: #ed1c24;
width:335px;
height:100%;
}
#coulgauche1{
position:absolute;
left:50%;
background: #fff200;
width:25%;
height:100%;
}
#couldroite{
position:absolute;
left:75%;
background:#02dae6;
width:25%;
height:100%;
}*/


</style>
merci de me répondre car c'est urgent.
Mon site pour voir:
https://www.hostinger.com/free-eol?utm_source=fri&utm_medium=www&utm_campaign=free_eol
pour le voir,c'est au deçu des boutons vert.
La couleurs n'est pas visible mais le texte