CODEWITHSUNDEEP
css
Paul
Paul

Reputation: 1004

CSS Padding Issue w/ Image

I am having an issue with the Padding of p text that surrounds an Image: Does anyone see the problem?

I have tried to add padding the CSS "p" element but this has no effect:

enter image description here

Here is the relevent HTML:

    <div id="mid-featureleft" class="rounded">
        <div class="contentheader">
            <h1>Georgio Varsari Painters</h1>
        </div>
        <div class="imagebox">
            <img height="200px" width="303px" src="Images/Home/HomePage1.jpg" alt="Welcome to Vasari's" style="margin: 0 0 0 0;" />
        </div>
        <p>
            Established in 1965, the Vasari's Team of Painters and Craftsmen have over 100 years of combined experience delivering impeccable Museum Quality Painting Services for Customers in Washington DC and Northern Virginia. 
            We have experience with every type painting project that exists.  For that reason, we are able to take on some of the more difficult restoration jobs that other Painting Companies shy away from.</p> 
        <p>
            Christian Vasari has nearly three decades of painting experience working under the auspices of his father and Company Founder, Anthony Vasari. 
            You will have the comfort of knowing that your Home and Property is in the right hands of a heavily experienced and knowledgeable group of Professionals who have successfully completed thousdands of painting projects.</p>
    </div>

Here is the relevent CSS:

#mid-featureleft {
    height:250px;
    width:609px;
    margin: 12px 0 0 0;
    float:left;
    position:relative;
    background-color:#E7EFF7;
    /*background-color:orange;*/
}
#mid-featureleft h1 {
    color: red;
    font-family: Arial;
    font-size:25px;
}
#mid-featureleft p {
    color: #333366;
    margin: 0 0 0 0;
    font-size:12px;
    /*line-height:14px;*/ 
    padding: 5px 5px 5px 5px;
}
#mid-featureleft .contentheader {
    height:30px;
    width:302px;
    text-align:left;
    line-height:29px;
    display: block;
    float: left;
    margin:0 0 0 0;
    padding: 0 0 0 4px;
    position:relative;
}
#mid-featureleft .imagebox {
    height:200px;
    width:303px;
    /*display: block;*/
    float: right;
    margin:0 0 0 0;
    padding: 0 0 0 0;
    /*background-color:green;*/
}

Upvotes: 1

Views: 67

Answers (2)

Mirko Mukaetov
Mirko Mukaetov

Reputation: 204

add some margin to example: 

#mid-featureleft .imagebox { margin:10px;}

Upvotes: 0

Chris Danek
Chris Danek

Reputation: 687

You have to add margin to this element 

#mid-featureleft .imagebox { margin: 0 0 15px 15px; }

Upvotes: 3

Related Questions