CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user1272965
user1272965

Reputation: 3064

Child div as tall as parent

I have a bootstrap project with some other CSS that I inherited. I don't want to change any of the existing styles, but I'd like to add a solid-color child div that is flush with its parent on the top, left and bottom edges, and some number of pixels wide (much narrower than the parent).

The parent's classes which I'd like to keep intact are:

.my-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.my-link {
  background-color: transparent;
  padding: 0;
  margin: 0;
  border: 0;
  position: relative;
}

My naive understanding for how to build the child makes me think the CSS should look like:

margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
width: 40px;
background-color: red;

But I still see margins. I've tried several variations changing padding also to no effect. I've seen answers that boil down to display:table-cell (couldn't make that work) or to position:absolute, which makes the child appear outside the parent.

It seems like this ought to be a simple problem, but I'm out of ideas.

Upvotes: 0

Views: 849

Answers (3)

Legin76
Legin76

Reputation: 492

display:table-cell; should work but you may need to have display:table; and display:table-row;

You would need to remove the padding from .my-heading and move it into your content div.

See below.

.my-heading {
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  display: table;
}

.my-link {
  background-color: transparent;
  padding: 0;
  margin: 0;
  border: 0;
  display: table-row;
}
.my-content {
    padding: 10px 15px;
    width: 100px;
    background-color: red;
    display: table-cell;
}
.my-content2 {
    padding: 10px;
    background-color: green;
    display: table-cell;
}

and the html

<div class="my-heading">
    <div class="my-link">
        <div class="my-content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, assumenda quis debitis aliquam aut dicta praesentium laboriosam eligendi placeat ipsa sint saepe vitae porro! Excepturi reiciendis illum at alias minima.
        </div>
        <div class="my-content2">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, aliquid, eligendi, dolore nemo corporis iusto est assumenda cupiditate sapiente cumque incidunt excepturi ipsum nisi! Iure quisquam commodi nemo saepe rem autem minima inventore temporibus? Explicabo, reiciendis, ducimus, quasi alias nobis consectetur accusamus fugiat sed in sit vitae vel maiores itaque culpa magni voluptatum rem dicta est beatae ea. Adipisci, quis aliquam autem voluptas architecto quam asperiores ea ducimus provident harum laboriosam enim beatae ipsam tempore alias voluptatibus dignissimos doloremque recusandae a ullam aut error blanditiis odio labore reprehenderit dolore distinctio accusamus? Dignissimos, ipsam ea officiis nesciunt ipsum rem aut veritatis!
        </div>
    </div>
</div>

I've uploaded the above to bootply http://www.bootply.com/3y7QfF2653

Upvotes: 1

DarkMukke
DarkMukke

Reputation: 2489

Or you could use height: inherit;

example http://jsfiddle.net/j5umnnLd/ ofc if you set the height in the parent you might need a display : block or display : inline-block depening on your content / element type

Upvotes: 1

Josh KG
Josh KG

Reputation: 5140

Make the child an absolutely positioned element, and give the parent a position of relative so that it properly anchors the child. Then use CSS properties left, bottom, top to move the child against the edges.

Upvotes: 0

Related Questions