http://infectthesystem.com/2008/20-free-css-containers/
But I get a problem with the text on the head:
http://img692.imageshack.us/img692/912/64879041.jpg
This is my current code..
HTML:
CODE
<!-- Container Verde -->
<div class="container_verde">
<div class="container_verde_head">
<img src="images/container_verde/sidebar_left.jpg" alt="" class="verde_float_left"/>
<img src="images/container_verde/sidebar_right.jpg" alt="" class="verde_float_right"/>
<div class="container_verde_head_text">
Text
</div>
</div>
<div class="container_verde_content">
<img src="images/termocamino.jpg" width="150" height="100" style="float:left; margin-right: 10px" />
<p style="margin-top: 10px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam iaculis. Nulla egestas eros posuere justo. Quisque laoreet sem tristique eros. Cras auctor. Nam non leo. Nunc non urna. </p>
<div style="clear: both"></div>
</div>
</div>
<!-- //////////// -->
<!-- Container Blu -->
<div class="container_blu">
<div class="container_blu_head">
<img src="images/container_blu/sidebar_left.jpg" alt="" class="blu_float_left"/>
<img src="images/container_blu/sidebar_right.jpg" alt="" class="blu_float_right"/>
<div class="container_blu_head_text">
Text
</div>
</div>
<div class="container_blu_content">
<img src="images/termocamino.jpg" width="150" height="100" style="float:left; margin-right: 10px" />
<p style="margin-top: 10px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam iaculis. Nulla egestas eros posuere justo. Quisque laoreet sem tristique eros. Cras auctor. Nam non leo. Nunc non urna. </p>
<div style="clear: both"></div>
</div>
</div>
<!-- ////////// -->
<div class="container_verde">
<div class="container_verde_head">
<img src="images/container_verde/sidebar_left.jpg" alt="" class="verde_float_left"/>
<img src="images/container_verde/sidebar_right.jpg" alt="" class="verde_float_right"/>
<div class="container_verde_head_text">
Text
</div>
</div>
<div class="container_verde_content">
<img src="images/termocamino.jpg" width="150" height="100" style="float:left; margin-right: 10px" />
<p style="margin-top: 10px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam iaculis. Nulla egestas eros posuere justo. Quisque laoreet sem tristique eros. Cras auctor. Nam non leo. Nunc non urna. </p>
<div style="clear: both"></div>
</div>
</div>
<!-- //////////// -->
<!-- Container Blu -->
<div class="container_blu">
<div class="container_blu_head">
<img src="images/container_blu/sidebar_left.jpg" alt="" class="blu_float_left"/>
<img src="images/container_blu/sidebar_right.jpg" alt="" class="blu_float_right"/>
<div class="container_blu_head_text">
Text
</div>
</div>
<div class="container_blu_content">
<img src="images/termocamino.jpg" width="150" height="100" style="float:left; margin-right: 10px" />
<p style="margin-top: 10px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam iaculis. Nulla egestas eros posuere justo. Quisque laoreet sem tristique eros. Cras auctor. Nam non leo. Nunc non urna. </p>
<div style="clear: both"></div>
</div>
</div>
<!-- ////////// -->
CSS:
CODE
<!-- Container Verde -->
<!--
.verde_float_left {
float:left;
}
.verde_float_right {
float:right;
}
.container_verde {
margin: 10px 80px 10px 80px;
}
.container_verde_head {
height:30px;
background-image:url(images/container_verde/sidebar_center.jpg);
}
.container_verde_head_text {
height:23px;
padding:7px 0 0 0;
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:16px;
font-weight:bold;
}
.container_verde_content {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:5px;
color:#666666;
border-width: 1px 1px 1px 1px;
border-spacing: 0px;
border-style: none solid solid solid;
border-color: #74AB05;
}
<!-- //////// -->
<!-- Container Blu -->
<!--
.blu_float_left {
float:left;
}
.blu_float_right {
float:right;
}
.container_blu {
margin: 10px 80px 10px 80px;
}
.container_blu_head {
height:30px;
background-image:url(images/container_blu/sidebar_center.jpg);
}
.container_blu_head_text {
height:23px;
padding:7px 0 0 0;
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:16px;
font-weight:bold;
}
.container_blu_content {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:5px;
color:#666666;
border-width: 1px 1px 1px 1px;
border-spacing: 0px;
border-style: none solid solid solid;
border-color: #3E93F0;
}
<!-- //////// -->
<!--
.verde_float_left {
float:left;
}
.verde_float_right {
float:right;
}
.container_verde {
margin: 10px 80px 10px 80px;
}
.container_verde_head {
height:30px;
background-image:url(images/container_verde/sidebar_center.jpg);
}
.container_verde_head_text {
height:23px;
padding:7px 0 0 0;
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:16px;
font-weight:bold;
}
.container_verde_content {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:5px;
color:#666666;
border-width: 1px 1px 1px 1px;
border-spacing: 0px;
border-style: none solid solid solid;
border-color: #74AB05;
}
<!-- //////// -->
<!-- Container Blu -->
<!--
.blu_float_left {
float:left;
}
.blu_float_right {
float:right;
}
.container_blu {
margin: 10px 80px 10px 80px;
}
.container_blu_head {
height:30px;
background-image:url(images/container_blu/sidebar_center.jpg);
}
.container_blu_head_text {
height:23px;
padding:7px 0 0 0;
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:16px;
font-weight:bold;
}
.container_blu_content {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:5px;
color:#666666;
border-width: 1px 1px 1px 1px;
border-spacing: 0px;
border-style: none solid solid solid;
border-color: #3E93F0;
}
<!-- //////// -->
Any help is appreciated.


Answers