How was this really cool layout achieved?

HTML & CSS
, ,
1

Hey everyone,

Yesterday a mentor of mine recommended some resources on this site and when I signed up we both noticed something really cool and we asked ourselves how this effect was achieved:

As he often does he’ll let me figure it out by myself first. This is a screenshot of an SVG image inside a div and it is halfway on top and centered on this div. I used the inspector to find more about it but could not quite find what was it that did it.

I tried doing it myself here: http://codepen.io/Redrogue12/pen/xqyVeo

I don’t know if that is the same method but if anyone has any insight please send it my way!

2

Almost.
Avoid the absolute positioning, let flex handle it. You then just need align-items to vertically centre it.

.box {
  margin: 100px;
  width: 200px;
  height: 200px;
  background-color: #F45D01;
  display: flex;
  justify-content: center;
  position: relative;
  align-items: center; /* added this */
}

img {
  width: 50%;
  height: 50%;
/* removed position */
}
1 Like
3

Thank you! I missed that one detail. I’m starting to learn flexbox.

I was going to ask you to analyze with me the image with the inspect tool because when I first looked at it I didn’t see any flexbox being used, or anything that made sense to me to position the image in that way but the problem is I cannot find a way to reach that page again…unless we made a new account to land in the same page lol.

4

There are other ways to centre things, display: table-cell allows vertical centring. For something simple like an image in a box, just a padding/margin surround could work.

5

Thank you Sam. I will experiment with those methods. Take care.

6

@exgc12 this was created by our talented Senior Dev @mrlagmer

Heres how it works:

The parent div does have {display: flex; flex-direction: column; align-items: center; }.

Nothing special is done to the image other than giving it z-index: 1; to keep it on top of the following paragraph.

The paragraph (with teal background colour) has:padding-top: 64px; position: relative; bottom: 64px;
Setting the bottom moves the p up 64px from where it would have normally been positioned in the document. The padding-top makes the content of the p (the text) move back down 64px from its top.

Heres your pen updated to match http://codepen.io/BradDenver/pen/aJQped

You can visit the interest page any time you are logged in at https://www.sitepoint.com/premium/interests

Hope this helps @exgc12 and thanks for contributing @SamA74

5 Likes
7

Hey Brad!

I read your response real quick and only paid attention to the align-items: center, then I tried doing everything by myself from scratch and still couldn’t achieve the same effect UNTIL I checked everything line by line and found out the main difference: I was applying the background color to the Div and the effect was being done by the background color of the paragraph with the margin top of 64px.

Amazing thing. It would have never occurred to me to do it that way. Another cool thing I just realized about that approach is that since the Div has the same dimensions I won’t have to worry about unexpected layout behavior

Thanks a ton for the lesson and please say thanks to @mrlagmer from my part if you see him.

Edgar X. .

3 Likes
8

But your code doesn’t work. It centers the image within the box but it doesn’t pull it out of the box.

9

I think it’s how the question was interpreted. It is not always clear from just an image what the OP it trying to achieve. I thought this was about centring an element within the div, which has been a common question in css for a long time.
Of course it needs some relative positioning to shift the element from its original position in the flow and break out of the box, as Brad explained.

2 Likes
10

It doesn’t use flex for the actual positioning but here’s mine.

<main>
  <div class="c-box">
    <img src="https://goo.gl/60CwPV" alt="Computer Cartoon" class="c-box__img"/>

    <p class="c-box__text">Almost there! Tell us a bit about yourself so we can tailor your SitePoint experience.</p>
  </div>
</main>

*,
*::after,
*::before
{
 /* If you don't take anything else, take this. It'll prevent "quirks" */ 
  box-sizing: border-box;
}

main
{
  background-color: #f7f7f7;
  font-family: sans-serif;
  line-height: 1.5;
  
  height: 100vh;
  margin: 0;
  padding: 0;

  display: flex;
}

.c-box
{
  background-color: #72dfe1;
  
  width: 230px;
  margin: auto;
  padding: 1em;
}

.c-box__img
{
  display: block;
  width: 50%;
  margin: calc(-25% - 1em) auto 1em;
}

.c-box__text
{
  font-weight: bold;
  text-align: left;
  margin: 0;
}
11

I’ve been looking at @Brad_Denver’s code since yesterday and though it works, it’s so conterintuitive to me - the way he uses .box :pensive:

12

Hey @julia.s.m I tried your solution and I liked it a lot. Thanks for taking the time to share it with me.

1 Like
13

You’re welcome. :blush:

14

I noticed something in the CSS. Remove

  margin: 0;
  padding: 0;

from main and put it in body.

15

Better late than never… a no-flex, no-calc, impressively adaptable solution. Test the behavior by zooming the text size larger and smaller. Also, change the .box width using px and using percent.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>"HowTo" this display 5</title>
<!--
http://extra.shu.ac.uk/yorkshirecrafts/screen20shots/screen/DMR30b.jpg
-->
    <style type="text/css">
html {
    box-sizing:border-box;
}
*,*::after,*::before {
    box-sizing: inherit;
}
body {
    background-color:#eee;
    padding:0;
    margin:0;
}

.box {
    display:table;
    width:230px;  /* treated as min-width */
    margin:16px auto;
}

img {
    display:block;
    width:50%;
    margin:0 auto -22%;
}

p {
    background-color: #72dfe1;
    font-weight:bold;
    line-height:1.5;
    text-align:center;
    padding:25% 1em 1em;
    margin:0;
}
    </style>
</head>
<body>

<div class="box">
    <img src="https://goo.gl/60CwPV" alt="Computer Cartoon">
    <p>Almost there! Tell us a bit about yourself so we can tailor your SitePoint experience.</p>
</div>

</body>
</html>
2 Likes
16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.