Make template with CSS?

[saito200]

Hi people! :D

I'm new to html and css, aside of an artist.
I am trying to create a template for art tutorials. Basically I want to have a series of rows, with a floating image to the left or right, and an explanatory textbox on the other side. The content of each row is contained inside a color box (containing the text and the image of each row). I want the color box to be larger than the image, but I don't know how to do that as the image will simply float and won't make the color box expand to fit the image (it only fits the text).

I know this could be done with a table, but does not seem so elegant.

I want to keep the image as a floating object, and at the same time, that the color box is automatically expanded to contain the image. And I don't want to explicitly specify the size of the color box.
Is this possible?

Thanks for the help! :)

[dany12]

First of all use divs and give the divs some ids or classes and then you will have to use css to manipulate each element if you have some code done post it here and I can help you further

[saito200]

Thanks dany12,

This is the content of the body of the html document:

<div id="content">

<h1> Tutorial </h1>

<h2 class="text_line">1st step</h2>

<div id="row">

<div id="picture">

<img src="testimage.jpg"/>

</div>

<div id="description">

<p> This is some text. </p>

</div>

</div>

<h2 class="text_line">2nd step</h2>

<div id="row">

<div id="picture">

<img src="testimage.jpg"/>

</div>

<div id="description">

<p> This is some text. </p>

</div>

</div>

</div>

And this is the css file:

body{
    background-color:#5A685A;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:1em;
.text_line
{
    clear:both;
}
}
#content{
    color:#fff;
    width:800px;
}
#row{
    background-color:#C2CBC2;
    padding:10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;

}
#picture *{
    float:left;
    width:375px;
    padding:10px;
}
#description *{
    color:#5E6859;
    padding:0px;
}

With these pieces of code, the picture overflows the row element and I don't want this to happen. What's the standard way to solve this?
Thank a lot to everyone reading this.

[saito200]

By row element I mean the div element with row id

[dany12]

Ok if I understand you correctly you want the images to be on the right side and to not overlay your divs
You have a mistake you assigned 1 id to two diffrent divs this is a bad parctice you should use classes and float the image class to right and then use margin-left:-how many pixels you want to puyt the image where you want

[saito200]

I solved the problem by simply adding the text_line class in the css file at the end, and then adding an empty element with this class right before the closing tag of the div.row element.
I almost become mad trying to figure out that I had to have the text_line class styles at the end!

Thanks dany for the tip, I didn't know the standard usage of class and id, but of course now that you say it, it makes sense!

[dany12]

Mark this as solve if you don't have any questions on this problem Thank you

[saito200]

Here is the solution:
http://www.webtoolkit.info/css-clearfix.html

Cheers