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

Html – How to top align child divs in parent divs

I’m having a problem with aligning in CSS. What I have here: https://jsfiddle.net/kay297/snvfubkp/2/
I want to make an "About me" page like with the layout like in the image below:
Sample about me website

In what I have, the red block is a placeholder for the image. On the right side, even though I added vertical-align: top for the header class and vertical-align: middle for the description class, they still sit at the bottom of the container or text-container.

Can anyone enlighten me on this?

Tags:

2

Answers


  1. 0

    That’s the correct CSS command you want:

    vertical-align: top

    I think you were just applying it to the wrong div. Here’s your jsfiddle with the correction:

    https://jsfiddle.net/zj8293ru/

    Login or Signup to reply.
  2. 0

    You need to something like this
    The html:

    <!DOCTYPE html>
<html lang="en">
    <head>
      <title>homepage</title>
    </head>
    <body>
          <div id="container">
            <div class="block"></div>
            <div class="text-container1">
              <div class="header">This is me</div>
              <div class="description1">Hi this is the description part</div>
            </div>
          </div>
    </body>
</html>

    The css:

    #container {
    width: 100%;
    height: 400px;
    white-space: nowrap;
    display: inline-flex;
}
.block {
    width: 225px;
    height: 400px;
    margin-left: 2%;
    margin-right: 5%;
    display: inline-block;
    background-color: red;
}
.text-container1 {
    white-space: normal;
}

    If you replace header with <h1> and description1 with <p> the page will look like the example

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

Back To Top
Search