1

I am trying to Align 1 of 2 Items above the other while using flex. I have a .section which displays:flex - .main-body which defines the width of the container and then .logo & .content within that. I am not sure where I am messing it up but I am trying to right align .logo over .content (or the smiley in my example below). By using display:flex in .section, I was able to center a container (.main-body) and keep all items within that container set to a specific width- however, when I try to align .logo to the right by using justify-content or any other flex property, there are no changes to the logo's position.

I have found a make shift solution in using "margin-left: XXXpx;" on .logo but that pushes the div container .logo over so that I then get a horizontal scroll.

EDIT: Sorry I think I wasn't very clear (its getting late!). The code snippet below in full screen shows the goal and what I am looking to do without having to use .logo {margin-left: 500px;} to achieve the result. Without the margin-left property, the face is left aligned above the text. Basically I am wondering how I can set this up so it is right aligned above the text utilizing flex.

<!DOCTYPE html>
<head>    
<style>
* {
  margin: 0;
  padding: 0;
}

.container { 
    background: white fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
    width: 100%;
    height: 100vh;
}

.section {
    height: 100vh;
    width:100%;
    display: flex;           
    justify-content: center; 
    align-items: center;   
}

.main-body {
    width: 736px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.logo {
    background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTx0S56P8lrzrjb-7aJX3QG_feOPux89cnLLXF_UJ49tHAys99ccw') no-repeat;
    height: 205px;
    width: 240px;
    display: flex;
    justify-content: right;
    align-self: flex-end;
}

.content {
  font-size: 45px;
  margin-bottom: 20px;
}

.lorem {
  font-size: 18px;
}  
</style>
</head>

<body>
    <div class="container">
            <div class="section">
                <div class="main-body">
                    <div class="logo"></div>
                    <div class="content">
                        <h1>Right Align Smiley</h1>
                    </div>
                    <div class="lorem">
                        <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."</p>                    
                    </div>
            </div>           
    </div>       
</body>
</html>

I made up this example in codepen to show the structure and what I am trying to accomplish but without having to rely on "margin-left" within .logo, How can I accomplish this by using the flex?

Georgi Hristozov
  • 3,899
  • 2
  • 17
  • 23
Gideon B
  • 415
  • 1
  • 3
  • 16
  • I think you should check this ... [two-divs-side-by-side-fluid-display](https://stackoverflow.com/questions/17217766/two-divs-side-by-side-fluid-display) – Pink's Jan 10 '19 at 05:55

3 Answers3

0

Try this:

<!DOCTYPE html>
<head>    
<style>
* {
  margin: 0;
  padding: 0;
}

.container { 
    background: white fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
    width: 100%;
    height: 100vh;
}

.section {
    height: 100vh;
    width:100%;
    display: flex;           
    justify-content: center; 
    align-items: center;   
}

.main-body {
    width: 736px;
}

.logo {
    background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQWvNoFhT3HnWkUhpowyn5Zdu1mwGXA1JpNHqyQenW7upqnfIic') no-repeat;
    height: 229px;
    width:229px;
    float: right;
}

.content {
  font-size: 45px;
  margin-bottom: 20px;
  clear: right;
}

.lorem {
  font-size: 18px;
}  
</style>
</head>

<body>
    <div class="container">
            <div class="section">
                <div class="main-body">
                    <div class="logo"></div>
                    <div class="content">
                        <h1>Right Align Smiley</h1>
                    </div>
                    <div class="lorem">
                        <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."</p>                    
                    </div>
            </div>           
    </div>       
</body>
</html>
j.ian.le
  • 207
  • 4
  • 16
  • Hey, thanks for the reply. I dont think I was clear on what I was looking to do. Basically the result I am going for is shown in the original code I posted above, only to achieve it- margin-left: 500px had to be used in .logo. This creates a horizontal overflow and I was wondering if its possible to achieve the same positioning for .logo using flex rather than relying on margin-left. So basically right-align the smiley face relative to the text below it. – Gideon B Jan 10 '19 at 06:17
  • @GideonB I edited the code answer. I could get the result using flex so I used float instead. The reason you were getting a horizontal overflow is because the width of your logo exceeded the the width of the `main-body` when you used `margin-left`(Try putting a border around `logo` and `main-body` to see this) – j.ian.le Jan 10 '19 at 06:55
  • thanks again for your help! Although your solution worked, it was when you mentioned width that got me looking. I realized by adding display: flex to both .main-body and .logo, I could get the desired result utilizing flex. I believe the issue was with having width set to 100% originally. Once I changed the value to that of to px to reflect the image size I was able to justify-content: right and align-self: flex-end to get the desired result! I have updated my original code above to reflect the fix. Thank you again for your help! I will mark this as solved. – Gideon B Jan 10 '19 at 07:25
0

Adding a screenshot of your goal layout would be great BUT.

Try position absolute, on the logo.

.logo{
  position: absolute; / Could change to fixed if wanted.
  top: 0; // change to get right pos
  right: 0; // change to get right pos
}
T04435
  • 12,507
  • 5
  • 54
  • 54
  • hey there! thanks for the respone, the code snippet posted above in my original post in full screen shows my desired outcome. Only to achieve it I had to use .logo {...margin-left: 500px} - I was wondering if I could achieve the same result only using flex instead, when using margin left I get a horizontal overflow. – Gideon B Jan 10 '19 at 06:14
0

I had a similar problem recently and the best solution for me was using css grid. It allows you to divide your page in several pieces and every element you create can be placed in whatever piece of your page you want. I had tried the margin solution but you will realise that if you try to put another element in the center of the same line your right element will move. Also if you add a link in the logo it might not work as you want. In my case, while clicking the image was leading to the page that was shown in the logo, i could click in many areas in the margin (left of the image) and still go to the logo's page. Take a look at css grids here: https://css-tricks.com/snippets/css/complete-guide-grid/

Bill.G
  • 65
  • 2
  • 8
  • Hey thanks for source! Much appreciated. I am familiar with grid but that seems like a wonderfully in depth write up that I will have to go through. – Gideon B Jan 10 '19 at 08:08