I have a problem centering everything while keeping my header in fixed position. Can anyone help me figure out why?
Here is my HTML
<div id="wrapper">
<div class="header">....</div>
<div class="experiences">...</div>
</div>
Here is the CSS:
#wrapper {
margin: 0 auto 0 auto;
width: 1000px;
height: auto;
}
.header {
background-color: #222;
color: white;
top: 0;
left: 0;
right: 0;
position: fixed;
height: 130px;
padding: 20px;
width: 1000px;
margin: 0 auto 0 auto;
}
.experiences {
background-color: #eee;
padding: 20px;
* padding-top: 190px;
width: 1000px;
margin-top: 170px;
}
You just need to remove the left and right declarations in .header.
The rest should already be centered (unless you use a very old version of IE...).
Related
I have a super simple example with a wrapper div and another div inside this wrapper called header.
body {
margin: 0;
padding: 0;
background-color: #ccc;
}
.wrapper {
margin: 0 auto;
width: 300px;
height: 100vh;
background-color: yellow;
}
.header {
background-color: #06c;
height: 50px;
}
<div class="wrapper">
<div class="header">
logo
</div>
</div>
Is it possible that the inner div called header sticks out of the wrapper on both sides with lets say 20px or even 100viewport wodth?
If I understand you correctly you want the inner header to stick out 20px. You can do that with negative margins:
body {
margin: 0;
padding: 0;
background-color: #ccc;
}
.wrapper {
margin: 0 auto;
width: 300px;
height: 100vh;
background-color: yellow;
}
.header {
background-color: #06c;
height: 50px;
margin-left: -20px;
margin-right: -20px;
}
<div class="wrapper">
<div class="header">
logo
</div>
</div>
if you want it to stretch through the whole viewport, you might have to position the element absolutely and use left: 0; right: 0;, however IMO it would be cleaner to move the div out of the container in that case.
You could give it a negative left/right margin:
body {
margin: 0;
padding: 0;
background-color: #ccc;
}
.wrapper {
margin: 0 auto;
width: 300px;
height: 100vh;
background-color: yellow;
}
.header {
background-color: #06c;
height: 50px;
margin: 0 -20px;
}
<div class="wrapper">
<div class="header">
logo
</div>
</div>
I asked this earlier and was sent: Can I create a div with a Curved bottom?
But a curved bottom div is not what I want.
I am after a very large circle (not just with a curved bottom but a proper circle)... which is positioned with a negative margin-top and has a flexible width when the browser windows is resized.
Here's an image of exactly what I want
Here's an image of what the layout should look like zoomed out - so you can see the whole circle
Here's what I have so far:
https://jsfiddle.net/etmgho6s/
#container {
width: 100%;
margin: 0 auto;
padding: 0;
position: relative;
}
#nav-bg {
width: 90vw;
height: 90vw;
margin: 0 auto;
padding: 0;
margin-top: -45vw;
background: red;
border-radius: 50%;
position: absolute;
}
#title {
margin: 0 auto;
text-align: center;
position: absolute;
margin-top: 20px;
}
Any help would be appreciated!
Thanks, Josh
Does this work for you?
#container {
width: 100%;
margin: 0 auto;
padding: 0;
position: relative;
display: flex; /* line added */
justify-content: center; /* line added */
}
#nav-bg {
width: 150vw;
height: 90vw;
margin: 0 auto;
padding: 0;
margin-top: -60vw;
background: red;
border-radius: 50%;
position: absolute;
}
#title {
margin: 0 auto;
text-align: center;
position: absolute;
margin-top: 20px;
}
<div id="container">
<div id="nav-bg"></div>
<h1 id="title">Navigation content goes here</h1>
</div>
After searching to center my div all I could get was margin: 0 auto; together with an assigned width, but still it not working.
My problem is simply centering a div. I have no idea why margin: 0 auto; isn't working.
Here is the layout of my CSS/html:
CSS
.countdown-box {
position: absolute;
width: 80px;
margin: 0 auto;
height: 130px;
/*left: 50%;*/
background: #008040;
border-radius: 4px;
z-index: 2;
}
<div class="countdown-box"></div>
It's because you are using position: absolute;. Change it to position: relative; and it will work.
The margin: auto works with elements with relative position. To center with absolute position should be like the following CSS:
.countdown-box {
position: absolute;
background: #008040;
border-radius: 4px;
height: 130px;
width: 80px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<div class="countdown-box"></div>
Actually margin auto will allocate the available space, which means it doesn't has any relation with it is relative or not.
<div class="centerize"></div>
.centerize {
width: 200px;
height: 200px;
margin: 0 auto;
background: yellow;
}
I want the header to align at the top-left-corner of the centered div element. The only way I can think of doing this is setting position to relative and using top with a value of 20%. The problem with this is that it causes the header to stretch the page further to the right as can be see in the fiddle.
body {
font-family: Europa;
}
.header {
position: relative;
left: 20%;
display: block;
margin-left: auto;
margin-right: auto
}
h4 {
font-size: 5em;
margin: 0 auto;
}
.box {
height: 500px;
width: 500px;
position: relative;
border-radius: 20px;
background: #6441a5;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div class="header">
<h4>header</h4>
</div>
<div class="box">
</div>
Simply give your header block the same width as your box.
body {
font-family: Europa;
}
.header {
position: relative;
width:500px;
display: block;
margin-left: auto;
margin-right: auto
}
h4 {
font-size: 5em;
margin: 0 auto;
}
.box {
height: 500px;
width: 500px;
position: relative;
border-radius: 20px;
background: #6441a5;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div class="header">
<h4>header</h4>
</div>
<div class="box">
</div>
Using a .centered wrapping div you can more easily obtain your desired results w/ keeping the elements fluid if wanted.
<div class="centered">
<h4>header</h4>
<div class="speech-bubble"></div>
</div>
<style>
h4 {
font-size: 5em;
margin: 0 auto;
}
.speech-bubble {
height: 500px;
width: 100%;
border-radius: 20px;
background:#6441a5;
margin: auto;
}
.centered{
width:500px;
margin: 0 auto;
position: relative;
}
</style>
Try giving your header h4 the same width as your speech-bubble:
https://jsfiddle.net/hxjdy720/
h4 {
font-size: 5em;
margin: 0 auto;
width: 500px;
}
The simplest solution is to put your two elements in one div, like this:
body {
font-family: Europa;
}
.header {
display: block;
margin: auto;
width: 500px;
}
h4 {
font-size: 5em;
margin: 0 auto;
}
.speech-bubble {
height: 500px;
width:500px;
position: relative;
border-radius: 20px;
background:#6441a5;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class="header">
<h4>header</h4>
<div class="speech-bubble">
</div>
</div>
i have the following simple script, but it doesn't work in IE7
<div id="content">
<div id="left"></div>
<div id="right"></div>
<div id="bottom_menus">any text here...</div>
</div>
and CSS
#content
{
margin: 0 auto;
padding: 0;
width: 980px;
background-color: lime;
height: 800px;
overflow: hidden;
position: relative;
}
#left
{
width: 275px;
float: left;
background-color: olive;
margin: 0px 0px -5000px 0;
padding: 0 0 5000px 0;
min-height: 400px;
}
#right
{
width: 704px;
float: left;
background-color: red;
margin: 0px 0px -5000px 0;
padding: 0 0 5000px 0;
min-height: 400px;
}
#bottom_menus
{
background-color: orange;
height: 15px;
position: absolute;
bottom: 0px;
width: 100%;
}
why position absolute doesn't work?
thanks in advance
for absolute position to work, you must specify both direction: eg. top & left, or bottom & rightetc...
For you footer (bottom_menus) to take all space you need to set:
#bottom_menus {
background-color: orange;
height: 15px;
position: absolute;
left: 0;
right: 0; //assuming you need the footer to take the whole width
bottom: 0;
width: 100%;
}
ps: small remark, you dont need to set px unit when value is 0.
You haven't specified a left, so it's defaulting to 0px; Since you have a margin of -5000px on the box, I'm guessing it is working, and the bottom_menus div is off the screen to the left. Absolute positioning would ignore the padding of its parent container. Try setting left: 5000px, assuming you need the negative margin and positive padding. What are you trying to accomplish with that?