5

Is there a way to make a div appear half off-screen using just CSS without knowing the width of the div?

2
  • what about setting the left to -50px or likewise Jan 27, 2012 at 19:12
  • 3
    How can he do that if he doesn't know the width?
    – j08691
    Jan 27, 2012 at 19:24

4 Answers 4

6

Unless I've misunderstood the question, I think it is possible with CSS, as I hope should be clear from this jsfiddle.

Example HTML

<div class="container one">
   <div class="half">Hello there.</div>
</div>
   <div class="container two">
<div class="half">Hello there, you old dog.</div>
   </div>
<div class="container three">
   <div class="half">Hello there you old dog. Been up to your old tricks?</div>
</div>

The CSS

.container {
    position: absolute;
}
.half {
    position: relative;
    right: 50%;
}
.two {
    top: 30px;
}
.three {
    top: 60px;
}
0
0

Actually, no.

The div will have it's top positioned at 50% the screen... you could assume values that would "sort of" make it look like it would be in the middle if you knew more or less the height of the div before-hand. But in short, no.

Only with tables or Javascript.

4
  • How would you use tables? Could you use display: table?
    – mrtsherman
    Jan 27, 2012 at 18:58
  • No, you would create a table with 3 rows (remember the 3 row, 3 collums?)... old style really. Would not recommend.
    – Frankie
    Jan 27, 2012 at 18:59
  • I guess you are older than I am Frankie =). I don't know that trick.
    – mrtsherman
    Jan 27, 2012 at 19:00
  • Humm... old-style meaning old-style web... any site from 2000 would probably have a table to sort out the elements position. Then you would have sub-tables on cells... it was a <td> nightmare! :)
    – Frankie
    Jan 27, 2012 at 19:03
0

i made something from jQuery. Hope its what you are after - http://jsfiddle.net/6Guc8/1/. it gets half the width of the element and then chucks half of it out the screen.

here is the jquery

$(document).ready(function(){
    var half_width = $("div").width() / 2;
    $("div").css("left", -half_width);
});

here is the css

div{
    background: #555;
    height: 100px;
    width: 100px;  
    position: absolute;
}

here is the html

<!DOCTYPE html>
<html>

<head>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript">          </script>
</head>

<body>
    <div>
    </div>
</body>

</html>
0
0

It is absolutely possible in CSS only. You need 1 wrapper div, however:

<!DOCTYPE html>
<html>

<head>
    <style type="text/css">
        div#wrapper {
            position: absolute;
            left: 0;
        }
        div#wrapper div {
            position: relative;
            padding: 30px;
            background: yellow;
            left: -50%;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <div>this div is halfway hidden, no matter what size it is.</div>
    </div>
</body>

</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.