Wednesday

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

Issue

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

Solution

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>

Answered By - Prashant

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Wednesday

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

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels