How to Position a Div in a specific area? [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am using Bootstrap and I am trying to create a similar layout to one used by twitter as seen in the screenshot below.
The Part I am trying to do is where the profile picture is. I am trying to add a div that is positioned over another div and I really have no idea where to start.
I have the nav and the blue container but not sure how to create the div on top like shown.
http://www.bootply.com/v7fKXw63nh
Any ideas?

Answer 1

Try using the relative or absolute CSS positions.
For example, put the following code at the bottom of your example.
<div style="position: absolute;
left: 150px;
top: 120px;
width: 75px;
height: 75px;
background-color: #666"></div>

Answer 2

#profileWrapper {
width: 100%;
height: 150px;
background: lightgray;
position: relative;
}
#topHeader {
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
background: lightblue;
border-radius: 10px;
}
#profiler {
width: 100px;
height: 100px;
background: lightblue;
border: 5px solid lightgray;
border-radius: 5px;
position: absolute;
bottom: -50px;
left: 50px;
text-align: center;
}
.fa {
color: lightgray;
display: table-cell;
height: 200px;
vertical-align: middle;
}
.fa:hover {
color: white;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div id="profileWrapper">
<div id="topHeader">
<div id="profiler"><span class="fa fa-camera fa-3x"></span>
</div>
</div>
</div>

Answer 3

Fiddle link (Don't forget to resize the demo section in fiddle)
HTML:
<div class="col-sm-12">
<div class="col-sm-2 col-xs-offset-1"></div>
</div>
CSS(used in the demo):
.col-sm-12{
height:100px;
background:#33CCFF ;
}
.col-sm-2{
height:150px;
background:#33CCFF;
margin-top:50px;
border: 4px solid white;
border-radius:5px;
}