I'm trying to make a 'slide-out' div that slides out when out hover over it. What I want to happen is that I want the left div to push the right div off into oblivion, but not below the div, but to the right.
Does anyone know why this happens?
Here is my script:
.container {
width: 796px;
background-color: yellow;
overflow:hidden;
}
.left {
display:none;
float: left;
width: 256px;
background: green;
}
.right {
float: right;
width: 796px;
height: 100%;
background-color: red;
}
Here is a live demo
click 'colorbox', then 'show left div'.
Thank you everyone! :))))
Assuming your .left and .right are within .container the reason one gets pushed down is because there is not enough space.
You have set a width:796px for the .container and so the children i.e. .left and .right would need to add up to 796px. At the moment they add up to 1052px and so one of them is pushed down as they cannot fit side by side.
EDIT : Using inner container method mentioned in my comments below and in #Matteo's answer you need to adjust the following css.
.inner_container{
width: 1396px; /* changed from 1052px */
}
.right {
background-color: red;
float: left; /* changed from right */
height: 100%;
width: 796px;
}
The reason it needs to be 1396px is because it needs to be large enough that when .left is expanded to 600px that .right at 769px can still fit beside it. Then changing to float:left is necessary so that there is no gap between the .left and .right and it remains visible when it is pushed sideways.
Add another div inside .container which is wide enough to hold .left and .right.
http://jsfiddle.net/DRnRQ/
CSS:
.container {
width: 796px;
height: 300px;
background-color: yellow;
overflow:hidden;
}
.left {
float: left;
width: 256px;
background: green;
}
.right {
float: right;
width: 796px;
height: 100%;
background-color: red;
}
.inner_container {
width: 1052px;
}
MARKUP:
<div class="container">
<div class="inner_container">
<div class="left">a</div>
<div class="right">b</div>
</div>
</div>
Related
There are two floated divs of different height inside a wrapper div. I need both of them to be 100% of height of the body i.e. of the same height. Also used clearfix. But height:100% doesnt seem to work. How to do this?
Demo
Html:
<div class="wrapper">
<div class="primary">
<img src="http://demo1.opentaps.org/images/products/small/gis_computer_glen_rolla.png" />
</div>
<div class="secondary">
<img src="http://demo1.opentaps.org/images/products/small/gis_computer_glen_rolla.png" />
</div>
<div class="clearfix">
</div>
</div>
CSS:
body {
min-height: 100vh;
background-color: green;
margin: 0;
}
.wrapper{
background-color: blue;
height: 100%;
}
.primary{
float: left;
width: 80%;
height: 100%;
background-color: yellow;
}
.primary img{
height: 100px;
width: 100px;
}
.secondary{
float: right;
width: 20%;
background-color: red;
height: 100%;
}
.secondary img{
height: 500px;
width: 100px;
}
.clearfix{
clear: both;
}
All you need to do is add a height of 100% to the html and body tags like so:
html, body {
height: 100%;
}
Demo:
http://jsbin.com/EsOfABAL/1/
if you want to use vh units (seen in your code), it does makes it easier, no need to worry about 'heritage' and see your columns being stopped at 100% height of the window.
if you mix the method of faux-column and clear fix , you need to set only once min-height:100vh; on the floatting element.
Your yellow background has to be drawn in the wrapper and the red one in the non-floatting element wich is stretch with the clearfix method.
body {
margin: 0;
}
.wrapper{
background-color: yellow;
overflow:hidden;
}
.primary{
float: left;
width: 80%;
min-height:100vh;
}
.wrapper .primary img{
height: 100px;
/* width:1000px; */
width: 100px;
}
.secondary .overflow{
margin-left:80%;
background-color: red;
}
.overflow:after {
content:'';
height:0;
display:block;
clear:both;
}
.secondary img{
height: 500px;
/*height:100px;*/
width: 100px;
}
uncomment height value for image to check behavior and drawing of your page, scrolling or not .
http://codepen.io/anon/pen/chHtK
Hope this helps you to understand the use of vh (or vw) units , for the faux-column and clearfix methods, it's just a reminder of old methods :)
Enjoy
The html element also needs to be 100% - try this:
html { height: 100%; }
body {
height: 100%;
background-color: green;
margin: 0;
}
I'm looking for a way to devide my screen perfectly into two divs.
One small fixed sized on the left and one with dynamic width on the right.
I didn't figured out how to do this yet.
Because the width in percentage is not proportional.
For example:
http://jsfiddle.net/acmnU/2/
If you resize the result field or the overall width you see that the green
div will not resize in proportion with the screen.
If the field gets to small the green div slips under the red one.
what I need is some kind of anchor. So that the green div fill the entire screen without
getting to big.
HTML:
<body>
<div id="content">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
CSS:
body {
height: 300px;
}
#content {
height: 100%;
}
.left {
float: left;
margin-left: 10px;
background-color: red;
height: 100%;
width: 200px;
}
.right {
float: left;
margin-left: 10px;
background-color: green;
height: 100%;
width: 80%;
}
I hope I have interpreted your question correctly. You can try this fiddle
body {
height: 300px;
}
#content {
height: 100%;
}
.left {
float: left;
margin-left: 10px;
background-color: red;
height: 100%;
width: 200px;
}
.right {
margin-left: 200px;
background-color: green;
height: 100%;
}
I have set the margin-left of the .right to equal that of the width of .left. But don't float the right panel and it will fill the remaining space.
I advise using a layout framework to ease this type of think. Bootstrap is a good one but there are lots of others.
If you want to do it manually, you need to give the Content class a width, and use relative positioning.
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/
does anyone know why the div inside the modal does not stretch vertically but the one on the page does?
Here is a demo
.container {
width: 150px;
background-color: yellow;
overflow:hidden;
}
.left {
display:none;
float: left;
width: 150px;
background: green;
}
.right {
float: right;
width: 150px;
background-color: red;
}
Thanks a lot :)
.left expands to the size of its content, since there is no height: defined. There is less content in the boxed version, so the DIV is shorter.
This question already has answers here:
Align <div> elements side by side
(4 answers)
Closed 4 years ago.
I have a small problem. I am trying to align two divs side by side using CSS, however, I would like the center div to be positioned horizontally central in the page, I achieved this by using:
#page-wrap { margin 0 auto; }
That's worked fine. The second div I would like positioned to the left side of the central page wrap but I can't manage to do this using floats although I'm sure it is possible.
I would like to push the red div up alongside the white div.
Here is my current CSS concerning these two divs, sidebar being the red div and page-wrap being the white div:
#sidebar {
width: 200px;
height: 400px;
background: red;
float: left;
}
#page-wrap {
margin: 0 auto;
width: 600px;
background: #ffffff;
height: 400px;
}
If you wrapped your divs, like this:
<div id="main">
<div id="sidebar"></div>
<div id="page-wrap"></div>
</div>
You could use this styling:
#main {
width: 800px;
margin: 0 auto;
}
#sidebar {
width: 200px;
height: 400px;
background: red;
float: left;
}
#page-wrap {
width: 600px;
background: #ffffff;
height: 400px;
margin-left: 200px;
}
This is a slightly different look though, so I'm not sure it's what you're after. This would center all 800px as a unit, not the 600px centered with the 200px on the left side. The basic approach is your sidebar floats left, but inside the main div, and the #page-wrap has the width of your sidebar as it's left margin to move that far over.
Update based on comments: For this off-centered look, you can do this:
<div id="page-wrap">
<div id="sidebar"></div>
</div>
With this styling:
#sidebar {
position: absolute;
left: -200px;
width: 200px;
height: 400px;
background: red;
}
#page-wrap {
position: relative;
width: 600px;
background: #ffffff;
height: 400px;
margin: 0 auto;
}
I don't understand why Nick is using margin-left: 200px; instead off floating the other div to the left or right, I've just tweaked his markup, you can use float for both elements instead of using margin-left.
Demo
#main {
margin: auto;
width: 400px;
}
#sidebar {
width: 100px;
min-height: 400px;
background: red;
float: left;
}
#page-wrap {
width: 300px;
background: #0f0;
min-height: 400px;
float: left;
}
.clear:after {
clear: both;
display: table;
content: "";
}
Also, I've used .clear:after which am calling on the parent element, just to self clear the parent.
This Can be Done by Style Property.
<!DOCTYPE html>
<html>
<head>
<style>
#main {
display: flex;
}
#main div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 40px;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">Red DIV</div>
<div style="background-color:lightblue;" id="myBlueDiv">Blue DIV</div>
</div>
</body>
</html>
Its Result will be :
Enjoy...
Please Note: This works in Higher version of CSS (>3.0).
The HTML code is for three div align side by side and can be used for two also by some changes
<div id="wrapper">
<div id="first">first</div>
<div id="second">second</div>
<div id="third">third</div>
</div>
The CSS will be
#wrapper {
display:table;
width:100%;
}
#row {
display:table-row;
}
#first {
display:table-cell;
background-color:red;
width:33%;
}
#second {
display:table-cell;
background-color:blue;
width:33%;
}
#third {
display:table-cell;
background-color:#bada55;
width:34%;
}
This code will workup towards responsive layout as it will resize the
<div>
according to device width.
Even one can silent anyone
<div>
as
<!--<div id="third">third</div> -->
and can use rest two for two
<div>
side by side.
It's also possible to to do this without the wrapper - div#main. You can center the #page-wrap using the margin: 0 auto; method and then use the left:-n; method to position the #sidebar and adding the width of #page-wrap.
body { background: black; }
#sidebar {
position: absolute;
left: 50%;
width: 200px;
height: 400px;
background: red;
margin-left: -230px;
}
#page-wrap {
width: 60px;
background: #fff;
height: 400px;
margin: 0 auto;
}
However, the sidebar would disappear beyond the browser viewport if the window was smaller than the content.
Nick's second answer is best though, because it's also more maintainable as you don't have to adjust #sidebar if you want to resize #page-wrap.
The easiest method would be to wrap them both in a container div and apply margin: 0 auto; to the container. This will center both the #page-wrap and the #sidebar divs on the page. However, if you want that off-center look, you could then shift the container 200px to the left, to account for the width of the #sidebar div.