Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

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!

like image 279
user2413519 Avatar asked Jun 03 '13 14:06

user2413519


People also ask

How do you make a div fit the whole screen?

position:absolute You can also use position absolute as well as set all the viewport sides (top, right, bottom, left) to 0px will make the div take the full screen.

How do I make div width auto adjust?

Using width, max-width and margin: auto; Then, you can set the margins to auto, to horizontally center the element within its container. The element will take up the specified width, and the remaining space will be split equally between the two margins: This <div> element has a width of 500px, and margin set to auto.

How do I center a div according to my screen size?

Easiest way to center something regardless of page width is margin: auto; in your CSS, with height and width defined. Show activity on this post. This will center your DIV with class center-div horizontally AND vertically. The margin-left must be negative half of what your width is.


2 Answers

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;
}
like image 56
Paul van den Dool Avatar answered Oct 02 '22 03:10

Paul van den Dool


html,body { height:100%; }
#div_selector { width:50%; margin:0 auto; }
like image 36
landons Avatar answered Oct 02 '22 02:10

landons