Why my “title” bloc doesn’t go to bottom?

by Code Error
Posted By: Anonymous

I would like to center my title towards the bottom, except that my problem is that my title doesn’t go to bottom. I don’t understand why?

I think my HTML blocs are correct? Or perhaps that I have to use a proprity in CSS particular?

I tried this:

.service .title {
  background-color: red;
  text-align: center;
  font-size: 40px;
  display: block;
}

Here is an idea of the HTML code

 <!-- Service Start -->
     <div class="service">
        <div class="t-container">
            <div class="section-header">
              <p>my first title a</p>
            </div>
        </div>
      <div class="title">second titre</div>
    </div>
<!-- Service End -->

Thank you in advance for your help and your time.

_x000D_

_x000D_

/*******************************/
/********** About CSS **********/
/*******************************/

.about {
  position: relative;
  width: 100%;
}


.about .container {
  width: 50%;
  float: right;
  padding: 70px 30px 0px 30px;
}


.section-header p {
  position: relative;
  font-size: 16px;
}


.section-header p::after,
.section-header p::before {
position: absolute;
content: "";
height: 2px;
width: 35px;
background: #F7CAC9;
z-index: -1;
}


.section-header p::after {
  top: 11px;
  margin: 0 10px;
}


.section-header p::before {
  top: 11px;
  margin-left: -45px;    
}


.container  .section-header p{
  margin-left: 45px;
}

.about .section-header-title {
  font-size: 40px;
  font-weight: 700;
  margin: 0;
  position: relative;
}

.about .container .about-text p{
  width: 80%;
  font-size: 16px;
  padding-bottom: 15px;
}

.about .about-text a.btn {
  position: relative;
  margin-top: 15px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #F7CAC9;
  background: #343148;
  border-radius: 0;
  transition: .3s;
}

.about .about-text a.btn:hover {
  color: #343148;
  background: #F7CAC9;
}

.about .about-img img {
  float: right;
  padding-top: 70px;
  height: 400px; 
}



/*******************************/
/********* Service CSS *********/
/*******************************/

.service {
  position: relative;
  width: 100%;

}

.service .t-container {
  width: 50%;
  float: right;
  padding: 10px 30px 40px 30px;

}

.t-container .section-header p{
  margin-left: 45px;
  
}

.service .title {
  background-color: red;
  text-align: center;
  font-size: 40px;
  display: flex;
  align-self: flex-end;
}

_x000D_

<!-- About Start -->
        <div class="about">
          <div class="container">
              <div class="section-header">
                <p>my first title a</p>
              </div>
              <h2 class="section-header-title">my second title</h2>
              <div class="about-text">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem. Curabitur non nisl nec nisi scelerisque maximus.
                </p>
                <a class="btn" href="">Learn More</a>
            </div>
          </div>
          <div class="about-img">
            <img src="https://zupimages.net/up/21/21/54ov.png" alt="Image">
          </div>
        </div>
        <!-- About End -->    
        
        <!-- Service Start -->
        <div class="service">
          <div class="t-container">
              <div class="section-header">
                  <p>my first title a</p>
              </div>
          </div>
          <div class="title">second titre</div>
      </div>
      <!-- Service End -->

_x000D_

_x000D_

_x000D_

Solution

Let’s break this into parts.

Your .about block takes the full width of the page, but the content inside it is floated, which changes the layout. If you open your browser developer tools and mouse over the different DOM nodes, you’ll see that your .about div is zero pixels tall, and then its content blows outside its bounds because of the floating.

So essentially you have this zero-pixel-tall div at the top of the page and then your title with the red background below that. And where is something that’s below something that’s zero pixels tall? Still at the top of the page.

First let’s see what happens when we clearfix the about section:

_x000D_

_x000D_

.about::after { /* NEW CODE */
  content: '';
  display: table;
  clear: both;
}

/*******************************/
/********** About CSS **********/
/*******************************/

.about {
  position: relative;
  width: 100%;
}


.about .container {
  width: 50%;
  float: right;
  padding: 70px 30px 0px 30px;
}


.section-header p {
  position: relative;
  font-size: 16px;
}


.section-header p::after,
.section-header p::before {
position: absolute;
content: "";
height: 2px;
width: 35px;
background: #F7CAC9;
z-index: -1;
}


.section-header p::after {
  top: 11px;
  margin: 0 10px;
}


.section-header p::before {
  top: 11px;
  margin-left: -45px;    
}


.container  .section-header p{
  margin-left: 45px;
}

.about .section-header-title {
  font-size: 40px;
  font-weight: 700;
  margin: 0;
  position: relative;
}

.about .container .about-text p{
  width: 80%;
  font-size: 16px;
  padding-bottom: 15px;
}

.about .about-text a.btn {
  position: relative;
  margin-top: 15px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #F7CAC9;
  background: #343148;
  border-radius: 0;
  transition: .3s;
}

.about .about-text a.btn:hover {
  color: #343148;
  background: #F7CAC9;
}

.about .about-img img {
  float: right;
  padding-top: 70px;
  height: 400px; 
}



/*******************************/
/********* Service CSS *********/
/*******************************/

.service {
  position: relative;
  width: 100%;

}

.service .t-container {
  width: 50%;
  float: right;
  padding: 10px 30px 40px 30px;

}

.t-container .section-header p{
  margin-left: 45px;
  
}

.service .title {
  background-color: red;
  text-align: center;
  font-size: 40px;
  display: flex;
  align-self: flex-end;
}

_x000D_

<!-- About Start -->
        <div class="about">
          <div class="container">
              <div class="section-header">
                <p>my first title a</p>
              </div>
              <h2 class="section-header-title">my second title</h2>
              <div class="about-text">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem. Curabitur non nisl nec nisi scelerisque maximus.
                </p>
                <a class="btn" href="">Learn More</a>
            </div>
          </div>
          <div class="about-img">
            <img src="https://zupimages.net/up/21/21/54ov.png" alt="Image">
          </div>
        </div>
        <!-- About End -->    
        
        <!-- Service Start -->
        <div class="service">
          <div class="t-container">
              <div class="section-header">
                  <p>my first title a</p>
              </div>
          </div>
          <div class="title">second titre</div>
      </div>
      <!-- Service End -->

_x000D_

_x000D_

_x000D_

Okay, now we’ve moved below the top section, but our title is still not below the other content in the service section. Why? Because .t-container is floated to the right.

So the simplest solution here is to take the exact same styles you have on .t-container and throw those onto your title, and the issue is basically fixed (even if the padding isn’t quite what you want; you can tweak that as necessary).

_x000D_

_x000D_

.about::after { /* NEW CODE */
  content: '';
  display: table;
  clear: both;
}

.service .title { /* NEW CODE */
  float: right;
  width: 50%;
  padding: 10px 30px 40px 30px;
}

/*******************************/
/********** About CSS **********/
/*******************************/

.about {
  position: relative;
  width: 100%;
}


.about .container {
  width: 50%;
  float: right;
  padding: 70px 30px 0px 30px;
}


.section-header p {
  position: relative;
  font-size: 16px;
}


.section-header p::after,
.section-header p::before {
position: absolute;
content: "";
height: 2px;
width: 35px;
background: #F7CAC9;
z-index: -1;
}


.section-header p::after {
  top: 11px;
  margin: 0 10px;
}


.section-header p::before {
  top: 11px;
  margin-left: -45px;    
}


.container  .section-header p{
  margin-left: 45px;
}

.about .section-header-title {
  font-size: 40px;
  font-weight: 700;
  margin: 0;
  position: relative;
}

.about .container .about-text p{
  width: 80%;
  font-size: 16px;
  padding-bottom: 15px;
}

.about .about-text a.btn {
  position: relative;
  margin-top: 15px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #F7CAC9;
  background: #343148;
  border-radius: 0;
  transition: .3s;
}

.about .about-text a.btn:hover {
  color: #343148;
  background: #F7CAC9;
}

.about .about-img img {
  float: right;
  padding-top: 70px;
  height: 400px; 
}



/*******************************/
/********* Service CSS *********/
/*******************************/

.service {
  position: relative;
  width: 100%;

}

.service .t-container {
  width: 50%;
  float: right;
  padding: 10px 30px 40px 30px;

}

.t-container .section-header p{
  margin-left: 45px;
  
}

.service .title {
  background-color: red;
  text-align: center;
  font-size: 40px;
  display: flex;
  align-self: flex-end;
}

_x000D_

<!-- About Start -->
        <div class="about">
          <div class="container">
              <div class="section-header">
                <p>my first title a</p>
              </div>
              <h2 class="section-header-title">my second title</h2>
              <div class="about-text">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem. Curabitur non nisl nec nisi scelerisque maximus.
                </p>
                <a class="btn" href="">Learn More</a>
            </div>
          </div>
          <div class="about-img">
            <img src="https://zupimages.net/up/21/21/54ov.png" alt="Image">
          </div>
        </div>
        <!-- About End -->    
        
        <!-- Service Start -->
        <div class="service">
          <div class="t-container">
              <div class="section-header">
                  <p>my first title a</p>
              </div>
          </div>
          <div class="title">second titre</div>
      </div>
      <!-- Service End -->

_x000D_

_x000D_

_x000D_

The best solution here, though, is probably to rethink your CSS a bit. There’s a million ways you could do that, but here’s one simple example as a starting place:

If, instead of floating things, we use display: flex on the about section, that’ll take care of the zero-height problem. We can then remove the floats in the service section and just use margin-left: auto to move some elements to the right side of the screen while maintaining normal document flow.

The spacing of individual parts may need some tweaking after those changes, but those shoud be more straightforward changes for you to make.

_x000D_

_x000D_

/*******************************/
/********** About CSS **********/
/*******************************/

.about {
  position: relative;
  width: 100%;
  display: flex; /* NEW */
  flex-direction: row-reverse; /* NEW */
}


.about .container {
  width: 50%;
  /* float: right; */ /* REMOVED */
  padding: 70px 30px 0px 30px;
}


.section-header p {
  position: relative;
  font-size: 16px;
}


.section-header p::after,
.section-header p::before {
position: absolute;
content: "";
height: 2px;
width: 35px;
background: #F7CAC9;
z-index: -1;
}


.section-header p::after {
  top: 11px;
  margin: 0 10px;
}


.section-header p::before {
  top: 11px;
  margin-left: -45px;    
}


.container  .section-header p{
  margin-left: 45px;
}

.about .section-header-title {
  font-size: 40px;
  font-weight: 700;
  margin: 0;
  position: relative;
}

.about .container .about-text p{
  width: 80%;
  font-size: 16px;
  padding-bottom: 15px;
}

.about .about-text a.btn {
  position: relative;
  margin-top: 15px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #F7CAC9;
  background: #343148;
  border-radius: 0;
  transition: .3s;
}

.about .about-text a.btn:hover {
  color: #343148;
  background: #F7CAC9;
}

.about .about-img { /* NEW */
  width: 50%;
}

.about .about-img img {
  /* float: right; */ /* REMOVED */
  padding-top: 70px;
  height: 400px; 
}



/*******************************/
/********* Service CSS *********/
/*******************************/

.service {
  position: relative;
  width: 100%;
}

.service .t-container {
  margin-left: auto;
  width: 50%;
  /* float: right; */ /* REMOVED */
  padding: 10px 30px 40px 30px;

}

.t-container .section-header p{
  margin-left: 45px;
  
}

.service .title {
  background-color: red;
  text-align: center;
  font-size: 40px;
  display: flex;
  align-self: flex-end;
  width: 50%; /* NEW */
  margin-left: auto; /* NEW */
}

_x000D_

<!-- About Start -->
        <div class="about">
          <div class="container">
              <div class="section-header">
                <p>my first title a</p>
              </div>
              <h2 class="section-header-title">my second title</h2>
              <div class="about-text">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem. Curabitur non nisl nec nisi scelerisque maximus.
                </p>
                <a class="btn" href="">Learn More</a>
            </div>
          </div>
          <div class="about-img">
            <img src="https://zupimages.net/up/21/21/54ov.png" alt="Image">
          </div>
        </div>
        <!-- About End -->    
        
        <!-- Service Start -->
        <div class="service">
          <div class="t-container">
              <div class="section-header">
                  <p>my first title a</p>
              </div>
          </div>
          <div class="title">second titre</div>
      </div>
      <!-- Service End -->

_x000D_

_x000D_

_x000D_

Answered By: Anonymous

Related Articles

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Leave a Reply

Your email address will not be published. Required fields are marked *