In the following html/css code:
<div class="blue">
<div class="red">
<div class="yellow">
1
</div>
<div class="yellow">
2
</div>
</div>
</div>
.blue { background-color: blue; height: 150px; width: 100px; margin: 100px; }
.red { background-color: red; height: 100px; width: 500px; margin-left: -50px; }
.yellow { background-color: yellow; height: 50px; }
I need to give .yellow the same width as .blue, but without using fixed px (as .blue is responsive and can change it's width) and without using position: absolute; as the two yellow must not overlap.
Expected result: http://jsfiddle.net/kPg97/3/
This doesn't work as it uses fixed px:
.yellow { width: 100px; float: left; }
This doesn't work as the first .yellow isn't visible:
.yellow { position: absolute; width: 100%; left: 0px; }
Probably with jquery, you can do like this :
$(document).ready(function(){
var width = $(".blue").width();
$(".yellow").width(width);
});
You can do without jquery, you may have understood though.
Please note a display:inline; and float:left were used. Hope they won't conflict with your interest.
Jsfiddle here
Related
I have a context of 3 divs, one parent, and two children.
The two children are placed one on top of the other and I want to add a margin-top on the bottom one to move the one on top 50px up.
What ends up happening is that the one on the bottom moves down 50px instead.
Here is the code:
.container {
background-color: red;
width: 500px;
height: 300px;
position: relative;
margin: auto;
font-size: 30px;
}
.top,
.bottom {
height: 100px;
width: 100px;
}
.top {
background-color: purple;
}
.bottom {
margin-top: 50px;
background-color: blue;
}
<body>
<div class="container">
<div class="top">top</div>
<div class="bottom">bottom</div>
</div>
</body>
Any suggestions?
CSS allows you to move an element relative to its position without affecting other elements' positions if you use transform.
In this case you can translate the top element in the Y direction by -50px to move it up:
.container {
background-color: red;
width: 500px;
height: 300px;
position: relative;
margin: auto;
font-size: 30px;
}
.top,
.bottom {
height: 100px;
width: 100px;
}
.top {
background-color: purple;
transform: translateY(-50px);
}
.bottom {
background-color: blue;
}
<body>
<div class="container">
<div class="top">top</div>
<div class="bottom">bottom</div>
</div>
</body>
gap (grid-gap) Syntax
gap: 50px;
As you can see the first element is already on the highest point inside the parent container.
html
What you can do is in case you want to increase its height is scaling its y position by a negative number.
How can I achieve the styling shown in the picture? Consindering the following scenario: I got 2 nested div elements, by which the parent is "relative positioned" and the child is "absolute positioned"! And the child div is always "fixed to the bottom" of the body element, when browser is scaled. I don't get this to work...
Here is the code, where I am using padding-bottom: 100%. But this is not a good solution! Is there a way to realise this with only CSS 2.1 API?
body {
min-height: 100%;
background-color: grey;
}
.parent {
height: 70px;
width: 440px;
left:200px;
background-color: blue;
position: relative;
}
.child {
display: block;
position: absolute;
width: 100px;
right:0px;
background-color: yellow;
padding-bottom: 100%;
}
<body>
<div class="parent">
<div class="child">Fix to bottom</div>
</div>
</body>
Don't take 2nd div as child. You want it to stick to bottom and parent div's height will disturb it while scalling.
I hope this helps :)
body {
min-height: 100%;
background-color: grey;
}
.parent {
height: 70px;
width: 400px;
left:100px;
background-color: blue;
position: relative;
top:70px;
}
.another-parent {
display: block;
height:60%;
position: absolute;
bottom:0;
width: 100px;
right:22%;
background-color: yellow;
}
<body>
<div class="parent"></div>
<div class="another-parent">Fix to bottom</div>
</body>
Have problem. I have this code.
<div class="main">
<div class="sidebar"></div>
<div class="content"></div>
</div>
I need to make two colums.
"Sidebar" must have fixed width 200px;
And "content" all remaining width to fullscreen.
I cant change the structure of html code, just css.
if absolute position is ok, you can use it to say left:200px; right:0 and get all the space you need
fiddle : http://jsfiddle.net/h2udmqhn/
.main {
position: relative;
height: 300px;
width: 300px;
border: 1px solid black;
}
.sidebar {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: red;
}
.content {
position: absolute;
top: 0;
left: 200px;
right: 0;
height: 200px;
background: blue;
}
<div class="main">
<div class="sidebar"></div>
<div class="content"></div>
</div>
Use float: left for .sidebar and left margin for .content:
.sidebar {float: left; width: 200px; background: red;}
.content {background: green; margin: 0 0 0 200px;}
http://jsfiddle.net/orty5qtj/1/
Another option is to use calc, which is unsupported in IE8. The solution above works fine in all browsers.
Try this :
.sidebar {
float: left;
min-height: 50px;
background: red;
width: 200px;
}
.content {
background : yellow;
margin-left: 200px;
min-height: 50px;
}
https://jsfiddle.net/Saiyam/5krmkkkx/3/
There a couple of simple ways to do this without the need for calc, margins or absolute positioning. Both of the following ways have the added bonus of keeping the columns the same height as each other
Using display table (compatible to back ie8)
.main {
display: table;
width: 100%;
}
.main > div {
display: table-cell;
}
.sidebar {
width: 200px;
background: blue;
}
.content {
background: red;
}
<div class="main">
<div class="sidebar">200px</div>
<div class="content">the rest</div>
</div>
Using flex (for newer browsers only unless used with the browser prefix):
.main {
display: flex;
width:100%;
max-width:100%;
}
.sidebar {
width: 200px;
flex: 0 0 200px;
background-color:blue;
}
.content {
background-color:red;
flex: 1 0 auto;
}
<div class="main">
<div class="sidebar">200px</div>
<div class="content">the rest</div>
</div>
I have two blocks that are side-by-side. One size is fixed, 90px and other one is not, I want the other one to extend itself to the rest of the container since container size is will be changing.
Here is fiddle with commends displaying the problem: http://jsfiddle.net/L6CSG/
HTML
<div class="container">
<span class="left"></span>
<span class="right"></span>
</div>
CSS
.left, .right {
height: 30px;
display: inline-block;
margin: 0px;
float: left;
}
.left {
background: green;
width: 90px;
}
.right {
background: blue;
width: 100%; // How can I make it fit the rest of the container?
}
.container {
width: 400px; // This value is NOT STATIC
}
You can do it by pure CSS, here is working example jsFiddle
Make sure filler element is last in DOM tree
Make sure rest of the elements have position: relative specified and width+height
This is nice trick I learned:
HTML:
<div id="container">
<div class="left"></div>
<div class="rest"></div>
</div>
CSS:
#container {
width:50%;
height: 50px;
background-color: red;
min-width: auto;
}
.left {
position: relative;
float: left;
width: 90px;
height: 100%;
background: blue;
}
.rest {
display: block;
height: 100%;
overflow: hidden;
background: yellow;
}
Solution 1:
Make the width of .right width: calc(100% - 90px);
Solution 2:
http://jsfiddle.net/L6CSG/4/ In case of this solution you should probably use divs instead of span since I changed your spans to block elements.
You have to set float: left only for the left one
see result:
http://jsfiddle.net/L6CSG/2/
also you need display: block and width: auto for the right one
Here is the solution:
HTML:
<div class="container">
<span class="left"></span>
<span class="right"></span>
</div>
CSS:
.left, .right {
height: 30px;
margin: 0px;
display: block;
}
.left {
background: green;
width: 90px;
float: left
}
.right {
background: blue;
width: auto;
}
.container {
width: 400px;
}
JavaScript is needed to calculate the extra space that can be filled, as the container is not a fixed width.
var con = document.querySelector(".container");
var left = document.querySelector(".left");
var right = document.querySelector(".right");
window.addEventListener('resize', function() {
calcSize();
});
function calcSize() {
var diff = con.offsetWidth - left.offsetWidth;
right.style.width = diff + "px";
}
calcSize();
http://jsfiddle.net/L6CSG/7/
I wanna set one div to be shown on another one.
I can do it by enter it in end of html code after other one,but I wanna do it by css.
how can I do it?
I'm guessing this is what you mean: having the divs overlap when placed one after the other in the markup? You can achieve this by making them position: absolute.
<div id="div1">
</div>
<div id="div2">
</div>
#div1, #div2 {
position: absolute;
}
#div1 {
background-color: red;
width: 100px;
height: 100px;
}
#div2 {
background-color: blue;
width: 100px;
height: 100px;
top: 5px;
left: 5px;
}