I want to place my child element on top of my sibling element without changing any of the written css. I can add anything extra required but cannot remove anything.
HTML:
<div class='sibling'>
<div class='child'>
</div>
</div>
<div class='sibling'>
</div>
CSS
.sibling{
width:40px;
height:40px;
position:sticky;
border:1px solid black;
background:green;
margin:4px;
}
.child{
width:30px;
height:100px;
border:1px solid red;
background:red;
}
You can achieve this by giving the second sibling type element a z-index lower than the first one like so :-
.sibling{
width:40px;
height:40px;
position:sticky;
border:1px solid black;
background:green;
margin:4px;
}
.sibling:nth-of-type(1){
z-index:2
}
.sibling:nth-of-type(2){
z-index:1;
}
.child{
width:30px;
height:100px;
border:1px solid red;
background:red;
}
<div class='sibling'>
<div class='child'>
</div>
</div>
<div class='sibling'>
</div>
Related
I was asked to produce my divs in a horizontal fashion (blue yellow red). However I've realized that I was able to do so without changing the display property. Can anyone pls tell me how's that possible?
Here's my html code
<div class="red">
</div>
<div class="blue">
</div>
<div class="yellow">
</div>
Here's my CSS code
.red
{
height:100px;
width:100px;
background-color:red;
position:relative;
left:200px;
}
.blue
{
height:100px;
width:100px;
background-color:blue;
position:relative;
bottom:100px;
}
.yellow
{
height:100px;
width:100px;
background-color:yellow;
position:relative;
left:100px;
bottom:200px;
}
one way to do this is adding a parent div and using flex-box to get them inline using flex-direction: row (wich is default so you won't have to set it by default to get a row of elements)
.red
{
height:100px;
width:100px;
background-color:red;
position:relative;
left:200px;
}
.blue
{
height:100px;
width:100px;
background-color:blue;
position:relative;
}
.yellow
{
height:100px;
width:100px;
background-color:yellow;
position:relative;
left:100px;
}
.flex-parent{
display:flex;
flex-direction:row;
}
<div class="flex-parent">
<div class="red">
</div>
<div class="blue">
</div>
<div class="yellow">
</div>
</div>
If you want to know about behavior of the code you added with the question then Basically what you have done is used the css position property to achieve the goal. There are 5 types of positions in css which are
static
relative
absolute
fixed
sticky
and if you set anyone of these properties to an html element then you can control its position using left, right, top and bottom coordinates.
You can study more about these here
But its not best practice to use these to position elements unless it is required by flow and can't be achieved by other methods, like in your code you can easily achieve the result using css Flexbox, here is a great resource to study flexbox.
Hope it clears your query.
Change order of for achieving [ (1) blue (2) yellow (3)red ] result
You can simply add float property which will get you the desired result without any change in display properties or you can even use display: inline-block; for the desired results...
with display: inline-block;
.red
{
height:100px;
width:100px;
background-color:red;
display: inline-block;
}
.blue
{
height:100px;
width:100px;
background-color:blue;
display: inline-block;
}
.yellow
{
height:100px;
width:100px;
background-color:yellow;
display: inline-block;
}
<div class="blue">
</div>
<div class="yellow">
</div>
<div class="red">
</div>
with float: left;
.red
{
height:100px;
width:100px;
background-color:red;
float: left;
}
.blue
{
height:100px;
width:100px;
background-color:blue;
float: left;
}
.yellow
{
height:100px;
width:100px;
background-color:yellow;
float: left;
}
<div class="blue">
</div>
<div class="yellow">
</div>
<div class="red">
</div>
with position: absolute;
.red
{
height:100px;
width:100px;
background-color:red;
position: absolute;
left: 200px;
}
.blue
{
height:100px;
width:100px;
background-color:blue;
position: absolute;
}
.yellow
{
height:100px;
width:100px;
background-color:yellow;
position: absolute;
left: 100px;
}
<div class="blue">
</div>
<div class="yellow">
</div>
<div class="red">
</div>
Have a nice day!!!
regards,
Om Chaudhary
My question is a little different from the following
CSS Float Logic.
My question is about the concept heightmore concret than that.
There are rules here
https://www.w3.org/TR/CSS22/visuren.html#float-rules
point8 A floating box must be placed as high as possible.
Point9 points out that a left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible and a higher position is preferred over one that is further to the left/right.
Now here is my example.
body{
margin:0px;
}
div.box{
width:640px;
height:800px;
}
div.box1{
width:500px;
height:100px;
background-color: red;
float:left;
}
div.box2{
width:140px;
height:140px;
background-color: blue;
float:left;
}
div.box3{
width:140px;
height:200px;
background-color: yellow;
float:right;
}
div.box4{
width:250px;
height:300px;
background-color: green;
float:left;
margin-top:-40px;
}
div.box5{
width:250px;
height:200px;
float:left;
background-color: purple;
margin-top:-40px;
}
div.box6{
width:100px;
height:120px;
float:right;
background-color: red;
}
<body>
<div class="box">
<div class="box1">box1
</div>
<div class="box2">box2
</div>
<div class="box3">box3
</div>
<div class="box4">box4
</div>
<div class="box5">box5
</div>
<div class="box6">box6
</div>
</div>
</body>
Here is what i got. There are conflicts with point8 and point9 in my example. How to explain the default behaviour of browser to parse the css?
Why can't got the result as below?
There is a confused concepts between me and Quentin Roy at least ,to check the discussion as below, what does A floating box must be placed as high as possible mean?
Especially the word high here?
In the opinion of Quentin Roy, box4 and box5 are equally high for my example.
In my opinion, box4 are highest ,box5 are lowest ,box3 just in the middle of them.
My fore-end experts please show your correct interpretations on my example here ,to end the disccusion.
1 What does high mean in A floating box must be placed as high as possible?
2 Which is the highest and which is the lowst among box3 and box4 and box5?
You answered it yourself:
A floating box must be placed as high as possible
and
a higher position is preferred over one that is further to the
left/right
This is exactly what is happening. The algorithm first try to find the highest free area where your div can fit, then put the div at the rightmost position (in the case of float: right). As a result, box6 is positioned a little bit less on the right so it can be higher.
If it is not what you want, one solution is to use an invisible "spacer" to fill the hole underneath box5.
body{
margin:0px;
}
div.box{
width:640px;
height:800px;
}
div.box1{
width:500px;
height:100px;
background-color: red;
float:left;
}
div.box2{
width:140px;
height:140px;
background-color: blue;
float:left;
}
div.box3{
width:140px;
height:200px;
background-color: yellow;
float:right;
}
div.box4{
width:250px;
height:300px;
background-color: green;
float:left;
margin-top:-40px;
}
div.box5{
width:250px;
height:200px;
float:left;
background-color: purple;
margin-top:-40px;
}
div.box6spacer{
width: 250px;
float:left;
box-sizing: border-box;
border-width: 5px;
border-style: solid;
border-color: lightgray;
color: lightgray;
height: 40px;
}
div.box6{
width:100px;
height:120px;
float:right;
background-color: red;
}
<body>
<div class="box">
<div class="box1">box1
</div>
<div class="box2">box2
</div>
<div class="box3">box3
</div>
<div class="box4">box4
</div>
<div class="box5">box5
</div>
<div class="box6spacer">spacer
</div>
<div class="box6">box6
</div>
</div>
</body>
Another solution is to make use of the fact that a float: left will never go on the right of a float: right and vice-versa. As a result, if you find a way to make box3 floating left instead of right, box6 won't go on his left and thus, will be on top of it.
This is not always possible but in this case, you can have box3 at the same position while floating left (instead of right) if you insert it after box4 and box5:
body{
margin:0px;
}
div.box{
width:640px;
height:800px;
}
div.box1{
width:500px;
height:100px;
background-color: red;
float:left;
}
div.box2{
width:140px;
height:140px;
background-color: blue;
float:left;
}
div.box3{
width:140px;
height:200px;
background-color: yellow;
float:left;
}
div.box4{
width:250px;
height:300px;
background-color: green;
float:left;
margin-top:-40px;
}
div.box5{
width:250px;
height:200px;
float:left;
background-color: purple;
margin-top:-40px;
}
div.box6{
width:100px;
height:120px;
float:right;
background-color: red;
}
<body>
<div class="box">
<div class="box1">box1
</div>
<div class="box2">box2
</div>
<div class="box4">box4
</div>
<div class="box5">box5
</div>
<div class="box3">box3
</div>
<div class="box6">box6
</div>
</div>
</body>
How lo align div blocks by the center .
I dont need left and right spaces.
I need clearly code which is align inline element
https://jsfiddle.net/ax7ddqba/
<div class="wrapper">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
</div>
.wrapper{
border:1px solid red;
width:980px;
text-align:center
}
.block{
border:1px solid green;
width:200px;
height:100px;
display:inline-block;
vertical-align:top;
}
I can do like this:
https://jsfiddle.net/yhocvf7p/
.wrapper{
border:1px solid red;
width:980px;
text-align:left
}
.block{
border:1px solid green;
width:240px;
height:100px;
display:inline-block;
vertical-align:top;
margin-right:123px;
}
.block:nth-child(3){
margin-right:0;
}
but it's not what I need.
If I understand your desired result correctly, which is that the blocks stack horizontally, and then appear in the center of the next row when they run out of room, you should be able to achieve this with text-align:center property.
https://jsfiddle.net/y7rtptxr/1/
#wrapper {
border:red 1px solid;
text-align:center;
width:260px;
}
#wrapper .block {
background:green;
border:#000 1px solid;
height:40px;
width:60px;
display:inline-block;
}
If I got you right, you can use font-size: 0; on your container and then you set needed font-size on your children, so you get this.
You need something like this? http://jsfiddle.net/x2pmjkww/
I try to connect a div to my centre div but I can't figure it out. The "connecting div" should be adjacent to the centered div, but the alignment of the centre div should not change. (It should stay in the centre.)
HTML
<div class="yelow"></div>
<div class="red"></div>
CSS
.red{
width:100px;
background-color:#ff0000;
height:100px;
margin-left:auto;
margin-right:auto;
}
.yelow{
float: left;
width:100px;
background-color:#ffff00;
height:100px;
}
Here's the fiddle:
http://tinyurl.com/k2twodz
So the yellow div should be adjacent to the red centre div.
Thanks in advance!
Here you go. I also adjusted the HTML code.
http://jsfiddle.net/hrvvvz4v/4/
HTML
<div class="red">
<div class="yelow"></div>
</div>
CSS
.red{
width:100px;
background-color:#ff0000;
height:100px;
margin:0 auto;
}
.yelow{
position:relative;
right:100px;
width:100px;
background-color:#ffff00;
height:100px;
}
You can also try this:
HTML:
<div class="main">
<div class="yellow"></div>
<div class="red"></div>
</div>
CSS:
.main
{
width:200px;
height:100px;
}
.red
{
width:100px;
background-color:#ff0000;
height:100px;
float:left;
}
.yellow
{
float: right;
width:100px;
background-color:#ffff00;
height:100px;
}
So i have this rather strange issue, i am trying to line up some divs but i came across this strange problem. Let's say if i put <input type="checkbox" /> inside a div and would try to line it in the same line as other div it wouldn't work no matter what i try but if i add some text to the second div it suddenly start to work, why is that happening?
Here is example of my code to make thing a bit clearer: http://jsfiddle.net/wxgVw/2/
<div id="container">
<div id="container2">
<div id="left">
<input type="checkbox" />
</div>
<div id="right">
</div>
</div>
</div>
body{
margin:50px;
}
#container{
width:770px;
height:400px;
border:1px solid red;
}
#container2{
width:700px;
height:50px;
margin:10px;
outline:1px solid red;
padding:10px;
}
#left{
width:30px;
height:30px;
outline:1px solid green;
display:inline-block;
zoom:1;
*display:inline;
}
#right{
width:400px;
height:30px;
outline:1px solid black;
display:inline-block;
zoom:1;
*display:inline;
}
Whenever you use display: inline-block it is always a good idea to also specify vertical-align: top (or bottom depending on what you want). That would prevent this issue.
You could also use the float property. Just float both divs to the left and make sure overflow: hidden is set to to container above to prevent floating issues.
I edited your sample:
http://jsfiddle.net/wxgVw/4/
#container2{
width:700px;
height:50px;
margin:10px;
outline:1px solid red;
padding:10px;
overflow:hidden;
}
#left{
width:30px;
height:30px;
outline:1px solid green;
float:left;
}
#right{
width:400px;
height:30px;
outline:1px solid black;
float:left;
}