CODEWITHSUNDEEP
htmlcsscss-position
garrettlynchirl
garrettlynchirl

Reputation: 910

CSS positioning inside centred div

I need to position an item in the top right inside a centred div like this:

.fullscreenholder {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -960px;
  margin-top: -540px;
  width: 1920px;
  height: 1080px;
  border: 10px solid #ff0000;
}
<div class="fullscreenholder">example</div>

When the div is larger then the window why does the top and left of it get cropped? Is there a way to counter or detect this so it does not affect the item inside the div (it makes it disappear)?

---- edit ----

This is what I ended up using based on @CodeSpent's answer. In my case the site is for a kiosk so the large size does not need to consider mobile access.

<div class="wrapper">

    <div class="fullscreenholder">
        <div class="menubuttons">button1 | button2</div>
    </div>

</div>


.wrapper
{
    background-color: #ff0000;
    display: flex;
    justify-content: space-around;
    width: 100vw;
    height: 100vh;
 }

.fullscreenholder
{
    background-color: #00ff00;
    margin: auto;
    width: 1920px;
    height: 1080px;
    border: 10px solid #ff0000;
}

.menubuttons
{
    background-color: #0000ff;
    display: inline;
    right: 0px;
    top: 0px;
    width: 260px;
    height: 30px;
    z-index: 9;
}

Upvotes: 3

Views: 84

Answers (3)

folo
folo

Reputation: 524

first of all, use percent to set the .fullscreenholder element to be positioned relative to the viewport, that will make sure it always stays centered regardless of screensize, and use transform to offset it's position by its own size.

you also need to set a minimum size to the body if you want that enormous div to behave properly.

i dont know why you need to this exactly that way, but here is how you do it:

(btw, if you need this to look "good" on all screens you should change the .fullscreenholder width and height to max-width and max-height instead and give it a width: 100% and height: 100%, that will turn the behavior responsive)

body {
  position: relative;
  min-width: 1920px;
  min-height: 1080px;
}

.fullscreenholder {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1920px;
  height: 1080px;
  border: 10px solid #ff0000;
  overflow: hidden;
  color: #fff;
}

.inside {
  position: absolute;
  width: 200px;
  height: 200px;
  right: 0;
  top: 0;
  background: blue;
  color: #fff;
}
<div class="fullscreenholder">
  <div class="inside">example</div>
</div>

Upvotes: 1

CodeSpent
CodeSpent

Reputation: 1904

A few things to consider;

  • Not everyone is going to have a 1920x1080 resolution when viewing this.
  • absolute positioning should really be solely used for layering type things, as absolute totally ignores flow.
  • What you're trying to achieve is actually a perfect case for Flexbox.

.fullscreenholder {
  display: flex;
  justify-content: space-around;
  width: 100vw;
  height: 100vh;
  border: 10px solid #ff0000;
}

.fullscreenholder h1 {
  margin: auto;
}
<div class="fullscreenholder">
  <h1>Example</h1>
</div>

What's important here?

  1. I changed your width and height properties to 100vw and 100vh respectively. This means it'll occupy 100% of the vertical height and 100% of the vertical width, aka fullscreen no matter the screen size.
  2. Made fullscreenholder a flex container with display:flex;.
  3. Gave your h1 margin:auto; which tells flexbox to occupy all of the space surrounding the element with a margin, bringing your h1 to perfectly vertical & horizontal centering.

Upvotes: 3

James Frank
James Frank

Reputation: 11

Are you looking for something like this?

.fullscreenholder {
  position: absolute;
left: 0;
top: 0;
margin-left: 0;
margin-top: 0;
width: 1920px;
overflow: visible;
padding: 10px;
height: 1080px;
border: 10px solid #ff0000;
}
<div class="fullscreenholder">example</div>

Upvotes: 1

Related Questions