Question 193135 in Html Question posted in
Some basic documentation can be found here.

Html – I want the third div to sit below the first two in this flex layout, but am unable to achieve that

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-size: 15px;
  font-family: 'Times New Roman', Times, serif;
}

.container {
  margin: 50px auto 0;
  border: 2px black solid;
  width: 90%;
  height: auto;
  display: flex;
}

.header {
  text-align: center;
  justify-content: center;
  margin: auto;
  font-size: 15px;
}

.heading {
  justify-content: flex-start;
  flex-direction: column;
}
<div class="container">

  <div class="logo">
    <img src="css/logo.png" height="125px" width="125px" id="logo_img" alt="">
  </div>

  <div class="header">
    <h3>DEPARTMENT OF FORENSIC MEDICINE <br> POST GRADUATE INSTITUTE OF MEDICAL EDUCATION AND <br> RESEARCH,CHANDIGARH</h3>
  </div>

  <hr>
  <div class="heading">
    <h3>Forensic Toxicology Laboratory</h3>
  </div>
</div>

My print layout has the logo and the multi line heading as the header. There is a heading that will be placed below that. I’m unable to put the heading below the header.

I would also like to add a horizontal line above and below the heading:

I’m hoping to create this:

Tags:

2

Answers


  1. 0

    This is one approach you could follow, with explanatory comments in the code:

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-size: 15px;
  font-family: 'Times New Roman', Times, serif;
}

.container {
  margin: 50px auto 0;
  border: 2px black solid;
  width: 90%;
  height: auto;
  display: flex;
  /* setting a gap between adjacent elements in the flex layout: */
  gap: 1rem;
  /* shorthand, to set:
       flex-direction: row;
       flex-direction: wrap; */
  flex-flow: row wrap;
}

.header {
  text-align: center;
  justify-content: center;
  margin: auto;
  font-size: 15px;
}

.heading {
  /* setting the flex-basis of the element to take 100% of the
     available space; effectively forcing it to take the
     entirety of a 'line,' and therefore forcing it to the next
     line of the layout: */
  flex-basis: 100%;
  justify-content: start;
}

hr {
/* setting the size of the element (the "thickness") */
block-size: 0.1rem;
/* setting the background-color to take the color: */
background-color: currentColor;
color: black;
/* setting the element to base its inline-size to be on 80%
   of the available space: */
flex-basis: 80%;
/* centering the element on the inline-axis: */
margin-inline: auto;
}

h3 {
  padding-block: 2rem;
  text-align: center;
}
    <div class="container">

  <div class="logo">
    <img src="css/logo.png" height="125px" width="125px" id="logo_img" alt="">
  </div>

  <div class="header">
    <h3>DEPARTMENT OF FORENSIC MEDICINE <br> POST GRADUATE INSTITUTE OF MEDICAL EDUCATION AND <br> RESEARCH,CHANDIGARH</h3>
  </div>

  <hr>
  <div class="heading">
    <h3>Forensic Toxicology Laboratory</h3>
  </div>
</div>

    References:

    Login or Signup to reply.
  2. 0

    You have to create a container for the row (logo + header) with flex-direction: row; and change the .container layout to flex-direction: column;.

    The result I get:
    My result

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-size: 15px;
    font-family: "Times New Roman", Times, serif;
}

.container {
    margin: 50px auto 0;
    border: 2px black solid;
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: column; /* First layout: column */
}

.row {
    display: flex;
    flex-direction: row; /* Second layout: row */
}

.header {
    text-align: center;
    justify-content: center;
    margin: auto;
    font-size: 15px;
}

.heading {
    border-top: 2px solid black;
    text-align: center;
}
    <div class="container"><!-- column layout -->
    <div class="row"><!-- row layout -->
        <div class="logo">
            <img src="css/logo.png" height="125px" width="125px" id="logo_img" alt="" />
        </div>

        <div class="header">
            <h3>
                DEPARTMENT OF FORENSIC MEDICINE <br />
                POST GRADUATE INSTITUTE OF MEDICAL EDUCATION AND <br />
                RESEARCH,CHANDIGARH
            </h3>
        </div>
    </div>

    <div class="heading">
        <h3>Forensic Toxicology Laboratory</h3>
    </div>
</div>

    Another solution is to use the CSS Grid layout to set .container to be a 2 by 2 grid and then place logo, header and heading with grid-row and grid-column.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search