How to display a div at center top position of the page, which need to be work under all size of monitors using CSS.
Mainly I get issues on IE, where not aligned properly.
For margin: 0px auto;
to work width needs to be provided
style:
div#center
{
width: 300px;
margin: 0px auto;
}
html:
<div id="center">content</div>
CSS
div
{
margin : 0px auto;
}
Are you comparing the rendering in both IE and another browser by switching back and forth? If so, you might be noticing a shift because of the scroll bar. IE reserves the space for the scrollbar, while browsers such as Firefox only show the window scroll when necessary.
div#center
{
width: 300px;
margin: 0px auto;
}
not working on IE...
Related
For some reason when you go to the homepage of my site:
bluestarnj.com on chrome or safari the top of the page is cut off. This only occurs on laptops with small browser heights. It renders perfectly fine in firefox. Now if I tell it to position itself 300px from the top, it will render correctly in those browsers, but then in firefox it is pushed too far down the page. CSS code for the class is below:
.main_content {
width: 1000px;
height: 900px;
margin: auto;
position: absolute;
top: 50px;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(white, grey);
border-style: solid;
border-width: 0.188em;
border-radius: 1.563em;
border-color: red;
display: block;
}
You need to remove margin: auto; from your .main_content div.
When the window is smaller than that div it's still centering itself but at the cost of going off the page. Don't worry about vertical centering on smaller screens, and just do that on desktop once the viewport is bigger than that div.
The problem seems to be with the margin of the "main_content" div. I tested on my laptop and on a huge monitor with chrome and this is what I get:
As you can see, on a smaller screen the top and bottom margins become negative. I found this question: Margin auto goes to negative values where someone mentioned a conflict between top and bottom. This is exactly the case here: you set the top and the bottom as well as the fixed height. For some reason Chrome first sets the top to 50, then tries to adjust the margin (because it's set to auto) so that bottom will be 0. Remove bottom: 0px and it works!
EDIT: but it won't be centered vertically anymore.
Over the past few weeks I've been developing a website for a friend of mine and while it works perfectly in most browsers, it breaks in 2 seperate ones.
I have a div, with css of
#div2 {
width: 70%;
margin: 0 auto;
display: block;
text-align: center;
}
In Chrome, Opera, Internet Explorer and many other browsers, it loads fine, and centers the div.
But in Firefox and Safari (Both on windows), the div stays on the left of the page.
div2 IS inside a parent div, but the parent div only has a border set on it, nothing else.
I've been trying for ages to rectify the issue, even using the #-moz-document url-prefix() css, but it still doesn't fix it.
Any suggestion would be gratefully recieved.
Try specifying "width: 100%" on the parent div. This same issue happens when there isn't a container div, and the solution is specify "html, body {width: 100%}", so this is likely the same case.
Use:
{
left:50%;
margin-left:-200px; //minus half of your div width
}
A Firefox moderator already gave a solution:
#div2 {
border: thin solid #000000;
width: 760px;
height: 1px;
margin-left: auto;
margin-right: auto;
}
I have problem with margin: auto - vertical centering
#something {
width: 97%;
height: 300px;
border: 1px solid red;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
This work in every modern browser - when the page (viewport) is higher then 300px, its centered vertically, but, when the page(viewport) is lower then 300px stopped it works everywhere except in firefox... In firefox run it good (maybe it is bad functionalitiy, but its logical functionality) in other browsers the top of centered element disappers in the top of viewport.
http://jsfiddle.net/LhHed/2/ Here is god example - when you resize result window, in firefox work it well, in others browsers not. Is posible tu fix it? Or its bad functionality of firefox?
EDIT: live example http://dev8.newlogic.cz
From what I gather, you're wanting the top of the divider to display at the top of the page. This currently isn't happening because you have the position set to top:0; bottom:0;, the top property is conflicted by the bottom property, ultimately positions the divider to the bottom of the page. Simply removing the bottom property prevents the top of the element appearing outside of the viewport:
#something {
width: 97%;
height: 300px;
border: 1px solid red;
position: absolute;
top: 0;
margin: auto;
}
JSFiddle.
I removed the problem in browsers, when i use position: relative to the body element. Now its working in firefox and in other browser too. Live example on http://dev8.newlogic.cz
This code works perfectly in chrome and firefox, but in IE the absolutely positioned divs appear at the top right.
<div id="three_pictures">
<img alt="3steps" src="/assets/3steps.jpg">
</div>
and
#three_pictures
{
padding-top: 20px;
width: 700px;
position: relative;
background-color: white;
margin: 0px auto;
}
I want to have links over certain regions of the image.
what is the containing element of #three_pictures and how is it styled (if there is one)?
if there isn't then what it looks like is that your margin: 0px auto; is not actually working on the #three_pictures element (because of the position:relative; style on it) so what you need to do is wrap it in a separate div which has the margin: 0px auto; and width:700px; styles on it.
First you change id name,then you must use this style code for its
#stepsThree{
position:relative;
}
i think for its,
best regards
This is exactly what they invented image maps for. They are still valid and supported in HTML 5.
I came across a very strange behaviour of Webkit browsers today: It concerns the way a margin is calculated next to other (floated) blocks.
Though I think this must be a common problem, I couldn't find anything about it so far.
Here's my situation: I have two <aside>s followed by a <div>. They are all displayed next to each other, the <div> on the left then .#aside-1 and #aside-2. I achieve this throught the following CSS code:
aside {
margin-bottom: 30px;
padding: 0px 10px 10px;
width: 180px;
}
#aside-1 {
float: right;
margin-left: -400px;
margin-right: 200px;
}
#aside-2 {
float: right;
}
div {
overflow: auto; /* Block formatting context */
margin-right: 400px;
padding: 0px 10px 0px 20px;
}
This works fine in Firefox and IE>6.
However, what happens in Chrome and Safari is that the margin-right of the div isn't calculated from the right boundary, but is instead only calculated from the left of aside-2. This causes the div to be 200 pixels (width + padding of sidebar-2) too small.
What causes this Webkit behaviour and how can I fix it?
Anyway, thanks a lot for your help in advance!
OK, so I tested a bit more and came up with a simple solution):
Just give the div a fixed width. This of course only works if your layout is based on fixed widths, which is the case for me.
Try with CSS RESET, that should work.
Here's one : http://html5doctor.com/html-5-reset-stylesheet/