I am learning css as beginner and doing some basic tests. My question is: given the css below how can I position the box2 in exactly the middle of the box1?
.box1 {
background: black;
height: 400px;
width: 400px;
margin: auto;
}
.box2 {
height:300px;
width:300px;
background: red;
margin: auto;
}
At the beginning I thought giving box2 a margin auto so the box2 would be in equal distance from top and bottom but I get this result.
It looks like it sets the margin auto for left and right but not for top and bottom.
So if I give a margin top myself it works like this.
Code:
.box2 {
margin: 20px auto;
}
How can I do so the box2 is completely centered in the box1?
.box1 {
background: black;
height: 400px;
width: 400px;
margin: auto;
}
.box2 {
height:300px;
width:300px;
background: red;
position:relative;
left:12.5%;
top:12.5%;
}
<div class="box1">
<div class="box2">
</div>
</div>
try this.
.box1 {
background: black;
height: 400px;
width: 400px;
display:flex;
justify-content:center;
align-items: center;
}
.box2 {
height:300px;
width:300px;
background: red;
}
<div class="box1">
<div class="box2"></div>
</div>
You can do this using flexbox
.box1 {
background: black;
height: 400px;
width: 400px;
margin: auto;
display:flex;
align-items: center;
justify-content: center;
}
.box2 {
height:300px;
width:300px;
background: red;
margin: auto;
}
<div class="box1">
<div class="box2">
</div>
</div>
.box1 {
position:relative;
background: black;
height: 400px;
width: 400px;
margin: auto;
}
.box2 {
position:absolute;
height:300px;
width:300px;
background: red;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}
Check the fiddle: https://jsfiddle.net/wh4yqk2y/
Related
According to the size of the div, I want to set the background-position-x and the background-size.
Using only CSS without JS or JQuery, I use min() which works:
.test {
transition: all 0.5s;
background-image: url(./my-asset.svg);
background-repeat: no-repeat;
background-position-x: min(-50px, -100%);
background-position-y: center;
background-size: min(50px, 100%) 100%;
}
This works properly but only on recent browsers, but I have a Firefox target to v.68 and it is not compatible.
What could be the alternative without using JS or JQuery and only CSS ?
I reproduce what I would like to have in output using min(). Hover the red part to make it work:
body,
html {
height: 100%;
width: 100%;
margin: 5px;
}
#main {
display: flex;
flex-direction: row;
background-color: cyan;
}
.use-px {
width: 300px;
height: 300px;
border: solid 3px black;
}
.use-percentage {
margin-left: 200px;
width: 100px;
height: 300px;
border: solid 3px black;
}
.left-over-image {
width: 25%;
height: 100%;
transition: all 1s;
background-color: red;
background-image: url(https://www.w3schools.com/images/w3schools_green.jpg);
background-repeat: no-repeat;
background-position-x: min(-50px, -100%);
background-position-y: center;
background-size: min(50px, 100%) 100%;
}
.left-over-image:hover {
background-position: left;
}
<html>
<body>
<div id="main">
<div class="use-px">
<!-- It will use 50px, because 25% of 300px is 75px. -->
<div class="left-over-image"></div>
</div>
<div class="use-percentage">
<!-- It will use 100%, because 25% of 100px is 25px. -->
<div class="left-over-image"></div>
</div>
</div>
</body>
</html>
You can consider a trick using pseudo element.
Resize both examples to see that they behave the same:
.box {
height:100px;
width:100px;
border:2px solid;
resize:both;
overflow:hidden;
background:linear-gradient(red,blue) 0/50px 50px no-repeat;
background-position-x: min(4em, 100%);
}
.alt {
height:100px;
width:100px;
border:2px solid;
resize:both;
overflow:hidden;
position:relative;
z-index:0;
}
.alt::before {
content:"";
position:absolute;
background:inherit;
background:linear-gradient(red,blue) 0/50px 50px no-repeat;
background-position-x:100%;
max-width:calc(4em + 50px); /* 4em + width of background */
width:100%;
top:0;
bottom:0;
left:0;
z-index:-1;
}
<div class="box">
</div>
<div class="alt">
</div>
UPDATE
Based on your new code:
body,
html {
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
}
#main {
display: flex;
flex-direction: row;
background-color: cyan;
}
.use-px {
width: 300px;
height: 300px;
border: solid 1px black;
}
.use-percentage {
width: 100px;
height: 300px;
border: solid 1px black;
}
.left-over-image {
width: 25%;
height: 100%;
background-color: red;
position:relative;
overflow:hidden;
}
.left-over-image::before {
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
width:100%;
max-width:50px;
background-image: url(https://www.w3schools.com/images/w3schools_green.jpg);
background-size: 100% 100%;
transform:translateX(-100%);
transition: all 1s;
}
.left-over-image:hover::before {
transform:translateX(0);
}
<div id="main">
<div class="use-px">
<!-- It will use 50px, because 25% of 300px is 75px. -->
<div class="left-over-image"></div>
</div>
<div class="use-percentage">
<!-- It will use 100%, because 25% of 100px is 25px. -->
<div class="left-over-image"></div>
</div>
</div>
Having a little issue with floating and a responsive layout. I have a div container that has a left and right div container inside. The two have to be on the same "row" but when div container "RIGHT" is set to 100%, it moves it down to the next row. I have made a quick fiddle here.
http://jsfiddle.net/v5tnshjw/1/
<div class="row">
<div class="leftBox">LEFT</div>
<div class="rightBox">RIGHT</div>
</div>
.row {
float: left;
width: 600px;
height: auto;
margin: 0px auto;
}
.leftBox {
float: left;
height: 50px;
background-color: red;
width: 80px;
}
.rightBox {
float: left;
height: 50px;
width: 100%;
background-color: blue;
}
The box on the right needs to flow with the browser width but stay on the same line.
Any help or pointers would be great! Thanks in advance.
You could set the inner divs to display:table-cell with the parent as display:table and table-layout:fixed:
.row {
float: left;
width: 600px;
height: auto;
margin: 0px auto;
display:table;
table-layout:fixed;
}
.leftBox {
display:table-cell;
height: 50px;
background-color: red;
width: 80px;
}
.rightBox {
width:100%;
height: 50px;
display:table-cell;
background-color: blue;
}
<div class="row">
<div class="leftBox">LEFT</div>
<div class="rightBox">RIGHT</div>
</div>
You can also use the CSS3 calc() function :
.row {
float: left;
width: 600px;
height: auto;
margin: 0px auto;
}
.leftBox {
float: left;
height: 50px;
background-color: red;
width: 80px;
}
.rightBox {
float: left;
height: 50px;
width: calc(100% - 80px);
background-color: blue;
}
<div class="row">
<div class="leftBox">LEFT</div>
<div class="rightBox">RIGHT</div>
</div>
If the left box also needs to scale:
.row {
float: left;
width: 600px;
height: auto;
margin: 0px auto;
}
.leftBox {
float: left;
height: 50px;
background-color: red;
width: 20%;
}
.rightBox {
float: left;
height: 50px;
width: 80%;
background-color: blue;
}
I having problems with getting the scroll bars to appear inside the left and right container.
The scroll bars appears on the body at the moment.
Please see the fiddle: http://jsfiddle.net/pQq45/7/
HTML:
<div class="wrapper">
<div class="cont">
<div class="left">
<div class="rect"></div>
<div class="rect"></div>
...
</div>
<div class="right">
<div class="rect"></div>
<div class="rect"></div>
...
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
width: 100%;
margin:0;
padding:0;
}
.wrapper {
display: table;
background-color: yellow;
width: 100%;
height: 100%;
padding: 50px 50px 0 0;
box-sizing: border-box;
}
.cont{
width: 100%;
height: 100%;
background: #333333;
display: table-row;
}
.left{
display: table-cell;
width: 200px;
height: 100%;
overflow-y: scroll;
background: #FF0000;
}
.right{
display: table-cell;
width: auto;
height:100%;
overflow: hidden;
background: #00FF00;
}
.rect{
display: inline-block;
width: 150px;
height: 40px;
margin: 3px;
background: #660000;
}
How can I get the scrolls to appear inside left and right containers, rather than on the body? So it would look like this:
This is a more complex layout. And you will run intro trouble using table-layout. I'd recommend you to ditch the table layout thing and use the following:
Demo: http://jsfiddle.net/pQq45/19/
html, body {
height: 100%;
margin:0;
padding:0;
}
.wrapper {
background-color: yellow;
height: inherit;
padding: 50px 50px 0 0;
box-sizing: border-box;
}
.cont {
background: #333333;
position: relative;
height: inherit;
}
.left {
position: absolute;
left:0;
top:0;
bottom:0;
width: 200px;
overflow: auto;
background: #FF0000;
}
.right {
position: absolute;
left: 200px;
top:0;
right:0;
bottom:0;
overflow: auto;
background: #00FF00;
}
.rect {
display: inline-block;
width: 150px;
height: 40px;
margin: 3px;
background: #660000;
}
UPDATE 2
Try this
I think it's because you have height: 100%.
Try setting a pixel height and changing display: table-cell to display: block so that they'll adhere to the height.
It should look like this:
.left{
width: 20%;
background: #FF0000;
}
.right{
width: 80%;
background: #00FF00;
}
.cont {
height: 100%;
}
.right, .left {
float: left;
display: block;
height:100%;
overflow-y: scroll;
}
You are missing
overflow-y: scroll;
On .right
I have the following code shown in this fiddle.
For the life of me I cannot get them to align the way I want them to. It is pretty easy to see where each div should be by looking at the code but here is some more help:
| topLeft | topRight | |
----------------------------------| right |
| bottomLeft | bottomRight | |
Please help me with this!
Ex 1. swapping the right positions in front of the left: http://jsfiddle.net/pTDEX/1/
html:
<div class="top">
<div class="topRight">
topRight
</div>
<div class="topLeft">
topLeft
</div>
</div>
A box floating right after a left floating box will be positioned below the box and then right.
Or ex 2. swapping the float: right for float:left: http://jsfiddle.net/pTDEX/3/
.topLeft {
background: green;
float: left;
width: 300px;
height: 80px;
}
.topRight {
background: gray;
float: left;
width: 100px;
height: 80px;
}
It'll float the right boxes left against the left boxes.
There are more possibilities but it's all about understanding what float does, play with it!
On a side-note, you can safely ditch display: inline when specifying fixed blocks.
I used absolute positioning on the subelements and relative positioning on your container, this is easy as long as you know the dimensions of your elements (in px or %)
.container {
background: cyan;
margin: 0 auto;
width: 500px;
height: 100px;
position:relative;
}
.top {
background: purple;
position:absolute;
top:0;
left:0;
width: 400px;
height: 80px;
}
.topLeft {
background: green;
display: inline;
width: 300px;
height: 80px;
position:absolute;
top:0;
left:0;
}
.topRight {
background: gray;
display: inline;
float: right;
width: 100px;
height: 80px;
position:absolute;
top:0;
left:300px;
}
.bottom {
background: black;
display: inline;
width: 400px;
height: 20px;
position:absolute;
top:80px;
left:0;
}
.BottomLeft {
background: blue;
display: inline;
width: 300px;
height: 20px;
position:absolute;
top:0;
left:0;
}
.bottomRight {
background: red;
display: inline;
width: 100px;
height: 20px;
position:absolute;
top:0;
right:0;
}
.right {
background: yellow;
display: inline;
float: right;
width: 100px;
height: 100px;
position:absolute;
top:0;
left:400px;
}
Check out the updated fiddle:
http://jsfiddle.net/pTDEX/2/
(Note that the position relative attribute on the container is just so that a) absolutely positioned elements within it will position relative to the container. b) it respects your margin 0 auto; (which it wouldn't if you gave it position:absolute)
You main problem in your html code, just an order of div tag Right
<div class="container">
<div class="right">right</div> <!-- replaced top with right -->
<!-- your mistake was fixed here -->
<div class="top'">
<div class="topRight">topRight</div>
<div class="topLeft">topLeft</div>
</div>
<div class="bottom">
<div class="bottomRight">bottomRight</div>
<div class="bottomLeft">BottomLeft</div>
</div>
</div>
Your Css style
//Css Style
.container {
background: cyan;
margin: 0 auto;
width: 500px;
height: 100px;
}
.top {
background: purple;
float: left;
width: 400px;
height: 80px;
}
.topLeft {
background: green;
display: inline;
float: left;
width: 300px;
height: 80px;
}
.topRight {
background: gray;
display: inline;
float: right;
width: 100px;
height: 80px;
}
.bottom {
background: black;
display: inline;
float: left;
width: 400px;
height: 20px;
}
.BottomLeft {
background: blue;
display: inline;
float: left;
width: 300px;
height: 20px;
}
.bottomRight {
background: red;
display: inline;
float: right;
width: 100px;
height: 20px;
}
.right {
background: yellow;
display: inline;
float: right;
width: 100px;
height: 100px;
}
hi i would like to make full height for a left and side bars i must be 100% height but it made a little buggy my css looks like
html{
height: 100%;
min-height: 100%;
}
body{
height: 100%;
}
.container{
background-color: #999;
padding: 20px;
height:100%;
}
.sidebar{
background-color: #9999ff;
float:left;
width:30%;
height:100%;
}
.content{
background-color: #99ff99;
float:left;
width:70%;
height:100%
}
this is my fiddle
demo
if i did height:100% for childs means most of the contents are get overflowed.
display .container as table:
.container{
background-color: #999;
padding: 20px;
display:table;
height:100%;
}
.sidebar{
background-color: #9999ff;
display:table-cell;
width:30%;
}
.content{
background-color: #99ff99;
display:table-cell;
width:70%;
}
http://jsfiddle.net/56C9v/15/
i've updated your fiddle
HTML:
<div class="container">
<div class="wrapper">
<div class="sidebar"></div>
<div class="content"></div>
</div>
</div>
CSS:
html{
height: 100%;
min-height: 100%;
}
body{
height: 100%;
}
.container{
background-color: #999;
padding: 20px;
}
.wrapper {
position: relative;
}
.sidebar{
background-color: #9999ff;
float:left;
width:30%;
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
}
.content{
width: 70%;
background-color: #99ff99;
float:right;
}