Divs aranjement in the page

I am just getting started with CSS and HTML. I have been trying for quite a long to arange some divs in the page. I am creating a recipes page and I want it to look something like this: each recipe has a title, in the left side an image and the in the right the ingredients and the preparation steps.I also used an XML document and a XSL sheet to display these elements. I am having troubles displaying the right side. I will share with you only the CSS code and the XSL.

CSS :


p {
    color: green;
}

.ingredients-header {    
    color:#FFF;
    font-weight:bold;
    font-size:120%;
    background-color:#339933;
    position:relative;
    left: 350px;
}

.ingredients {
    position:absolute;
    left: 400px;
}

.preparation-header {
    color:#FFF;
    font-weight:bold;
    font-size:120%;
    background-color:#339933;
    position:relative;
    top: 150px;
    left: 350px;
}

.preparation {
    position: relative;
    left: 400px;
}

XSL:


<xsl:stylesheet
    version="1.0"
    xmlns:xsl="http://ift.tt/tCZ8VR"
    xmlns="http://ift.tt/VnWImq">

<xsl:template match="/">

<html>
<head>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <title>Recipe</title>
</head>
<body>
 <xsl:apply-templates select="/recipes/recipe"/>    
</body>
</html>
</xsl:template>

<xsl:template match="recipe">
    <h2><xsl:value-of select="./name"/></h2>
    <div class="ingredients-header">
        <h3>Ingredients:</h3>
    </div>
    <div class="ingredients">
        <p><xsl:apply-templates select="./ingredients"/></p>
    </div>
    <div class="preparation-header">
        <h3>Preparation steps:</h3>
    </div>
    <div class="preparation">
        <ol><xsl:apply-templates select="./instructions"/></ol>
    </div>
</xsl:template>

<xsl:template match="ingredients/ingredient">
    <xsl:value-of select="./qty"/><xsl:text> </xsl:text>
    <xsl:value-of select="./unit"/><xsl:text> </xsl:text>
    <xsl:value-of select="./food"/>
    <br />
</xsl:template>

<xsl:template match="instructions/instruction">
    <li><xsl:value-of select="."/></li>
</xsl:template>

</xsl:stylesheet>

I get an output like this: enter image description here

Can anyone help me arrange these divs so in order to have the preparation steps under its section? Thank you!

Divs aranjement in the page

No comments:

Post a Comment