Keeping a div half way across the screen no matter what resolution you are on

Question

What I want to know is how to have a <div> half way across the screen and height 100% no matter the screen resolution and window size resolution.

Thankyou all for your replies they all helped me! Sorry if this question was a little confusing, I have not really done any css before so I didnt know how to phrase it really...Thankyou once again!

@user2413519 You can try to make use of [JSFiddle](http://jsfiddle.net/) — Praveen, Jun 03 '13 at 14:03
I upvoted so now you can add images? and width: 50%; would work. — Kees Sonnema, Jun 03 '13 at 14:04
I think Arpit's answer is technically correct - but do you mean you want to have the div centered in the screen; like how Stack Overflow looks? — Katana314, Jun 03 '13 at 14:05
Please search Stack Overflow and Google before asking such questions. — Greg, Jun 03 '13 at 14:05
Can you clarify: are you asking how to centre a div? Horizontally or vertically? — Dancrumb, Jun 03 '13 at 14:10

score 3 · Answer 1 · answered Jun 03 '13 at 14:10

3

In your reaction to @Arpit I understand you want to center the div no matter the screen resolution.

Try this:

#div {
    width: 800px;
    margin: 0 auto;
}

Different technique is:

#div {
    width: 800px;
    position: absolute;
    left: 50%;
    margin-left: -400px;
}

answered Jun 03 '13 at 14:10

Paul van den Dool

2,882
3
17
39

1

Ah yes thankyou this is what I was looking for! +1 – user2413519 Jun 03 '13 at 14:14
Could you close the post by checking my answer as the correct answer please? It still appears as open. (hover you mouse on the left side of my answer, you'll see the marker turn green) – Paul van den Dool Jun 03 '13 at 14:45

score 1 · Answer 2 · answered Jun 03 '13 at 14:05

1

html,body { height:100%; }
#div_selector { width:50%; margin:0 auto; }

answered Jun 03 '13 at 14:05

landons

9,444
3
32
46

G-Cyrillus · Answer 3 · 2013-06-03T14:29:25.350

1

use jsfiddle to make a show :).
Basicly i would think of :

html, body {height:100%;margin:0;}
body {padding-left:50%; */or right */
div.w50h100 {
width:50%;
height:100%;
position:fixed;
top:0;
left:0; /* or right:0; */
}

Okay, you made it clear, and it is simple,

html,body{
    height:100%;
    margin:0;
}
div#center {
    min-height:100%;
    width:XX;
    margin: auto;
}

edited Jun 03 '13 at 14:29

answered Jun 03 '13 at 14:08

G-Cyrillus

94,270
13
95
118

this way, you have the other 50% left of width usable flow content. – G-Cyrillus Jun 03 '13 at 14:10

score 0 · Answer 4 · answered Jun 03 '13 at 14:03

0

in css

your_div{
width:50%;  // 50% of current screen size;
}

Demo

answered Jun 03 '13 at 14:03

Arpit

12,709
3
27
40

Right ok thanks that solves some of it, but say if I wanted a specific width like 800px? Altering this changes the position of the div, so that if i view it on larger resolutions it is not in the centre anymore? – user2413519 Jun 03 '13 at 14:06

score 0 · Answer 5 · answered Jun 03 '13 at 14:07

0

If you choose position style "fixed". The div will orientate itself by the size of the browser window, not by the size of other divs.

answered Jun 03 '13 at 14:07

user2448108

1

Keeping a div half way across the screen no matter what resolution you are on

5 Answers5