I cant seem to be able to center #testmenu no matter what... I've tried dozens of combinations in CSS but without luck. Please take a minute to have a look and save my hair from being completely pulled out.
#abc {
position:absolute;
bottom: 0;
width:100%;
left:0;
text-align:center; /* IE 5.x centering */
}
#testmenu {
line-height:2em;
width:960px;
color:#FFF;
background:#00F;
background:#C00;
margin:0 auto;
}
<div id="abc">
<div id="testmenu">
This should remain 'fixed' bottom center.
</div>
</div>
Here's a simple jsfiddle of what I'm after: http://jsfiddle.net/mXTmF and also working demo of the page: http://ht-webcreations.com/vildiridis/index.php
The problem is that you can't apply auto margins to a fixed element. To allow for varying menu widths, I'd do this:
#abc {
bottom: 0;
height: 30px; /* forces #testmenu to the bottom */
margin: 0 auto;
position: fixed;
width: 100%;
}
#testmenu {
background: none repeat scroll 0 0 #FF0000;
bottom: 0;
font-size: 10px;
height: 30px;
overflow: hidden; /* prevents extra space underneath from 33px-high menu items */
margin: 0 auto;
max-width: 1000px;
width: 960px;
}
Things are quite straightforward, since you're using a fixed width for the menu. Add the following CSS on your #testmenu:
position: relative;
left: 50%;
margin-left: -480px;
You can see a working demo here > http://jsfiddle.net/mXTmF/1/
<!DOCTYPE html>
<html>
<body>
<div style='border:1px solid; width:960px; height:200px; position:absolute; left:50%; bottom: 100px; margin-left:-480px;'>hallo</div>
</body>
</html>
in Css
#testmenu {
width: 960px;
position: absolute;
left: 50%;
bottom: 100px;
margin-left:-480px;
}
Related
I have two divs that I am trying to stack over each other but the one I want on top is not showing. I want the blue background div to lay on top of the red background div. Any advice? The reason why I want to overlay the blue div is because the container is a centered grid and I want the red div to be the background for the first half of the page.
JSFIDDLE
CSS
.buddy {
width: 50%;
height: 629px;
display: inline-block;
position: relative;
background: red;
}
.buddy-content {
position: absolute;
top: -629px;
z-index: 10;
background: blue;
}
.container {
max-width: 1000px;
margin: 0 auto;
overflow:hidden;
position:relative;
padding: 0 10px;}
You have made the second div absolute so you don't need to give the negative value for top. The second div is hiding because you top -629px; Try making the top:0 and see. And also for your current code. Remove the overflow hidden and put z-index like this:
.buddy {
width: 50%;
height: 629px;
display: inline-block;
position: relative;
z-index:9;
background: red;
}
.buddy-content {
position: absolute;
top: -629px;
z-index: 10;
background: blue;
}
.container {
max-width: 1000px;
margin: 0 auto;
width:200px;
height:200px;
position:relative;
padding: 0 10px;
}
.buddy {
width: 50%;
height: 629px;
display: inline-block;
position: absolute;
background: red;
}
.buddy-content {
position: absolute;
z-index: 10;
background: blue;
}
<div class="buddy BlueGradient">
</div>
<div class="container">
<div class="buddy-content">
ROGER
</div>
</div>
https://jsfiddle.net/kt77cp3e/6/
just add z-index : higher to the div that you want to show on top and set z-index low to the other one ..
ant one thing your code is working good just you need to remove " top : -629px;"
that thing is not allowing blue div to be on top just it is showing at the -629 px position..!!!!
If you can update your code like this, it may solve the issue:
Demo:https://jsfiddle.net/kt77cp3e/7/
CSS:
html, body {
height:100%;
width:100%:
}
.container {
width:50%;
height:100%;
background:red;
position:relative;
}
.container>div {
position:relative;
left:0;
right:0;
}
.container>div:first-child {
top:0;
height:50%;
background:blue
}
.container>div:last-child {
bottom:0;
height:50%;
background:green
}
HTML:
<div class="container">
<div></div>
<div></div>
</div>
Update: Considering the latest updated code, I think you should remove overflow:hidden from the container styles. That should do the trick
You should set the dimension on the .container div.
CSS:
.container {
position:relative;
width:100px; //You may modify these values
height:100px
}
Demo: https://jsfiddle.net/kt77cp3e/1/
.buddy { width: 50%; height: 629px; display: inline-block; position: relative; background: red;}
.buddy-content { position: absolute; top: 0px; z-index: 10; background: blue; }
.container {max-width: 1000px; margin: 0 auto; overflow:hidden; position:relative; padding: 0 10px; position: relative;}
<div class="container">
<div class="buddy BlueGradient">
<div class="buddy-content">ROGER</div>
</div>
</div>
This brings the text "Roger" with blue background on top of the red background
http://jsfiddle.net/P8g3C/
I am trying to create the layout above. I am not getting the scroll bar to the right side of the content.
Also, suggest if there is any alternate way which better than my current approach
My html code is
<div class="header"></div>
<div class="content">
<div class="content-left">Menu</div>
<div class="content-right">Content which should be scrollable</div>
</div>
<div class="footer"></div>
My CSS is
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.header {
position: fixed;
width: 100%;
height: 100px;
top: 0;
left: 0;
background-color: aqua;
}
.content {
position: fixed;
top: 100px;
bottom: 35px;
left: 0;
width: 100%;
}
.content-left {
position: absolute;
top: 0;
left: 0;
width: 200px;
height:100%;
background-color: aquamarine;
}
.content-right{
position:absolute;
top:0;
left:200px;
width:100%;
height:100%;
overflow:auto;
background-color:blanchedalmond;
}
.footer {
position: fixed;
width: 100%;
height: 35px;
bottom: 0;
left: 0;
background-color: yellow;
}
You can just remove width:100% of .content-right:
Update:
Because you use absolute positiong for the .content-right we can just set the left and right for it to make the width dynamic:
.content-right{
position:absolute;
top:0;
/* add this */
right:0;
left:200px;
height:100%;
overflow:auto;
background-color:blanchedalmond;
}
Demo.
It's because you are assigning a width of 100% to .content-right, yet already occupy 200px with the menu column, hence pushing the scrollbar off.
Try this:
.content-right {
width:calc(100% -200px);
}
Alternately, you can remove the width property altogether, as #King King suggested
Here's a Fiddle of your original demo code showing the fix in action.
Please correct a width of class .content-right{ width:61%;}. because you have give a width of 100% that why you are not able to see a overflow scroll.
I am a novice in web developing. My container div is set to margin: 0 auto; position: relative; and it is displayed in the middle of the screen. I have a banner div within the container which has some background color which I want to extend the whole width of the screen. I decided to use another div outside the containerdiv with same background color and height of my banner div and named it header. But how can I put them one over another, more precisely, the container div over the header div?
EDIT:
Some of the html:
<body>
<div id="header"></div>
<div id="container">
<div id="banner">
<img src="images/banner.gif" width="450" height="80" alt="parul library" />
</div>
</div>
</body>
The CSS:
#container{
position:relative;
top:0;
width: 968px;
background:#FFF;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
}
#header {
position:absolute;
top:0;
height: 80px;
background: rgb(222,239,255); /* Old browsers */
}
Try using this CSS for the header div:
.header {
background: #bada55;
height: 90px;
width: 100%;
position: absolute;
}
And make sure container has position: relative; in its style definition.
Here's a working demo:
http://jsfiddle.net/rkJMJ/
Update for the HTML and CSS posted in the question:
(Added width: 100; to the #header style def)
#container{
position:relative;
top:0;
width: 968px;
background:#FFF;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
}
#header {
position:absolute;
top:0;
height: 80px;
width: 100%;
background: rgb(222,239,255); /* Old browsers */
}
I am not able to place a div at the top center of a page. I am using CSS for this but nothing works here.
#loader {
position: relative;
margin: 0 auto;
text-align: left;
clear: left;
height: auto;
z-index: 0;
}
<body>
<div id="loader" style='display: none'><img src='img/basic/loader4.gif' /></div>
</body>
I had already given 2 hours on this but still not able to figure it out.
First remove display:none; from your div with id=loader & add text-align:center; to it
#loader{
position:relative;
margin:0 auto;
clear:left;
height:auto;
z-index: 0;
text-align:center;/* Add This*/
}
Working demo: http://jsfiddle.net/surendraVsingh/FCEhD/
You need a specific width for the div, otherwise it will use all the available with, and the margin has no effect. Example:
#loader{
margin: 0 auto;
width: 200px;
}
You have to specify width property if you want to use margin: 0 auto;.
If you don't know width just add display: table property and it will works.
#out {
display: table;
margin: 0 auto;
}
In the above example everyone is assuming he wants 'full width'.
This works within an absolute full width / height parent container but constraints the width automatically to only the content width
Parent Container
display: block;
position: absolute;
clear: both;
width: 100%;
height: 100%;
border: solid thin red;
Child Container
display: block;
position: absolute;
top:0;
transform: translateX(50%);
padding-left:.5em;
padding-right:.5em;
margin-left:auto;
margin-right:auto;
right:50%;
#loader{
margin: 0px auto;
width: 100px;
}
#loader
{
position: absolute;
width: xxpx;
height: xxpx;
margin:0px auto ;
}
or u can use
margin-left:xx; and `margin-top:0px;`
<div id="loader" style='display: none' align="center">
press ctrl+space am not sure about the syntax
and in css margin and padding has to set 0
#loader {
display: none;
clear: both;
margin: 0px auto;
width: [a number] px;
}
of course you should also note the browser cache. clear cache of your browser and test again
How to put a div in center of browser both vertically and horizontally using CSS only?
Make sure it works on IE7 too.
If everything fails, we may use JavaScript, but a last choice.
HTML:
<div id="something">... content ...</div>
CSS:
#something {
position: absolute;
height: 200px;
width: 400px;
margin: -100px 0 0 -200px;
top: 50%;
left: 50%;
}
The simplest solution is just to use an auto margin, and give your div a fixed width and height. This will work in IE7, FF, Opera, Safari, and Chrome:
HTML:
<body>
<div class="centered">...</div>
</body>
CSS:
body { width: 100%; height: 100%; margin: 0px; padding: 0px; }
.centered
{
margin: auto;
width: 400px;
height: 200px;
}
EDIT!! Sorry, I just noticed you said vertically...the default "auto" margin for top and bottom is zero...so this will only center it horizontally. The only solution to position vertically and horizontally is to muck around with negative margins like the accepted answer.
margin: auto;
try this
#center_div
{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Using this:
center-div { margin: auto; position: absolute; top: 50%; left: 50%; bottom: 0; right: 0; transform: translate(-50% -50%); }
You can also set your div with the following:
#something {width: 400px; margin: auto;}
With that setting, the div will have a set width, and the margin and either side will automatically set depending on the with of the browser.
<html>
<head>
<style>
*
{
margin:0;
padding:0;
}
html, body
{
height:100%;
}
#distance
{
width:1px;
height:50%;
margin-bottom:-300px;
float:left;
}
#something
{
position:relative;
margin:0 auto;
text-align:left;
clear:left;
width:800px;
min-height:600px;
height:auto;
border: solid 1px #993333;
z-index: 0;
}
/* for Internet Explorer */
* html #something{
height: 600px;
}
</style>
</head>
<body>
<div id="distance"></div>
<div id="something">
</div>
</body>
</html>
Tested in FF2-3, IE6-7, Opera and works well!
.center {
margin: auto;
margin-top: 15vh;
}
Should do the trick
<center>
<h3 > your div goes here!</h3>
</center>
For Older browsers, you need to add this line on top of HTML doc
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">