I want to center a fixed div inside its parent. The width of the fixed div should have the width of its parent. But it does not work, what is wrong?
js fiddle
HTML
<div class="container">
<div class="wrap">
<div class="center" >
centered
</div>
</div>
</div>
CSS
.container {
position: relative;
width: 300px;
height: 400px;
border:solid;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.wrap {
height: 800px;
width: 100%;
position: relative;
text-align: center;
}
.center{
background: red;
position: fixed;
bottom: 100px;
width: inherit;
}
change .wrap's width:
.wrap {
height: 800px;
width: inherit;
position: relative;
text-align: center;
}
Related
I want the divs inside content_container to be stacked vertically below each other and not overlap. Please help.
My HTML code:
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
My CSS code:
#content_container{
float: left;
width: 100%;
height: 100%;
overflow: auto;
text-align: center;
}
#sub_nav{
position: fixed;
width: 100%;
}
#content{
width: 100%;
}
[1]: https://i.stack.imgur.com/28184.jpg
HTML
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
CSS
#content_container{
float: left;
width: 100%;
height: 100%;
overflow: auto;
text-align: center;
display: flex;
flex-direction: column;
}
#sub_nav{
position: -webkit-sticky;
position: sticky;
top:0;
width: 100%;
}
#content{
width: 100%;
}
Hope this helps !!
Also, refer to https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for full flexbox reference.
Your problem is the "position: fixed;" for the #sub_nav div.
Remove that and they should stack one on top of the other.
It will be much easily to use flex boxes:
#content_container {
display: flex;
height: 500px;
width: 100%;
}
#sub_nav {
background: red;
width: 200px;
}
#content {
flex: 1;
background: blue;
}
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
Try This...
#content_container{
width: 100%;
height: 100%;
display: flex;
}
#sub_nav{
width: 50%;
height: 200px;
background-color: red;
}
#content{
width: 50%;
background-color: blue;
height: 200px;
}
<body>
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
<body>
Much easier to do with flex boxes.
#content_container {
display: flex;
height: 500px;
width: 100%;
}
#sub_nav {
background: white;
width: 100px;
}
#content {
flex: 1;
background: green;
}
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
position: fixed takes the element out of the flow and make it fixed to the viewport. which leads the next element to overlap.
so you need to let fixed element sub_nav show on top. and content would show by giving it padding on top or move the top start point with relative
element{
position: relative;
top: 20px;
}
Example
#content_container {
float: left;
width: 100%;
height: 100%;
overflow: auto;
text-align: center;
}
#sub_nav {
background-color: yellow;
position: fixed;
width: 100%;
z-index: 1;
}
#content {
background-color: cyan;
width: 100%;
padding-top: 30px;
height: 100px;
}
<div id=content_container>
<div id=sub_nav>sub_nav
</div>
<div id=content>content
</div>
</div>
A bit hard to title =>
I have the following code
==> PROBLEM <==
https://codepen.io/anon/pen/WVpEGQ?editors=1100
==> OK <==
https://codepen.io/crocsx-the-styleful/pen/EqWvRR
Basically, I would like that margin/padding etc on element contained in subcontent-header to apply RELATIVELY to the subcontent-header div
this div has a position:relative, but it applied outside of the div and it pushed my subcontent-header down instead
/* -- MAIN -- */
body, html {
background: #body-background-color url(/assets/images/bg.jpg) no-repeat center 0;
background-size: contain;
color:#body-color;
font-size: 0.9rem;
height: 100%;
max-height: 100%;
font-family: 'Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
// font-family: #font-name !important;
margin:0;
padding:0;
position:relative;
overflow: auto;
}
.header {
position: relative;
background:green;
width: 100%;
height: 40px;
}
.content {
width: 100%;
min-height: calc(100% - 60px) !important;
position: relative;
display: flex;
flex-direction: column;
background: red;
}
.footer{
width: 100%;
height: 20px;
position: relative;
background: blue;
}
.subcontent{
position:absolute;
width: 100%;
height: 100%;
background:rgba(155,155,155,0.5)
}
.subcontent-header{
position: relative;
width: 100%;
height: 30%;
background:rgba(155,0,0,0.5)
}
.subcontent-content{
position: relative;
width: 100%;
height: 70%;
background:rgba(0,0,155,0.5)
}
<div class="header"></div>
<div class="content">
<div class="subcontent">
<div class="subcontent-header">
<h1>title</h1>
</div>
<div class="subcontent-content"></div>
</div>
</div>
<div class="footer">
</div>
The reason is because you didn't set your h1's position to absolute.
Try adding this to your CSS
.subcontent-header h1 {
position: absolute;
}
Sample working code below
/* -- MAIN -- */
body, html {
background: #body-background-color url(/assets/images/bg.jpg) no-repeat center 0;
background-size: contain;
color:#body-color;
font-size: 0.9rem;
height: 100%;
max-height: 100%;
font-family: 'Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
// font-family: #font-name !important;
margin:0;
padding:0;
position:relative;
overflow: auto;
}
.header {
position: relative;
background:green;
width: 100%;
height: 40px;
}
.content {
width: 100%;
min-height: calc(100% - 60px) !important;
position: relative;
display: flex;
flex-direction: column;
background: red;
}
.footer{
width: 100%;
height: 20px;
position: relative;
background: blue;
}
.subcontent{
position:absolute;
width: 100%;
height: 100%;
background:rgba(155,155,155,0.5)
}
.subcontent-header{
position: relative;
width: 100%;
height: 30%;
background:rgba(155,0,0,0.5)
}
.subcontent-header h1 {
position: absolute;
}
.subcontent-content{
position: relative;
width: 100%;
height: 70%;
background:rgba(0,0,155,0.5)
}
<div class="header"></div>
<div class="content">
<div class="subcontent">
<div class="subcontent-header">
<h1>title</h1>
</div>
<div class="subcontent-content"></div>
</div>
</div>
<div class="footer">
</div>
Hi I haven't got the right concept about center div in nested divs.Here is my html .I want to center white background div.
<div class="div1">
<div class="img"></div>
</div>
<div class="div2">
</div>
and CSS
.div1{
width :100%;
height: 300px;
background-color: black;
position: relative;
}
.img{
width: 100px;
height: 100px;
position: absolute;
background-color : white;
display: block;
margin: auto;
bottom: 0%;
margin-bottom: -50px;
text-align: center;
}
.div2{
width :100%;
height: 300px;
background-color: #e65100;
}
I tried to center div using text-align:center but it was not working.
and the output is here
.img {
...
left: 0;
right: 0;
}
fiddle: https://jsfiddle.net/ep9co5g5/
You can use left and translateX to center it since you are using position absolute,
you need to add this css to .img
left:50%;
transform:translateX(-50%);
see code snippet:
.div1{
width :100%;
height: 300px;
background-color: black;
position: relative;
}
.img{
width: 100px;
height: 100px;
position: absolute;
background-color : white;
bottom: 0%;
margin-bottom: -50px;
left:50%;
transform:translateX(-50%);
}
.div2{
width :100%;
height: 300px;
background-color: #e65100;
}
<div class="div1">
<div class="img"></div>
</div>
<div class="div2">
</div>
.div1{
width :100%;
height: 300px;
background-color: black;
position: relative;
}
.img{
width: 100px;
height: 100px;
position: absolute;
background-color : white;
display: block;
margin: auto;
bottom: 0%;
margin-bottom: -50px;
text-align: center;
left:0;
right:0;
}
.div2{
width :100%;
height: 300px;
background-color: #e65100;
}
<div class="div1">
<div class="img"></div>
</div>
<div class="div2">
</div>
I'm attempting to have a static left div and have the right divs be scrollable. I'd like to be flexible so I set widths and heights to percentage basis.
Currently, when I scroll the left div scrolls with the right div, so when I reach the second right div in the stack, there is not left div associated to it.
I'd like for the left div to always remain and only the right divs to scroll.
HTML:
<div class= "div-left div-left-small">
</div>
<div class= "div-right-1 div-right-1-small">
</div>
<div class= "div-right-2 div-right-2-small">
</div>
<div class="div-right-3 div-right-3-small">
</div>
CSS:
html{
height:100%;
width:100%;
margin: 0px;
}
body{
height:100%;
width: 100%;
margin: 0px;
}
.div-left{
background-color: darkblue;
height: 100%;
width:50%;
margin: 0px;
float: left;
position: static;
}
.div-right-1{
background-color: yellow;
height: 100%;
width: 50%;
margin: 0px;
float: right;
}
.div-right-2{
background-color: aqua;
height: 100%;
width: 50%;
margin:0px;
float: right;
}
You just have to set position: fixed for left div. Check code below.
html{
height:100%;
width:100%;
margin: 0px;
}
body{
height:100%;
width: 100%;
margin: 0px;
}
.div-left{
background-color: darkblue;
height: 100%;
width:50%;
margin: 0px;
float: left;
position: fixed;
}
#clear {
clear: both;
}
.div-right-1{
background-color: yellow;
height: 100%;
width: 50%;
margin: 0px;
float: right;
}
.div-right-2{
background-color: aqua;
height: 100%;
width: 50%;
margin:0px;
float: right;
}
<div class= "div-left div-left-small">
</div>
<div class= "div-right-1 div-right-1-small">
</div>
<div id="clear"></div>
<div class= "div-right-2 div-right-2-small">
</div>
<div class="div-right-3 div-right-3-small">
</div>
you need the first in fixed position and the rest be margin-left at 50% ... if i understood:
html {
height: 100%;
width: 100%;
margin: 0px;
}
body {
height: 100%;
width: 100%;
margin: 0px;
}
.div-left {
background-color: darkblue;
height: 100%;
width: 50%;
margin: 0px;
position: fixed;
}
[class^="div-right"] {
background-color: yellow;
height: 100%;
margin-left: 50%;
}
.div-right-2 {
background-color: aqua;
}
<div class="div-left div-left-small">
</div>
<div class="div-right-1 div-right-1-small">
</div>
<div class="div-right-2 div-right-2-small">
</div>
<div class="div-right-3 div-right-3-small">
</div>
another newbie question here. Learning CSS. I am trying to do something that I thought would be very simple, but have not managed to find the way to do it, or a suitable answer to the question.
I have a simple project with a header, some content and a footer. The content has a div with a white border and an image inside it. I would like the div to be as wide as the image and no wider. I have provisionally set the width to 430px, but I would like to know the code to set the width to whatever the width of the image is.
Code
html
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap {
position: relative;
border: 1px solid white;
width: 430px;
display: block;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
}
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="Images/01Folder/Image.jpg" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
Add display: inline-block; to your .imagewrap without setting it's width.
.imagewrap {
display: inline-block;
}
If you want a div with an image to be centered, add another div around them with:
.wrapper {
display: flex;
justify-content: center;
align-items: center;
}
But do you really need that div around an image? The border might be added to an image itself without additional div.
If you want a border on the image, add it there
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap {
position: relative;
/*border: 1px solid white;
width: 430px;
display: inline-block;
line-height: 0;
margin: 0 auto;*/
top: 50%;
transform: translateY(-50%);
text-align: center; /*center image horizontally*/
}
#imagewrap img {
border: 1px solid white;
}
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="https://unsplash.it/100/100" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
Check out this fidde:
https://jsfiddle.net/56myv9g2/1/
#imagewrap img{
display:block;
}
#imagewrap{
position: relative;
border: 1px solid white;
display: inline-block;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
}
#container {
height: 80%;
width: 100vw;
text-align:center;
background-color: red;
}
Also, you could just give the border to the image tag all along without the div
If you set display: inline-block, then you need to add text-align: center to container
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
text-align: center;
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap{
position: relative;
border: 1px solid white;
width: 430px;
display: inline-block;
top: 50%;
transform: translateY(-50%);
}
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="Images/01Folder/Image.jpg" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>