Tips for Placing a Div in a Precise Location

Question

Tips for Placing a Div in a Precise Location

I'm currently working with Bootstrap and I'm attempting to replicate a layout similar to the one used by Twitter, as shown in the screenshot below.

The specific part I'm struggling with is where the profile picture is located. I want to add a div that sits on top of another div, but I'm not sure how to go about it.

I have the navigation bar and the blue container in place, but I'm unsure of how to create the overlapping div as shown in the example.

http://www.bootply.com/v7fKXw63nh

Any suggestions or insights would be greatly appreciated!

html css twitter-bootstrap

Answer 1

Answer №1

To achieve the desired effect, consider implementing relative or absolute CSS positioning.

One approach is to include the following snippet at the end of your code:

<div style="position: relative; 
            left: 200px; 
            top: 150px; 
            width: 100px; 
            height: 100px; 
            background-color: #333"></div>

Answer 2

To achieve the desired effect, consider implementing relative or absolute CSS positioning.

One approach is to include the following snippet at the end of your code:

<div style="position: relative; 
            left: 200px; 
            top: 150px; 
            width: 100px; 
            height: 100px; 
            background-color: #333"></div>

Answer 3

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 4

#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 5

Answer №3

Click here for the Fiddle link

(Make sure to adjust the size of the demo section on Fiddle)

Here is the HTML code snippet:

<div class="row">
  <div class="col-md-4 col-sm-offset-2"></div>
</div>

This is the CSS styling used in the demonstration:

.row{
  height:80px;
  background:#FFCC00 ;
}
.col-md-4{
  height:120px;
  background:#FFCC00;
  margin-top:40px;
  border: 2px solid black;
  border-radius:8px;
}

Answer 6

Click here for the Fiddle link

(Make sure to adjust the size of the demo section on Fiddle)

Here is the HTML code snippet:

<div class="row">
  <div class="col-md-4 col-sm-offset-2"></div>
</div>

This is the CSS styling used in the demonstration:

.row{
  height:80px;
  background:#FFCC00 ;
}
.col-md-4{
  height:120px;
  background:#FFCC00;
  margin-top:40px;
  border: 2px solid black;
  border-radius:8px;
}

Tips for Placing a Div in a Precise Location

Answer №1

Answer №2

Answer №3

Click here for the Fiddle link

Similar questions

Can the orientation of the card reveal be customized in Materializecss?

Adjust the table to line up perfectly, center the content within the table cell (td), and align the

Links are functional in browsers, but seem to be unresponsive on iPad devices

Implementing jQuery UI toggleClass method to seamlessly alternate between two distinct CSS classes

What steps should I take to access additional details by clicking on an item using PHP?

Rearrange the following <div> to appear before the previous one on medium and small devices using Bootstrap

It appears that the JS function is not being triggered

getting information from a JSON array using AngularJS

"Enhance the Navbar with a pop of color by changing

Dividing the content: A two-column CSS layout

PHP processing and converting to a string output

Issue with unordered list in the footer overlapping other elements

Eliminate any empty spaces and gaps present between div elements

Retrieving ng-repeat object in Angular

The sliding content in the div below the one above it

The text consistently remains positioned to the right of my image

The issue with EJS Header and Footer not showing up on the

What is the best way to deactivate a hyperlink on a widget sourced from a different website?

Invoke JavaScript when the close button 'X' on the JQuery popup is clicked

Adjust the horizontal background-position transition for color change while scrolling using jQuery and CSS