CODEWITHSUNDEEP
htmlcss
John23
John23

Reputation: 219

align <h3></h3> with the bottom of my image issue

I'm trying to align my "read more" to the bottom line of my image, I want the "Read more" get it right always positioned with float and aligned with the line bottom of the picture on the left, so that even if I have a post with few or many lines, I want my Read more always in the same line with the image row position. But I´m not having sucess put this working like I want, My is always in a different position depending on the size of the post. My fiddle with I´m having: http://jsfiddle.net/ritz/tvJ3j/1/ What I´m trying to do is: enter image description here

My html:

<section id="body-container">
            <div id="body"> 
                <div id="body-content">  
                <h1>last Posts</h1>

                <article id="loop-body">
                    <img src="logo.png" />
                    <a href="#">Title 2</a>
                    <p>Post 1</p>
                   <h3 style="float:right;"> Read more> </h3>
                </article>

                <hr/>

                  <article id="loop-body">
                    <img src="logo.png" />
                    <a href="#">Title 2</a>
                    <p>Post 2 with many lines post 2 with many lines post 2 with many lines</p>
                    <h3 style="float:right;"> Read more > </h3>
                </article>
                </div>
            </div>
</section>

My css:

#body-container{width:100%;height:auto;float:left;  margin:10px 0 0 0;}
#body{width:960px;  margin:0 auto 0 auto;}
#loop-body{height:130px; margin-top:20px;}
#loop-body a{font-family:'bariol_regularregular'; font-size:22px; text-decoration:none; color:#000;}
#body-content{float:left; width:603px;}
#body-content h1{font-family:'bariol_regularregular';  margin-top:15px; font-size:24px;}
#loop-body h3{font-family:'bariol_boldbold'; font-size:14px; float:right;margin-top:5px;}
#loop-body img{float:left; border:1px solid#ccc; width:150px;height:120px; margin-right:20px;}
#loop-body p{font-family:'bariol_regularregular'; font-size: 16px;}

Upvotes: 0

Views: 510

Answers (3)

user3305084
user3305084

Reputation:

I have solve your issues visit the Link

#loop-body h3{font-family:'bariol_boldbold'; font-size:14px; right:0; bottom:-15px; position:absolute;}

Upvotes: 1

Kooki3
Kooki3

Reputation: 609

Just got that done.

You need to change your HTMls structure and some CSS tweak,

HTML:

<article id="loop-body">
      <div class="cContent">
            <a href="#">Title 2</a>
            <p>Post 1</p>                        
      </div>
      <div class="cImage">
            <img src="img.jpg" style="height:130px;width:auto" />
            <h3> Read more> </h3>
      </div>

</article>

CSS:

article{padding:10px;}
.cContent {float:right;width:400px;}
.cImage{position:relative;}
.cImage h3{position:absolute;bottom:0;right:0;margin:0;}

JSFIDDLE here.

Please do note that I left the last one untouch for your reference. And ignore the long image link, just simple get from Google.

Upvotes: 1

Iqbal Fauzi
Iqbal Fauzi

Reputation: 1571

This is how i do it :

#loop-body{
    position: relative
    width: ...px
    ...
}

#loop-body h3{
    position:absolute;
    bottom: 0;
    right: 0;
    ...
}

Upvotes: 1

Related Questions