Embed one div within another div in a flexible layout design

Question

Embed one div within another div in a flexible layout design

I am working on a design where I need to place a div (profile picture) inside another div (profile banner) in a way that the profile picture is slightly outside of the outer div. This may sound complicated, but I only need it to display this way on desktop - mobile and tablet views can be different.

Here is an example image of what I am aiming for: https://i.sstatic.net/8V6ev.png

My goal is to create a responsive layout with a div inside another div, where the inner div extends slightly beyond the outer div. It needs to be responsive to accommodate varying screen resolutions.

I must admit that this is more of a request rather than an answer, as I am unsure how to achieve this myself.

html css

Answer 1

Answer №1

To position the inner div properly, ensure you use position:absolute; for the inner div and position:relative; for the outside div. To place text after the profile picture within the parent box, add padding left to the parent box. Check out the DEMO for a visual example.

.user-info{
  background:#444;
  position:relative;
  width:100%;
  height:200px;
  box-sizing:border-box;
  padding:16px 16px 16px 216px;
  color:#FFF;
  font-size:32px;
  }
  .profile-picture{
    background:#444;
    width:150px;
    height:150px;
    position:absolute;
    border:2px solid #FFF;
    left:50px;
    bottom:-50px;
    color:#FFF;
    text-align:center;
  }

<div class="user-info">
  <div class="profile-picture">Profile Picture</div>
  
  User Information
</div>

If you wish to make the design responsive, consider using media queries. Resize to see how it adjusts by checking out the DEMO.

Answer 2

To position the inner div properly, ensure you use position:absolute; for the inner div and position:relative; for the outside div. To place text after the profile picture within the parent box, add padding left to the parent box. Check out the DEMO for a visual example.

.user-info{
  background:#444;
  position:relative;
  width:100%;
  height:200px;
  box-sizing:border-box;
  padding:16px 16px 16px 216px;
  color:#FFF;
  font-size:32px;
  }
  .profile-picture{
    background:#444;
    width:150px;
    height:150px;
    position:absolute;
    border:2px solid #FFF;
    left:50px;
    bottom:-50px;
    color:#FFF;
    text-align:center;
  }

<div class="user-info">
  <div class="profile-picture">Profile Picture</div>
  
  User Information
</div>

If you wish to make the design responsive, consider using media queries. Resize to see how it adjusts by checking out the DEMO.

Answer 3

Answer №2

Check out this Codepen demonstration:

http://codepen.io/anon/pen/dpgXqp

* {
  transition: .5s all ease-in-out;
  -webkit-transition: .5s all ease-in-out;
  -moz-transition: .5s all ease-in-out;
  -ms-transition: .5s all ease-in-out;
  -o-transition: .5s all ease-in-out;
}
.propic {
  border: 2px solid #e2e2e2;
  margin-top: -130px;
  margin-left: 70px;
}
.cover {
  border: 2px solid #e2e2e2;
  margin-left: 50px;
  margin-top: 20px;
}
.propic:hover,
.cover:hover {
  box-shadow: 0 0 10px 10px #9f9f9f;
  -webkit-box-shadow: 0 0 10px 10px #9f9f9f;
  -moz-box-shadow: 0 0 10px 10px #9f9f9f;
  -ms-box-shadow: 0 0 10px 10px #9f9f9f;
  -o-box-shadow: 0 0 10px 10px #9f9f9f;
}

<img src="http://4.bp.blogspot.com/-2UPJD5hegLs/UR4MlzkGTUI/AAAAAAAAAWk/xpff536gpIQ/s1600/mycover.jpg" alt="Cover_Photo" class="cover" />
<br />
<img src="http://4.bp.blogspot.com/-b3Ty2n3mrOc/UR4MAXUXHDI/AAAAAAAAAWQ/CS31CdrnNY8/s1600/profp.jpg" class="propic" alt="Profile_picture" />

Find the live demo on Codepen here:

http://codepen.io/anon/pen/dpgXqp

Answer 4

Check out this Codepen demonstration:

http://codepen.io/anon/pen/dpgXqp

* {
  transition: .5s all ease-in-out;
  -webkit-transition: .5s all ease-in-out;
  -moz-transition: .5s all ease-in-out;
  -ms-transition: .5s all ease-in-out;
  -o-transition: .5s all ease-in-out;
}
.propic {
  border: 2px solid #e2e2e2;
  margin-top: -130px;
  margin-left: 70px;
}
.cover {
  border: 2px solid #e2e2e2;
  margin-left: 50px;
  margin-top: 20px;
}
.propic:hover,
.cover:hover {
  box-shadow: 0 0 10px 10px #9f9f9f;
  -webkit-box-shadow: 0 0 10px 10px #9f9f9f;
  -moz-box-shadow: 0 0 10px 10px #9f9f9f;
  -ms-box-shadow: 0 0 10px 10px #9f9f9f;
  -o-box-shadow: 0 0 10px 10px #9f9f9f;
}

<img src="http://4.bp.blogspot.com/-2UPJD5hegLs/UR4MlzkGTUI/AAAAAAAAAWk/xpff536gpIQ/s1600/mycover.jpg" alt="Cover_Photo" class="cover" />
<br />
<img src="http://4.bp.blogspot.com/-b3Ty2n3mrOc/UR4MAXUXHDI/AAAAAAAAAWQ/CS31CdrnNY8/s1600/profp.jpg" class="propic" alt="Profile_picture" />

Find the live demo on Codepen here:

http://codepen.io/anon/pen/dpgXqp

Answer 5

Answer №3

.wrapper{
    width: 400px;
    height:200px;
    background-color:red;
}
.box{
position: absolute;
    left: 100px;
    top: 150px;
    width:300px;
    height:200px;
    background-color: green;
}

<div class="wrapper">
   
</div>
 <div class="box">
    </div>

Answer 6

.wrapper{
    width: 400px;
    height:200px;
    background-color:red;
}
.box{
position: absolute;
    left: 100px;
    top: 150px;
    width:300px;
    height:200px;
    background-color: green;
}

<div class="wrapper">
   
</div>
 <div class="box">
    </div>

Embed one div within another div in a flexible layout design

Answer №1

Answer №2

Answer №3

Similar questions

Experiencing difficulties with retrieving form data in req.body using Express and node.js

What benefits does utilizing unordered lists provide in navigation bars?

Vuetify's scrolling list feature allows for smooth navigation through a list

MySQL Entry Update Failure

Issues with PHP Code for Displaying Profile Images

Unable to interact with web element

Removing focus in Meterial-UI [Select] component when clicked outside: Techniques and solutions

Having trouble with CSS messing up your gridview button display?

AngularJS textbox failing to recognize line breaks as expected

Unique ideas for organizing the layout and loading of content on my website

Revamping Slideshows: Bringing CSS Animation to JavaScript

Tips for achieving a static background image while allowing scrolling on a webpage in asp.net

Styling is not being applied to the DataTable when it is invoked through an ajax

How is it possible for flex-direction to function correctly even when display: flex is not explicitly defined

Steps to update the action attribute in a form element upon clicking a button

What is the process for converting HTML assets into a SCORM package?

Having trouble sending correct true/false values for selected radio buttons on an Angular5 table, often requiring users to click them twice to submit the appropriate values

Steps for adding a navbar that slides horizontally and overlaps other links on a webpage

How can floats be used to implement margin on a container using CSS?

My body's padding-right is being altered by Bootstarp/CSS Popup