How to make a div stick to the top of a parent container

Question

I am attempting to make a div with a background color stick to the top of its parent container. My goal is to have something structurally resembling this:

I've tried vertical-align:top; and removing padding (which I have left in), but I can't seem to get it to work.

Here is a demo of my current HTML and CSS.

.well {
    min-height: 20px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
}

.section-title {
  background-color: lightblue;
  width: auto;
  display: block;
}

<section class="well">
    <div class="section-title">
        <p>/title/</p>
    </div>
    <p>section content</p>
</section>

`.section-title p { margin:0 }` – Calvin Nunes Dec 07 '20 at 20:11 — Calvin Nunes, Dec 07 '20 at 20:11

score 4 · Accepted Answer · answered Dec 07 '20 at 20:15

The p element by almost all user agents have a default margin property attached to them. Remove the margin and apply padding. See my example.

.well {
    min-height: 20px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
}

.section-title {
  background-color: lightblue;
  width: auto;
  display: block;
}

p {
  padding: 10px;
  margin: 0;
}

<section class="well">
    <div class="section-title">
        <p>/title/</p>
    </div>
    <p>section content</p>
</section>

How to make a div stick to the top of a parent container

1 Answers1