How to make divs have table-like borders?


Tags: html,css,twitter-bootstrap-3

Problem :

Using bootstrap grid I managed to have div blocks inside row which should appear with border. Each div in the row must appear same size. So far I have: HTML

<div class="row">
<div class="col-md-4 col-sm-6 feed-entry  ng-repeat="feed in feeds" ng-scope"></div>

</div>

CSS

.row {
    display: table;
    border-style: solid;
    border-width: 1px;
    border-color: #333333;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}
.feed-entry{
    border-right-color: #737373;
    border-right-width: 1px;
    border-right-style: solid;
    float: left !important;
    padding-bottom: 5px;
}

The problem that right border of .feed-entry is limited to content (div) height. How to fix it?

enter image description here



Solution :

The code you have works as is except you have to remove the float:left from feed-entry. The fiddle is here: http://jsfiddle.net/zLzjnuuz/


    CSS Howto..

    How to emulate table cells with CSS (without float)?

    How to create a form that flys out onto the screen using javascript/css

    How to write this :not “in other element” CSS rule?

    How to display CSS files in Django blog?

    How to do a full bleed background image that scales with resolution in css/javascript? [duplicate]

    How to make div background color transparent in CSS

    How to set angular json model into css

    How do I add a dropdown menu to my css menu?

    How to Assign on demand CSS Styles to some div or class?

    How to Javascript to load a css file only for one specific page?

    CSS - how to make the iframe inside the div center aligned and the main div also center?

    how to select last-child or first-child elements just in parent? (css - html)

    How can I use CSS to create a middle column that fills the height of the page?

    How to addStyleNames “Multiple css classes” into 1 element in UiBinder in GWT?

    How do i add a background image to my header?

    How can I style a disabled button in a Windows 8 JavaScript app?

    How to refer to an anchor pane in css?

    how to select margin for a background image in CSS/CSS3?

    How to apply asynchronously fetched CSS into view

    How to position
    below rest of elements

    How to center a div and keep the alignment to its nested floating divs?

    How to apply css background color to text only, in datatables cell

    how to trace this computed CSS value in firefox inspector?

    How to add css class by default for all the images

    CSS property padding-top only works on the first element of a list. How do I apply to all the elements?

    Writing “$('#dialog').modal('show');” as plain javascript?

    How to prevent content from being pushed down on appearance of floating menu in mobile display

    How to use CSS to vertically center a form in a div

    How to make google maps fit the mobile device screen

    How can I get a button on the side of a text box to be perfectly aligned all the time?