Problem With Container Head Text

Posted by topdog 827 days ago Questions| text container verde All
Hello, I have a little problem. I'm trying to put two of these boxes toghether..
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>

<!-- ////////// -->


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;
}

<!-- //////// -->


Any help is appreciated. Pleased.gif
Discuss Bury


Who Voted for this Question