CSS header with logo on the left and multiple paragraph on the far right

Question

When my screen size is 768px and above, I am trying to align the logo to the left and multiple paragraph to the right. See the following pic. But I tried using float and display inline block but the the whole top class will align all the way to the left. It cannot be centralized, to all the gurus out there, please help as I am new in CSS. Thanks.

WHAT I AM TRYING TO ACHIEVE

WHAT I AM FACING

**

body {
    margin:0;
    padding:0;
    font-family: Open Sans;
}

.img-logo{
    width:300px;
    display: block;
    margin-left: auto;
    margin-right: auto;

}

.img-banner{
    width:300px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.top{
    width: 300px;
    margin: 0 auto;
}

.top p {
    text-align: center;
}

.top p b {
    color: #053D66;
}


.header{
    width: 300px;
    margin: 0 auto;
}

.wrapper{
    width: 300px;
    margin: 0 auto;
}

ol.s {
    list-style-type: upper-greek;
}

.img-footer{
    width:100%;
    margin: 0 auto;
}

/* ----------- responsivity ----------- */

@media only screen and (min-width: 768px) {

    .top{
        width: 600px;
        margin: 0 auto;
        display: inline-block; 
    }

    .toright {
        float: right;
      }
      .toleft {
        float: left;
      }

    .img-banner{
        width:600px;
    }

    .header{
        width: 600px;
    }
    
    .wrapper{
        width: 600px;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans">
    <title>Updates</title>

</head>
<body>
    <div class="top">
        <div class="toleft">
            <img class="img-logo" src="http://www.talent-trust.com/documents/img/talent-trust.png" alt="">
        </div>
        <div class="toright">
            <p style="margin:0px"><b style="color:#053D66;">E</b>&nbsp;<a href="mailto:info@talent-trust.com">info@talent-trust.com</a></p>
            <p style="margin:0px"><b style="color:#053D66;">T</b>&nbsp;0757 278 8418</p>
            <p style="margin:0px"><b style="color:#053D66;">W</b>&nbsp;<a href="http://www.talent-trust.com">www.talent-trust.com</a></p>
        </div>
    </div>
    
    <div class="header">
        <p><h2>COVID19 Medical Update for Missionaries, July 2020</h2></p>
        <p>Significant issues remain even if you have insurance</p>
    </div>
 </body>
 </html>

**

[according to this stackoverflow answer](https://stackoverflow.com/questions/4955122/what-exactly-is-needed-for-margin-0-auto-to-work) your problem is that `margin: 0 auto;` does not work on inline-block. — Jannes Carpentier, Aug 03 '20 at 09:00

score 1 · Answer 1 · answered Aug 03 '20 at 09:27

I removed the display: inline-block (since it doesn't work with margin: 0 auto). I also aligned your items using flexbox. Here is some more information on flexblox.

body {
  margin: 0;
  padding: 0;
  font-family: Open Sans;
}

.img-logo {
  width: 300px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.img-banner {
  width: 300px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.top {
  width: 300px;
  margin: 0 auto;
}

.top p {
  text-align: center;
}

.top p b {
  color: #053D66;
}

.header {
  width: 300px;
  margin: 0 auto;
}

.wrapper {
  width: 300px;
  margin: 0 auto;
}

ol.s {
  list-style-type: upper-greek;
}

.img-footer {
  width: 100%;
  margin: 0 auto;
}


/* ----------- responsivity ----------- */

@media only screen and (min-width: 768px) {
  .top {
    width: 600px;
    margin: 0 auto;
    /* display: inline-block; */
    
    /* Using flexbox instead: */
    display: flex;
    justify-content: space-between;
  }
  /*
  .toright {
    float: right;
  }
  .toleft {
    float: left;
  }
  */
  .img-banner {
    width: 600px;
  }
  .header {
    width: 600px;
  }
  .wrapper {
    width: 600px;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans">
  <title>Updates</title>

</head>

<body>
  <div class="top">
    <div class="toleft">
      <img class="img-logo" src="http://www.talent-trust.com/documents/img/talent-trust.png" alt="">
    </div>
    <div class="toright">
      <p style="margin:0px"><b style="color:#053D66;">E</b>&nbsp;<a href="mailto:info@talent-trust.com">info@talent-trust.com</a></p>
      <p style="margin:0px"><b style="color:#053D66;">T</b>&nbsp;0757 278 8418</p>
      <p style="margin:0px"><b style="color:#053D66;">W</b>&nbsp;<a href="http://www.talent-trust.com">www.talent-trust.com</a></p>
    </div>
  </div>

  <div class="header">
    <p>
      <h2>COVID19 Medical Update for Missionaries, July 2020</h2>
    </p>
    <p>Significant issues remain even if you have insurance</p>
  </div>
</body>

</html>

Frinkel · Answer 2 · 2020-08-03T09:29:12.363

I am also relatively new to HTML and CSS, but one thing I would try, is to extend your .top to fill the entire width of the screen. This way float: right; will allow the paragraphs to float all the way to the edge of the screen.

.top{
    width: 100vw;
    margin: 0 auto;
    display: inline-block; 
}

You would probably also want to change the alignment of the text from center to left.

.top p {
    text-align: left;
}

If you don't want the paragraphs to align precisely to the right edge of the screen, you could add some padding.

.toright {
    float: right;
    padding: 0 40px 0 0;
}

You will achieve something like this which scales with the width of the screen.

I am not sure that this is the best solution, but I think you could achieve what you're looking for.

/------ EDIT ------/

If you want to align your .top div you could use display: flex; instead, and set the flow to be of type row, this way maragin: 0 auto; will align the div to the center.

.top{
    width: 600px;
    margin: 0 auto;
    display: flex;
    flex-flow: row;
}

You will achieve something like this

score -1 · Answer 3 · answered Aug 03 '20 at 08:48

-1

While understanding floats and inline blocks is very important.
I'd also suggest learning flex box.

This is a perfect intro use case. You'll be able to get what you want to achieve with it very quickly.

answered Aug 03 '20 at 08:48

Nick

1,080
10
16

CSS header with logo on the left and multiple paragraph on the far right

3 Answers3