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

Html – Two div at single line with 1 div at left side and another 1 at furthest right side

im trying to make a header with 1 div with title and subtitle will be on the top left and the img will be at the same line with title and subtitle but on the top right.

But now my img div will always be at the 2nd line and not in the same line.

I tried float to right side, display inline but doesnt work. Any advice thanks!

My code
html

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="../styles/popup.css">
    <link href="https://db.onlinewebfonts.com/c/7200c6dd8ac604abe09f5159e53a40c0?family=Mark+Pro" rel="stylesheet">
</head>


<body>

    <div id="main-header-wrapper">
        <div id="main-header">
            <span id="main-header-1">Title</span> <span id="main-header-2">Subtitle</span>
        </div>

        <div id="icon_moreInfo">
            <img
                src="https://banner2.cleanpng.com/20180718/brv/kisspng-computer-icons-icon-design-encapsulated-postscript-more-info-icon-5b4fcee4e70c74.9013090315319569649464.jpg">
        </div>
    </div>


</body>

</html>

css

html {
    width: 279px;
    height: 127x;
   background: #EEEEEE;
}

#body {
    width:100%;
}

#main-header {
    margin-left: 10px;
    margin-top: 12px;
}

#main-header-1 {
    font-family: 'Mark Pro';
    font-style: normal;
    font-weight: 450;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: -0.02em;
    color: #000000;
}

#main-header-2 {
    font-family: 'Mark Pro';
    font-style: normal;
    font-weight: 450;
    font-size: 10px;
    line-height: 100%;
    letter-spacing: -0.02em;
    color: #5D5D5D;
}
.icon_moreInfo{
  width: 12px;
  height: 12px;
  float:right;
 }

img{
  height:12px;
  width:12px;
}

.main-header-wrapper{
  margin:0 auto;
}

codepen link:https://codepen.io/james263/pen/LYqwwEd

Tags:

2

Answers


  1. 0

    Use the flex property and replace the below code to set the title on the left side and the image on the right side.

    html {
    width: 279px;
    height: 127x;
    background: #EEEEEE;
}

#body {
    width: 100%;
}

#main-header-wrapper {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

#main-header-1 {
    font-family: 'Mark Pro';
    font-style: normal;
    font-weight: 450;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: -0.02em;
    color: #000000;
}

#main-header-2 {
    font-family: 'Mark Pro';
    font-style: normal;
    font-weight: 450;
    font-size: 10px;
    line-height: 100%;
    letter-spacing: -0.02em;
    color: #5D5D5D;
}

.icon_moreInfo {
    width: 12px;
    height: 12px;
    float: right;
}

img {
    height: 12px;
    width: 12px;
}

.main-header-wrapper {
    margin: 0 auto;
}
    <div id="main-header-wrapper">
    <div id="main-header">
        <span id="main-header-1">Title</span> <span id="main-header-2">Subtitle</span>
    </div>
    <div id="icon_moreInfo">
        <img src="https://banner2.cleanpng.com/20180718/brv/kisspng-computer-icons-icon-design-encapsulated-postscript-more-info-icon-5b4fcee4e70c74.9013090315319569649464.jpg" alt="Image">
    </div>
</div>
    Login or Signup to reply.
  2. 0

    I hope this example helps you:

    html {
      width: 279px;
      height: 127x;
      background: #EEEEEE;
    }

    #main-header {
      margin-left: 10px;
      margin-top: 12px;
      float: left;
    }

    #main-header-1 {
      font-family: 'Mark Pro';
      font-style: normal;
      font-weight: 450;
      font-size: 18px;
      line-height: 100%;
      letter-spacing: -0.02em;
      color: #000000;
    }

    #main-header-2 {
      font-family: 'Mark Pro';
      font-style: normal;
      font-weight: 450;
      font-size: 10px;
      line-height: 100%;
      letter-spacing: -0.02em;
      color: #5D5D5D;
    }

    #icon_moreInfo {
      float: left;
      margin-top: 12px;
      margin-left: 5px;
    }

    img {
      height: 12px;
      width: auto;
    }

    #main-header-wrapper {
      margin: 0 auto;
    }
    <div id="main-header-wrapper">
    <div id="main-header">
      <span id="main-header-1">Title</span> <span id="main-header-2">Subtitle</span>
    </div>

    <div id="icon_moreInfo">
      <img
        src="https://banner2.cleanpng.com/20180718/brv/kisspng-computer-icons-icon-design-encapsulated-postscript-more-info-icon-5b4fcee4e70c74.9013090315319569649464.jpg">
    </div>
  </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search