I would like to know if I can only have one of my 2 divs being hidden but not the other one
http://codepen.io/LeaFrontend/pen/yyNbeb
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
.container {
position: relative;
border: 1px solid red;
width: 300px;
height: 100px;
overflow:hidden;
}
.box1 {
position: absolute;
width: 40px;
height: 40px;
border: 1px solid green;
top: 90px;
}
.box2 {
position: absolute;
width: 40px;
height: 40px;
border: 1px solid blue;
left: 290px;
}
I need to keep the same structure
Not sure if that is possible
Here's what you do:
A. Kill the overflow property in the .container block of CSS code.
B. Then use the values for top, bottom, left and right properties to make it overflow to the direction that you want.
C. Use negative value for for the area you want it to overlap. If you want box1 to overlap to the right by 100px, set the right property value -100px.
right: -100px;
Related
I have some html elements: basically a container div and a child div. So when I give child div the CSS property left: 100%, it goes out of the parent div. The property right: 0 or CALC will do the trick but I want get this done only with left: 100%, and no Javascript. So is there any way to get this done?
.parent{
border: 1px solid #000;
height: 500px;
position: relative;
width: 500px;
}
.child{
background: #FF0;
height: 100px;
left: 100%;
position: absolute;
width: 100px;
}
https://jsfiddle.net/evoSL/yd48v14m/4/
This is the right behavior. If you set left:100% in this setup, it will take the width of the parent and pushes the child 100% of that width to the right, which is 500px. You can, as already mentioned, set a negative margin width fixed pixel values, but i wouldn't recommend it. What if you have a fluid width layout? It won't work.
What's wrong with right: 0, it provides exactly what you are looking for.
Otherwise, if you still want to work with left: 100%; you can add transform: translateX(-100%) to the child. this will move the child on the X-axis by it's width.
Well, if you have a fixed with, you can do this with a negative margin on your child:
.parent{
border: 1px solid #000;
height: 500px;
position: relative;
width: 500px;
}
.child{
background: #FF0;
height: 100px;
left: 100%;
position: absolute;
width: 100px;
margin-left: -100px;
}
https://jsfiddle.net/yd48v14m/5/
You can also do this with floats. I don't know what you want to achieve eventually but this is something you could use too:
.parent {
border: 1px solid #000;
height: 500px;
width: 500px;
}
.child {
background: #FF0;
height: 100px;
width: 100px;
float: right;
}
<div class="parent">
<div class="child"></div>
</div>
With left:100%, you make the first border of your child stays just at the end of their container
If your target is to get the yellow box align to the right, here you have options:
.parent{
border: 1px solid #000;
height: 500px;
position: relative;
width: 500px;
}
.child{
background: #FF0;
height: 100px;
left: calc(100% - 100px);
position: absolute;
width: 100px;
}
.child{
background: #FF0;
height: 100px;
right: 0;
position: absolute;
width: 100px;
}
I have a <div> in which I am trying to keep a constant aspect ratio in (because the inner elements will need to be squares). I have been able to work out the CSS so that when you make the window less wide, the height will shrink accordingly and that works great. However, when I make the window more wide, the <div> keeps expanding beyond the height of the parent. How can I stop this .BoardWrapper <div> from expanding past its parent?
.BoardWrapper {
width: 100%;
padding-bottom: 50%;
position: relative;
border: 1px solid red;
}
.Board {
position: absolute;
top: 5px; bottom: 5px; left: 5px;right: 5px;
border: 1px solid green;
}
.Left {
height: 100%;
position: absolute;
left: 0; right: 30px;
border: 1px solid blue;
}
.Right {
height: 100%;
width: 20px;
float: right;
border: 1px solid black;
}
.Container {
position: absolute;
top: 10vh; bottom: 5vh; left: 5vw; right: 5vw;
}
<div class='Container'>
<div class='Right'></div>
<div class='Left'>
<div class='BoardWrapper'>
<div class='Board'></div>
</div>
</div>
</div>
I do not really want to have to deal with a JS solution here since these are all React components. However, a solution that incorporates React or Semantic-UI would be fine (although, it seems like there should be a raw CSS solution).
I'd prefer not to edit .Left, .Right, or .Container, but I can certainly add in extra elements if it would help.
Remove the padding-bottom
.BoardWrapper {
padding-bottom: 50%;
}
and add height
.BoardWrapper {
height: 100%;
}
Working Example:
https://jsfiddle.net/zwp8vwob/
I have some html elements: basically a container div and a child div. So when I give child div the CSS property left: 100%, it goes out of the parent div. The property right: 0 or CALC will do the trick but I want get this done only with left: 100%, and no Javascript. So is there any way to get this done?
.parent{
border: 1px solid #000;
height: 500px;
position: relative;
width: 500px;
}
.child{
background: #FF0;
height: 100px;
left: 100%;
position: absolute;
width: 100px;
}
https://jsfiddle.net/evoSL/yd48v14m/4/
This is the right behavior. If you set left:100% in this setup, it will take the width of the parent and pushes the child 100% of that width to the right, which is 500px. You can, as already mentioned, set a negative margin width fixed pixel values, but i wouldn't recommend it. What if you have a fluid width layout? It won't work.
What's wrong with right: 0, it provides exactly what you are looking for.
Otherwise, if you still want to work with left: 100%; you can add transform: translateX(-100%) to the child. this will move the child on the X-axis by it's width.
Well, if you have a fixed with, you can do this with a negative margin on your child:
.parent{
border: 1px solid #000;
height: 500px;
position: relative;
width: 500px;
}
.child{
background: #FF0;
height: 100px;
left: 100%;
position: absolute;
width: 100px;
margin-left: -100px;
}
https://jsfiddle.net/yd48v14m/5/
You can also do this with floats. I don't know what you want to achieve eventually but this is something you could use too:
.parent {
border: 1px solid #000;
height: 500px;
width: 500px;
}
.child {
background: #FF0;
height: 100px;
width: 100px;
float: right;
}
<div class="parent">
<div class="child"></div>
</div>
With left:100%, you make the first border of your child stays just at the end of their container
If your target is to get the yellow box align to the right, here you have options:
.parent{
border: 1px solid #000;
height: 500px;
position: relative;
width: 500px;
}
.child{
background: #FF0;
height: 100px;
left: calc(100% - 100px);
position: absolute;
width: 100px;
}
.child{
background: #FF0;
height: 100px;
right: 0;
position: absolute;
width: 100px;
}
It's kind of hard to explain, so to make it easier I made this sketch:
I basically have two divs one outer div and one div inside that div. What i want to do is, I kind of want to add a line between the 2 divs. Is this possible and how should i approach this?
Like this?
#outer {
width: 400px;
height: 300px;
border: 1px solid red;
}
#inner {
height: 125px;
border: 1px solid blue;
position: relative;
}
#line {
position: absolute;
width:1px;
height: 50px;
bottom: -25px; /*half the height*/
left: 50%;
border-left: 1px solid green;
}
<div id="outer">
<div id="inner">
<div id="line"></div>
</div>
</div>
The outer div is nothing special.
The inner div gets a relative position and the line div a absolute position.
By making the line div as child and the positions as mentioned above, the position gets defined relative to it's parent. So when using left: 50% that means, on 50% of the parent.
Andrews alternativ
#outer {
width: 400px;
height: 300px;
border: 1px solid red;
}
#inner {
height: 125px;
border: 1px solid blue;
position: relative;
}
#inner:after {
content: '';
position: absolute;
width:1px;
height: 50px;
bottom: -25px; /*half the height*/
left: 50%;
border-left: 1px solid green;
}
<div id="outer">
<div id="inner">
</div>
</div>
first of all is there a good tutorial about positioning elements which really explains what's going on? I've read multiple but can't get a grip on it.
the specific problem I have is as follows:
I have a header div-element (in red) with underneath 2 columns(white and green). Normally with float:left; i can position the elements next to each-other. But now I want one (the white one) to move a bit over the header als shown.
with relative positioning with a negative top value I can get the white one at the right position but how to position the second column. When adjusting the browser size it al gets messed up.
#Column1
{
float: left;
position: relative;
top: -140px;
background-color: #FFFFFF;
left: 70px;
width: 280px;
min-height: 500px;
padding: 10px;
}
#Column2
{
float: left;
width: 800px;
background-color: #00FF00;
}
Here is JSFiddle that demonstrates your layout without floats using position absolute.
In my experience position absolute is more flexible and made for this kind of layouts, especially when you want to dock elements using top, right, bottom and left.
There are circumstance where you need to fallback on using floats, but in this case it is not needed.
Use floats to float things around it and position absolute to dock things.
The HTML
<div id="Header">header</div>
<div id="Column1">Left</div>
<div id="Column2">Right</div>
The CSS
#Header {
background-color: red;
height: 200px;
}
#Column1 {
position: relative;
background-color: #FFFFFF;
top: -140px; left: 70px;
width: 280px;
min-height: 500px;
}
#Column2 {
position: absolute;
background-color: #00FF00;
left: 350px; top: 200px; right: 0;
min-height: 360px;
}
Update Remove display:none from the .more class in the JSFiddle and see that the containers are flexible as well.
I'm just gonna spitball here:
HTML
<div id="red"></div>
<div id="white"></div>
<div id="green"></div>
CSS
#red {
width: 100%;
float: left;
height: 100px;
position: relative;
background-color: #f00;
}
#white {
width: 20%;
float: left;
margin-left: 4%;
margin-top: -40px;
position: relative;
background-color: #fff;
height: 400px;
}
#green {
width: 76%;
float: left;
position: relative;
background-color: #0f0;
height: 400px;
}
Does it work?
You could just use a minus margin
http://jsfiddle.net/gAKAK/
This is kind of a complex request, so don't feel bad that you weren't able to figure it out. You shouldn't have to set the width of anything other than your sidebar for this solution; my solution relies on an uncommon use of overflow: hidden to achieve this.
http://jsfiddle.net/Wexcode/uBQEu/
HTML:
<div id="header"></div>
<div id="white"></div>
<div id="green"></div>
CSS:
#header {
background: red;
height: 70px;
border: 1px solid #000; }
#white {
background: #fff;
float: left;
margin: -30px 0 0 70px;
width: 100px;
height: 230px;
border: 1px solid #000; }
#green {
background: green;
overflow: hidden;
height: 201px;
border: 1px solid #000;
border-top: 0;
border-left: 0; }