I am a middle school student experimenting around with CSS and HTML, and I noticed that width: calc(inherit) does something different than width: inherit.
The following snippet is what width: inherit; does.
.header {
background-color: #77a4ed;
min-width: 200px;
width: fit-content;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
height: 30px;
text-align: center;
height: 20px;
}
.header > div {
background-color: whitesmoke;
border-right: solid 2px black;
border-left: solid 2px black;
border-top: solid 2px black;
min-width: 200px;
width: inherit;
text-align: center;
margin: auto;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
}
.header > div:last-of-type {
background-color: whitesmoke;
border-right: solid 2px black;
border-left: solid 2px black;
min-width: 200px;
width: fit-content;
margin: auto;
padding-left: 10px;
border-bottom: solid 2px black;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
<div class='container'>
<div class='header'>
<div>
test
</div>
<div>
test..........................................................
</div>
</div>
</div>
This snippet is what width: calc(inherit); does.
.header {
background-color: #77a4ed;
min-width: 200px;
width: fit-content;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
height: 30px;
text-align: center;
height: 20px;
}
.header > div {
background-color: whitesmoke;
border-right: solid 2px black;
border-left: solid 2px black;
border-top: solid 2px black;
min-width: 200px;
width: calc(inherit);
text-align: center;
margin: auto;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
}
.header > div:last-of-type {
background-color: whitesmoke;
border-right: solid 2px black;
border-left: solid 2px black;
min-width: 200px;
width: fit-content;
margin: auto;
padding-left: 10px;
border-bottom: solid 2px black;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
<div class='container'>
<div class='header'>
<div>
test
</div>
<div>
test..........................................................
</div>
</div>
</div>
I don't understand why they would give different results. Could someone explain?
if you check the console.log you will see that calc doesn't work with inherit.
#a1{
width:inherit;
}
#a2{
width: calc (inherit);
}
<div id='a1'>xxx</div>
<div id='a2'>xxx</div>
calc() is suppose to calculate using a mathematical expression like -, +, *, or /
example
width: calc(100% - 100px);
you don't have any expression so it's probably not valid but maybe if you make the .header width have an expression then use the inherit that may work
.header{
width: cal(100% - 100px);
}
.header{
width: inherit;
}
that might work but not sure also I don't know if 100% - 100px is the exact width youre looking for
Just use width: 100% and it will take up the whole width of the parent element.
Related
How they look like
i need the boxes to be near each other with a bit of space between but it doesn't seem to work, here's my code
HTMl:
<div className="RoundBox"></div>
<div className="RoundBox2"></div>
CSS:
.RoundBox {
border-radius: 10px;
border: 1.5px solid grey;
box-shadow: #e3eaf6;
width: 20vw;
height: 3vw;
float: left;
}
.RoundBox2 {
border-radius: 10px;
border: 1.5px solid grey;
box-shadow: #e3eaf6;
width: 20vw;
height: 3vw;
float: left;
padding-left: 20vw;
}
Add small amount of margin-left and margin-right like 2 or 3 pixels to both boxes.
.RoundBox {
border-radius: 10px;
border: 1.5px solid grey;
box-shadow: #e3eaf6;
width: 20vw;
height: 3vw;
float: left;
margin-left: 2px;
margin-right: 2px;
}
.RoundBox2 {
border-radius: 10px;
border: 1.5px solid grey;
box-shadow: #e3eaf6;
width: 20vw;
height: 3vw;
float: left;
padding-left: 20vw;
margin-left: 2px;
margin-right: 2px;
}
I have given my divs a min-width.
But if the width increases to more that this then the width should be percentage of the parent container.
I can't for the life of me figure out why I am unable to fix this silly thing.
Any help will be appreciated.
https://jsfiddle.net/q6u3sh5f/
In the fiddle above you can see the wrap's white border extends the width of the window but my divs have a mind of their own.
<html>
<body>
<div class = "wrap">
<div class="date">Date</div>
<div class="month">Month</div>
<div class="task">Task</div>
<div class="status">Status</div>
</div>
</body>
</html>
body {
background-color: #4efa6d;
}
.wrap {
width: 100%;
border: 1px solid white;
}
.date {
min-width: 60px;
width: 6.25%;
float: left;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
.month {
min-width: 70px;
width: 6.25%;
float: left;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
.task {
min-width: 540px;
width: 67.5%;
width: auto;
float: left;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
.status {
min-width: 100px;
width: 12.50%;
float: left;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
You can do using flex.(hope this is not an issue)
float has become old as of now.
I have moved px to random % for min-width feel free to modify this.
fiddle to playaround.
body {
background-color: #4efa6d;
}
.wrap {
width: 100%;
border: 1px solid white;
display:flex;
}
.date, .month {
min-width: 2%;
width: 6.25%;
border: 1px solid red;
margin: 5px;
padding:5px;
}
.task {
min-width: 10%;
width: 67.5%;
margin: 5px;
padding:5px;
border: 1px solid red;
}
.status {
min-width: 5%;
width: 12.5%;
border: 1px solid red;
margin: 5px;
padding:5px;
}
<html>
<body>
<div class = "wrap">
<div class="date">Date</div>
<div class="month">Month</div>
<div class="task">Task</div>
<div class="status">Status</div>
</div>
</body>
</html>
When I adjust the width of the window
I want to A B C Block sequentially arranged vertically down,
I tried for a long time, may I ask how to solve, thank you help
like below ....
A
B
C
div#menu {
border: 1px solid red;
padding: 7px 7px 7px 7px;
}
div#navigation {
border: 1px solid black;
background: #A9F5A9;
height: 495px;
margin: 2px 2px 2px 2px;
float: left;
text-align: center;
line-height: 250px;
font-size: 100px;
width: 31%;
}
div#content {
height: 495px;
border: 1px solid black;
background: #F2F5A9;
margin: 2px 2px 2px 2px;
width: auto;
text-align: center;
line-height: 500px;
font-size: 100px;
margin-right: 33%;
}
#wrapper {
float: right;
width: 100%;
margin-right: -33%;
}
div#footer {
border: 1px solid black;
background: #81F7F3;
color: #000;
height: 50px;
margin: 1px 1px 1px 1px;
text-align: center;
line-height: 50px;
font-size: 50px;
clear: both;
width: auto;
}
<div id="menu">
<div id="container">
<div id="wrapper">
<div id="content">A</div>
</div>
<div id="navigation">B</div>
<div id="footer">C</div>
</div>
</div>
i think you can try this one
div#menu {
display: table-row;
}
I would like to a 4 blocks layout like this:
I've been trying things with float but I really don't master it.
How can I do that ?
Thanks
My HTML code:
<div id="colonne_gauche">1</div>
<div id="colonne_gauche2">2</div>
<div id="colonne_droite">4</div>
<div id="colonne_centre">3</div>
My CSS code:
#colonne_gauche
{
margin-top: 5px;
-float: left;
width: 420px;
height: 145px;
border: 1px solid #818181;
background: red;
}
#colonne_gauche2
{
float: left;
margin-top: 5px;
width: 420px;
height: 145px;
border: 1px solid #818181;
background: orange;
}
#colonne_centre
{
float: right;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
width: 310px;
height: 295px;
border: 1px solid #818181;
background: green;
}
#colonne_droite
{
float: right;
margin-top: 5px;
width: 220px;
height: 295px;
border: 1px solid #818181;
background: blue;
}
I just played a little with the floating and see what that does.
This should help you: DEMO.
HTML:
<div id="header">Header</div>
<div id="stackleft">
<div id="one">1</div>
<div id="two">2</div>
</div>
<div id="stackright">
<div id="three">3</div>
<div id="four">4</div>
</div>
CSS:
#header {
width: 960px;
padding: 50px 0px;
color: black;
border: 1px solid black;
margin: 5px;
text-align: center;
}
#one {
width: 420px;
text-align: center;
padding: 0px;
height: 145px;
color: black;
border: 1px solid black;
margin: 5px;
}
#two {
width: 420px;
text-align: center;
padding: 0px;
height: 145px;
color: black;
border: 1px solid black;
margin: 5px;
}
#three {
width: 310px;
text-align: center;
padding: 0px;
height: 295px;
color: black;
border: 1px solid black;
margin: 5px;
display: inline-block;
}
#four {
width: 220px;
text-align: center;
padding: 0px;
height: 295px;
color: black;
border: 1px solid black;
margin: 5px;
display: inline-block;
}
#stackleft, #stackright {
display: inline-block;
vertical-align: top;
}
http://jsfiddle.net/xam558e3/
Using DIV's inside of other DIV's you can easily control how they appear, and where they appear. You should look up the box model, it may shed some light for you on this.
<div style="width:310px">
<div style="width:303px; height: 100px; background-color: #6495ed;"></div>
<div style="width:100px; height: 100px; background-color: red; float:left; margin: 1px;"></div>
<div style="width:100px; height: 100px; background-color: red; float:left; margin: 1px;"></div>
<div style="width:100px; height: 100px; background-color: red; float:left; margin: 1px;"></div>
<div style="width:303px; height: 100px; background-color: red; float:left; margin: 1px;"></div>
</div>
First: I really tried to find an answer but non of them worked for me.
Here's my problem:
I have a base layout where I have a forward and a backward button in the footer.
Theses buttons must be quadratic. So I've decided to make them simple images (to avoid all the problems with trying to scaling divs propotionally).
Theses images have CSS:
.galleryFooterController {
position: relative;
height: 100%;
float: left;
margin-left: 5px;
background-color: #A0A0A0;
}
And are nested in a container with CSS:
#galleryFooterControlle {
position: absolute;
display: inline-block;
right: 15%;
background: white;
height: 100%;
padding-right: 5px;
width: auto;
}
But the container is not taking the correct width so that the images are not fitting inside and are rendered under each other. If I take out the height: 100% from the images, they fit next to each other in the container.
It would be great if you could help me finding a JS-free version to solve this problem!
Thanks!
Here is a FIDDLE that will give you a start.
I haven't made all of the divs line-up, but you can change the CSS to make it look prettier.
For your buttons, I just used div in a div with CSS-Tricks triangle - You can use .click on the outer div to run your function.
Here's the relevant CSS
.header {
width: 100%;
height: 50px;
background-color: #A0A0A0;
border: 4px solid white;
}
.container {
width: 90%;
height: 400px;
background-color: #A0A0A0;
border: 4px solid white;
float: left;
}
.rightbar {
width: 9%;
height: 460px;
border: 1px solid white;
float: right;
background-color: #A0A0A0;
}
.bottomholder {
width: 90%;
height: 50px;
border: 1px solid black;
}
.bottomleft {
height: 100%;
width: 562px;
float: left;
background-color: #A0A0A0;
border-left: 2px solid white;
}
.bottombutton {
height: 100%;
width: 130px;
float: left;
background-color: #A0A0A0;
border-left: 2px solid white;
}
.bottomright {
height: 100%;
width: 200px;
float: left;
background-color: #A0A0A0;
border-left: 2px solid white;
}
.arrowleft {
width: 40px;
height: 40px;
border-radius: 50%;
border: 4px solid white;
background-color: #A0A0A0;
float: left;
margin-left: 10px;
}
.arrow-left {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid black;
margin-left: 8px;
margin-top: 5px;
}
.arrowright {
width: 40px;
height: 40px;
border-radius: 50%;
border: 4px solid white;
background-color: #A0A0A0;
float: left;
margin-left: 10px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid black;
margin-left: 15px;
margin-top: 5px;
}
Just i tried with liquid layout, removed the border 2px white and change the float property.
.header {
width: 98%;
height: 50px;
background-color: #A0A0A0;
margin:2px 2px;
}
.container{
width: 85%;
height: 400px;
background-color: #A0A0A0;
margin:2px 2px;
float: left;
}
.rightbar{
width: 12%;
height: 460px;
float: left;
background-color: #A0A0A0;
margin-top:2px;
margin-left: 2px;
padding-left: 3px;
}
Full Code http://jsfiddle.net/judearasu/5c5rq/
Thanks to everyone I figguered out how to solve the problem!
Because the images coudn't be rendered next to each other because its container would't pick the right width after scaling the images, i simply made the container width to the maximum available place which was in my project 85%. So now the images are fitting in!
Thanks again!