I'm busy on this new website thing, and I run into a problem. Normally, when making the menu, I would just use the entire space, like 100% width and maybe 100px height but now, I need just a portion of that, so there is a whitespace next to the menu on both sides.
I tried to get the square, that carries the menu, to the absolute top of the page, most obvious solution:
position:absolute;
top:0;
But now, the square is also moved to the absolute left of the page, instead I want it centered, but I can't get there. This is a piece of my CSS:
body, html {
background-color: #ecf0f1;
position: absolute;
top: 0;
margin: 0 auto;
}
.navbox {
background-color: #000;
height:100px;
width: 700px;
margin: 0 auto;
}
Is there anyone with the solution?
position:absolute;
top:0;
left:0;
right:0;
Adjust left and right to suit your desired margins.
You would probably want to set your left and right to percentages, using 50% for both will center it:
#menu {
position:absolute;
top:0;
width: 70px;
height:180px;
left: 50%;
right: 50%;
background-color: red;
}
Also, if you are not using absolute positioning you can do the same with this margin-left and margin-right.
jsfiddle
Related
I have a full width background image with some content.
At the end I want to position my buttons in center (vertically and horizontally), but with position:absolute, that doesn't work. You can see it in JSFiddle.
There is some code lines from my CSS
.buttons{
position:relative;
}
.buttons .button-pos{
width:100%;
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}
And there is little scheme of that what I want.
1.) Your .buttons div doesn't have a height, so first you need to define a height for it, otherwise there is no vertical centering possibility ( I made it 200px in the fiddle).
2.) To center .button-pos within .buttons, use
.button-pos {
width: 100%;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
Here's the fiddle: https://jsfiddle.net/Luo1k7Lt/1/
I make some solution by myself and it works now very well, I decided to center all my content, what was in the header. Only some little changes with screen sizes and it works well
#welcome-header .welcome-content{
width: 80%;
height: 400px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.buttons{
margin-top: 40px;
}
Try this:
.buttons .button-pos {
display: inline-block;
zoom: 1;
}
A simple IE hack is to add display*: inline; in that CSS rule
I am trying to make a pop-up lightbox on my page which shrinks to fit the size of the element inside it, and centre it on the page. So far I have:
.lightboxVariable{
display:block;
position: absolute;
top:0;
bottom: 0;
width : auto;
left:0;
right:0;
padding-left:10px;
padding-right:20px;
padding-top:10px;
padding-bottom:20px;
background:rgba(255,255,255,0.9);
border:black, thin;
box-shadow: 5px 5px 5px grey;
z-index:1000000;
overflow: auto;
text-align:center;
height:800px;
}
Now with the left:0; and right:0;, the element spreads across the entire page (ie it ignores the width:auto;) but without them, the element just sits against the left-hand side of the page.
Is there a way to do both without having to resort to some sort of js-based code?
You could try the following
width: auto;
height: auto;
top: 50%;
left: 50%;
// don't declare right or bottom
transform: translateX(-50%) translateY(-50%);
It will put the left edge of the element in the center (left: 50%;), then nudge it back to the left (translateX(-50%)).
Similarly for vertical center (top: 50%;) and (translateY(-50%)).
Hi!
This seems like a stupidly simple question, but I cannot seem to horizontally center the header DIV.
http://jsfiddle.net/1ucwafx6/
as you can see, the light blue rounded square is almost centered, but not quite. I've tried on multiple systems, browsers, and screen resolutions and the outcome is always the same. It is slightly further to the right. I really don't understand what is wrong here. I have also tried margin: 0 auto; however then it just doesn't do anything and just stays on the very left hand side.
It's due to the default margin on the body. Just set
body { margin:0; }
and you'll see the fix.
This should help you center it, assuming you want the position to stay fixed with your current HTML markup.
JS FIDDLE
#header {
position: fixed;
width: 90%;
background-color: #3498db;
left: 50%;
transform: translate(-50%, 0);
margin-top: 25px;
border-radius: 10px;
}
I removed the position fixed and set left and right margins to auto and it centers just fine.
http://jsfiddle.net/1ucwafx6/3/
CSS:
#header {
/* position: fixed; */
width: 90%;
background-color: #3498db;
margin-left:auto;
margin-right: auto;
margin-top: 25px;
border-radius: 10px;
}
Just add
#header {
left:0;
}
http://jsfiddle.net/1ucwafx6/4/
i have came across a problem, i am fairly new to CSS but how do i make one div go over the other? This is my code:
#left_box
{
margin-top: 0px;
min-width: 10%;
max-width: 10%;
height: 800px;
background: #C90;
border: thin 5px #33CCFF;
position: absolute;
z-index:1;
left: 16px;
top: 1px;
float:none;
}
#bar_outside
{
margin-top:75px;
min-width:10px;
max-width:2000px;
height:55px;
background:#ff69b4;
border:#ff69b4: 5px;
position:static;
z-index:2;
}
thanks for your help!
If you want one div to be on top of the other, you can change the position: static in your #bar_outside to position:relative as the z-index property just works for relative, absolute or fixed. See the fiddle.
If you want the divs to be positioned one to the side of the other, use the float CSS attribute accordingly in both your CSS classes. See the fiddle.
You don't need position: absolute. Float left and define width
Just check this fiddle:
http://jsfiddle.net/9EJpu/25/
How can I stretch the blue div 100% horizontally so it docks to the purple right div?
If I set width:100% its just doing what a div is used for to "line-break" down the purple div.
I also tried display:inline(-block) nothing helped to make the purple div stay on the same
line as the blue div.
The solution must work on IE9. Please no CSS3 hacks.
If I interpret your question correctly you need to change a couple of things...
#wrap {
width:100%;
height:100%;
background-color:green;
position: relative;
}
#left_col {
overflow:auto;
float:left;
height:100%;
margin-right: 100px;
background-color:blue;
}
#right_col {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width:100px;
background-color:purple;
}
You could add position: fixed to #right_col, but it would cover your footer.
Here is a demo:
http://jsfiddle.net/xuBfe/
Using CSS3's relatively safe calc property. -> http://jsfiddle.net/joplomacedo/9EJpu/27/
You can use safer properties though, that just seemed the quickest way to do it with your existing markup.
Example:
http://jsfiddle.net/hunter/9EJpu/37/
To get the content of the main panel to have the proper width you can add a wrapping element within left-col
#left_col
{
overflow:auto;
float:left;
height:100%;
width:100%;
background-color:blue;
}
#left_col > *
{
margin-right: 100px;
}
#right_col
{
right: 0;
top: 0;
position:fixed;
z-index: 1000;
height:100%;
float:right;
width:100px;
background-color:purple;
}
#footer
{
width: 100%;
bottom: 0;
left: 0;
position: fixed;
background-color:yellow;
z-index: 2000;
}
Another possible solution that makes use of the safer box-sizing property.
http://tinkerbin.com/Vi1Rtt1T
make blue width 100% and pad the right side with the width of the purple, purple should have fixed on the right
Edit:
yes I forgot, ok then just float a div to the right side with the width of the purple (inside of the blue). Just need a space holder so things don't run underneathe