0

This is they layout of the page enter image description here Here's the code for this

<div class="newsContent row">
    <div class="newsDate col-md-2">05 August 2014</div>
    <div class="newsSeparator col-md-1">
    </div>
    <div class="newsDescription col-md-7">
        <div class="row">
            some dummy news
            <div class="newsImage"><img alt="news2" src="/Images/News/news2.jpg">
            </div>
        </div>
    </div>
    <div class="newsActions col-md-2">
        <div class="row">
            <div class="col-md-4">
                <button type="button" class="btn btn-default btn-lg edit-content" title="Edit the news" <span class="glyphicon glyphicon-pencil">
                    </span>
                </button>
            </div>
            <div class="col-md-4">
                <button type="button" class="btn btn-default btn-lg delete-content" title="Delete the news">
                    <span class="glyphicon glyphicon-trash"></span>
                </button>
            </div>
        </div>

    </div>
</div>

Now as you can see this green line is this part

<div class="newsSeparator col-md-1">
</div>

and the class is

.newsSeparator
{
    background: url('my_1X1_pixel_image.png');
    background-repeat: repeat-y;
}

But it is not repeating. I just see a 1px image instead of this desired green line. Something like this.

enter image description here

Why is it not repeating in y, after I've set background-repeat: repeat-y;. How do I make this like the desired line that repeats along y, and stretch/size accordingly as per the parent div and the news content?

EDIT This is not a duplicate of that. I have background image that I need to repeat along y-axis.

Community
  • 1
  • 1
Razort4x
  • 3,296
  • 10
  • 50
  • 88
  • possible duplicate of [CSS - Expand child DIV height to parent's height](http://stackoverflow.com/questions/4804581/css-expand-child-div-height-to-parents-height) – kumarharsh Feb 20 '15 at 11:53
  • 4
    wrap news description and news image into an `article` tag and assign a `border-left` to the new inserted element. You'll avoid empty markup for styling purpose only and you'll improve your semantic a bit. – Fabrizio Calderan Feb 20 '15 at 11:56
  • could you please provide a fiddle? – Akhil Namboothiri Feb 20 '15 at 12:35
  • @FabrizioCalderan: Holy awesome! Did that and it's working totally fine, why don't you write this as an answer and I would mark it as accepted? – Razort4x Feb 20 '15 at 12:38

2 Answers2

1

You could wrap news description and image into a single <article> element

Then you may assign a border-left to the new inserted element. Doing so you avoid to use empty markup for styling purpose only and you also improve the semantic of the page. 

<article>
    <div class="newsDescription col-md-7">
        <div class="row">
           ...
        </div>
    </div>
    <div class="newsActions col-md-2">
        <div class="row">
           ...
        </div>
    </div>
</article>

CSS

article {
   border-left: 1px green solid;
   padding-left: ...  /* give some space between border and contents */
}
Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177
0

You can set height:inherit to set child div's height same as parent div.