CODEWITHSUNDEEP
htmlcssparagraph
Emil Avramov
Emil Avramov

Reputation: 921

Image alignment takes 100% of the paragraph

I'm using tinyscrollbar plugin and I have a paragraph in which should be and image (aligned to the text). When I place it there it takes 100% of the width and 100% of the visible (I said I'm using scroll bar) height. How to fix it?

<div id="descriptionContainer" style="width: 100%; height: 60%; bottom: 20px; border: none; ">
    <div id="scrollbar1">
        <div class="scrollbar">
            <div class="track">
                <div class="thumb">
                    <div class="end"></div>
                </div>
            </div>
        </div>
        <div class="viewport">
            <div class="overview">
                <p> <img src="myImage.png" align="left" width="350" height="400" /> Lorem ipsum dolor sit amet consectetur.... </p> 
            </div> 
        </div> 
    </div> 
    <img src="img/spacer.png" width="100%" height="100%" />
</div>

p tag css:

p { text-align: justify; line-height: 1.5em; }

.img class:

.img { width: 25%; height: auto; background: none; }

Thanks in advance!

Upvotes: 0

Views: 184

Answers (2)

Fabi&#225;n Heredia Montiel
Fabi&#225;n Heredia Montiel

Reputation: 1687

<img src="img/spacer.png" width="100%" height="100%" />

That is the line causing you problems, it will take all the space if possible. Try this:

<img src="img/spacer.png" />

Or this

<img src="img/spacer.png" width="[size]px" height="[size]px" />

Upvotes: 0

nerdburn
nerdburn

Reputation: 712

Your image has width and height attributes on it:

 <img src="img/spacer.png" width="100%" height="100%" />

Remove those and it will show up as it's natural size.

Upvotes: 5

Related Questions