CODEWITHSUNDEEP
htmlcssresponsive-design
S.pal
S.pal

Reputation: 97

Wrap image with text in special style

I have the following code which creates a list containing images.

HTML:

<ul>
    <li class="list">
      <div class="list_div">
        <img class="list_image" align="top" src=""/>
        <h3><a>Headline 1</a></h3>
        <p>text,text,text,text,text,text</p>
      </div>
    </li>
    <li>
      <div class="list_div">
        <img class="list_image" align="top" src=""/>
        <h3><a>Headline 2</a></h3> 
        <p>text,text,text,text,text,text.</p>
      </div>
    </li>
</ul>

CSS:

li {
    padding: 2px;
    color: #000000;
    font-size: 12px;
    text-align: left;
    vertical-align: middle;
    word-wrap: break-word;
    border-bottom: 1px solid #AFAFAF;
    background-color: #CCD5DF;
}

.list_div {
    width: 100%; 
    display: block; 
}

.list_image { 
    float: left;
    width: 30%;
    height: auto;
    border: 2px solid #000; 
    left: 0; 
    top: 0; 
}

I want to:

  1. place image in left and headline, text in right side. ==> in first List
  2. place image in center and show headline, text within Image in center ==> in second List

BUT, this style need to follow:

  1. image width 30% in 1st List and 50% in second List.
  2. ul, li in static position.
  3. page is responsive.
    here is my code sample, link: http://jsfiddle.net/2ycggga9/

Upvotes: 0

Views: 58

Answers (1)

lakshya_arora
lakshya_arora

Reputation: 791

is this what u want to do

http://jsfiddle.net/2ycggga9/5/

.list2 > h3,.list2>p{
  position:relative;
  left:-23%;
}
<li class="list2">
   <img class="list_image" src="http://thekitemap.com/images/feedback-img.jpg"/>
   <h3><a>Headline 2</a></h3> 
   <p>text,text,text,text,text,text.</p>
</li>

Upvotes: 1

Related Questions