Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to reduce length of white dash line so it matches image and text height?

How to reduce length of white dash line so it matches image and text height?

Problem

UPDATE I've actually seen its the length it is because the .main div is the parent and its sizing to that. I'm not sure how to adjust that...

Trying to reduce the dashed line to match the same Height as text, how do I do this?

Fiddle is here http://jsfiddle.net/7U7H3/

        

The best selection of cheese I've ever seen! Cannot wait for our next order!

sky

sky

The best selection of cheese I've ever seen! Cannot wait for our next order!

  .main {
     -webkit-column-gap: 1em;
     -webkit-column-rule: 5px dotted #FFF;
     -webkit-columns: 100px 2;
     font-size: 3.5vw;
     text-align: right;
     line-height: 1.0;
   }
 img {
     margin: 1.5em 0;
     max-width: 100%;
    float:left;
  }
Problem courtesy of: Dano007

Solution

Just try setting Margin for img to a little lesser value and setting margin and padding for all the rest elements to 0.

Check this Fiddle

Setting

img {
       margin: 0.1em 0;
       max-width: 100%;
       float:left;
}

Adding this to css

* { 
    margin: 0; 
    padding: 0; 
}

did the trick for me as of now. But it will all depend on the height of image. After setting this margin property if the height of image is greater than the text than div height will expand and so will the webkit line. This is by far the manual solution to your issue, but there are many other ways of achieving this, just try to change your approach for a more dynamic solution.

Solution courtesy of: Umang Mehta

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How to reduce length of white dash line so it matches image and text height?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×