The following image will be helpful.
Consider a traditional centered wrapper with max-width.
Then wrapper has 2 columns using 40% and 60% of the wrapper respectively (random number that isn't 50%).
Is there a way to stretch the divs outter limit to match the window borders without Javascript - while the inner limits respect the wrapper reference?
This unfortunatelly doesn't work:
#div1{
left: 0vw;
right: 40%; /*of .wrapper */
}
#div2{
left: 40%; /*of .wrapper */
right: 100vw;
}
Solution with JS (poorly written): https://jsfiddle.net/sirojuntle/ktvap86c/12/
The idea is to make smaller desktop layout looks better in larger screens.
Thanks
Because your wrapper is position: relative; half your job is already done. Even with position: absolute; your divs still take the wrapper as their parent co-ordinates.
With that in mind, it's easier than you think.
.div1{
right: 60%; /* is 40% from the left, like your picture */
left: calc(50% - 50vw)
}
.div2{
left: 40%;
right: calc(50% - 50vw)
}
You can play with negative margin
.wrapper {
--m: min(0px, (800px - 100vw)/2);
}
.row1 {
width: calc(40% - var(--m));
margin-left: var(--m);
}
.row2 {
width: calc(60% - var(--m));
margin-right: var(--m);
margin-left:auto;
}
Full code:
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.wrapper {
--m: min(0px, (800px - 100vw)/2);
border: 3px solid pink;
max-width: 800px;
background-size: 10%;
background-image: linear-gradient(90deg, #000, #0000 5%);
margin:auto;
}
.row1 {
background-color: red;
min-height: 100px;
width: calc(40% - var(--m));
margin-top: 20px;
margin-bottom: 20px;
margin-left: var(--m);
}
.row2 {
background-color: darkred;
width: calc(60% - var(--m));
margin-left:auto;
margin-right: var(--m);
min-height: 100px;
}
<div class="wrapper" id="wrapper">
<div class="row1" id="ref">
There is a way to stretch this with CSS?
</div>
<div class="row2" id="ref2">
And that?
</div>
</div>
Related
The image is moving depending on the size of the screen, I would like to fix it on the top middle. How do I do it? Here is 2 screenshots explaining:
HTML:
<div class="logo"></div>
CSS:
.logo {
background:url(../img/logo.png) no-repeat;
position:absolute;
display: inline-block;
left:50%;
top:30%;
height:120px;
width:175px;
margin:-115px 0px 0px -112px;
}
You could use translate:
.logo {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
height:120px;
width:175px;
background:url(../img/logo.png) no-repeat;
}
jsFiddle
You can use calc function in CSS.
Resize your window to see it's effect (in fullscreen).
.logo{
position: absolute;
width: 175px;
height: 120px;
top: 30%;
left: calc(50% - (175px / 2)); /* 50% parent width - half_of_image_width */
border: 1px solid red;
}
.container{
position: absolute;
width: 90%;
height: 90%;
border: 1px solid black;
}
<div class="container">
<div class="logo"></div>
</div>
I am having an issue centring a <div id='divTwo'> inside another <div id='divOne'>. This is normal an easy thing to do, however in this instance i have transform: scale(); with transform-origin: 50% 50% 0px; applied on 'divTwo'
#divOne {
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#divTwo {
width: 1024px;
height: 768px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
border-left: 131px solid #333333;
border-right: 131px solid #333333;
border-top: 47.5px solid #333333;
border-bottom: 47.5px solid #333333;
border-radius: 55px;
}
if the scale applied to the transform and the window is larger than the outerWidth(), 'divTwo' has no issue centring. However when the 'divTwo' is scaled and the window is smaller or equal to the outerWidth(). The div will no longer centre, instead it will place its centre point to be right side of the browser, resulting if half the of 'divTwo' being off the right hand-side of the browser. Changing transform-origin: 50% 50% 0px; to transform-origin: 0% 50% 0px; works so long as you don't scale vertically, and vice versa.
jsfiddle example : https://jsfiddle.net/yvyz49zp/
Thank you. I feel like am missing something of obvious.
I knocked this up relatively quickly in jsfiddle - no javascript needed. Just play around with the values until you get something you like.
Code:
body {
background: lightblue;
}
#container {
display: inline-block;
position: absolute;
width: 50%;
right: 50%;
top: 50%;
transform: translate(50%, -50%);
}
#dummy {
margin-top: 75%; /* Using the dummy is the trick - it locks the aspect ratio (at 4:3 in this case) */
}
#device {
position: absolute;
top: 10%;
bottom: 10%;
left: 0;
right: 0;
background-color: #333;
border-radius: 10%;
}
#screen {
position: absolute;
width: 70%;
height: 80%;
background: #0f0;
right: 50%;
top: 50%;
transform: translate(50%, -50%);
}
<div id="container">
<div id="dummy"></div>
<div id="device">
<div id="screen"></div>
</div>
</div>
I want to make it so that Online Users div stays always at size of 200px while the chat window to the left of it resize to the max size it can taking all available space.
So when window is resized for example - the chat window will shrink but Online Users window stays at 200px, kind of like liquid layout.
left div (chat window) is: entry_window
right div (online users) is: online_window
#entry_window{
border: 2px solid #D4D4D4;
float: left;
width: 75%;
height: 100%;
margin: 1%;
overflow: scroll;
overflow-x: hidden;
}
#online_window{
border: 2px solid #D4D4D4;
margin: 1%;
margin-left: 0%;
display: inline-block; float: left;
background-color: white;
width: 21.5%;
height: 100%;
}
oh and by the way: for vertical size I made this function to make it in height as big as possible without disturbing bottom part.
function autoscale(){
var v = window.innerHeight - 170;
document.getElementById("entry_window").style.height= v+"px";
document.getElementById("online_window").style.height= v+"px";
}
This can be done entirely without javascript. You can use absolute positioning along with defining top/left/bottom/right and width.
example:
<div id="lefty">this is left content</div>
<div id="righty">this is right content</div>
and
#lefty {
position: absolute;
background-color: blue;
top: 0;
bottom: 0;
left: 0;
right: 200px;
}
#righty {
position: absolute;
background-color: red;
top: 0;
bottom: 0;
width: 200px;
right: 0;
}
See this jsfiddle:
http://jsfiddle.net/Lyp96yqq/
With display:table and table-cell you can do it this way:
*{margin:0;padding:0}
.parent {
width:100%;
display:table;
}
.parent > div {
height:200px;
line-height:200px;
background:orange;
display:table-cell;
}
.parent .fixed {
width:200px;
}
.parent .flexible {
background:red;
}
<div class="parent">
<div class="fixed">Fixed Width</div>
<div class="flexible">Chat Room</div>
</div>
Here The Example on Jsfiddle too.
This could be easily done with the css calc function. However, it depends on what browsers you want to support. check out this link so see what it is compatible with.
Essentially, just do this:
#entry_window{
border: 2px solid #D4D4D4;
float: left;
width: calc(100% - 208px);
height: 100%;
overflow: scroll;
overflow-x: hidden;
background-color:red;
}
#online_window{
border: 2px solid #D4D4D4;
margin-left: 0%;
display: inline-block;
float: left;
background-color: white;
width: 200px;
height: 100%;
}
note: you need to -208 to take the border into account. Also, check out the jsfiddle
I am creating a resizable <ul> with 2 <li> elements, a header and content. The header should stay at a fixed height: 35px;, no matter what happens to the rest of the elements. I would like the content to take up the rest of the <ul>. The problem is it can never fill the rest, because it grows at its own rate, so there is a small margin of the <ul> at the bottom. I could fix this with height: calc(100% - 35px); but there is so little that supports calc. Is there a way to do this with out calc?
jsfiddle
You can use crosse-browser calc like this
.foo {
width: -webkit-calc(100% - 35px); //Chrome
width: -moz-calc(100% - 35px); //firefox
width: calc(100% - 35px); //IE
}
or with JQuery:
document.getElementsByClassName("foo").style.width= window.innerWidth - 35;
Demo Fiddle
No calc needed!
Simply set the postion of the parent container to relative then the children to absolute, anchoring the content with a bottom of zero and top of 35 (the height of the header).
CSS
.resize_container {
position: fixed !important;
top: 65% !important;
left: 0px !important;
}
.container_t {
list-style: none;
bottom: 0px;
left: 0px;
width: 350px;
height: 150px;
background-color: red;
padding: 0;
margin: 0;
position:relative;
}
.header_t {
width: 100%;
height: 35px;
background-color: blue;
padding: 5px;
box-sizing: border-box;
position:absolute;
}
.content_container_t {
width: 100%;
background-color: green;
padding: 5px;
box-sizing: border-box;
position:absolute;
top:35px;
bottom:0;
}
.ui-resizable-n {
cursor: n-resize;
border-top: 5px solid purple;
}
ui-resizable-e {
cursor: e-resize;
border-right: 5px solid purple;
}
You could do something like this:
.content_container_t {
position:absolute;
top:35px;
bottom:0;
left:0;
right:0;
overflow: scroll;
}
DEMO
I am not able to set overflow: hidden; on div wrapper for this script.
Please look at this js fiddle.
http://jsfiddle.net/CwzAD/1/
My aim is to display 10 cells (200 px in height) on the page and showing only animation within this limit, so to act as a mask.
Any idea what I am doing wrong? Any alternative approach even using JavaScript if with only CSS is not possible?
*{
margin: 0;
padding: 0;
}
#pageset {
position: fixed;
top: 0px;
left: 0px;
width: 500px;
height: 200px;
border: 1px solid rgba(0,255,255,1);
-webkit-box-sizing:border-box;
}
#wrapper {
position: fixed;
top: 0px;
left: 0px;
width: 500px;
background-color: green;
/*overflow: scroll;*/ /* PROBLEM HERE----------------*/
/*height: 200px;*/ /* PROBLEM HERE----------------*/
}
#navigator {
position: absolute;
left: 600px;
}
ul {
list-style: none;
/* margin:0px;
padding:0px;*/
}
li:nth-child(even) {
background: #d80000;
}
li {
width: 100px;
height: 100px;
background-color: red;
float: left;
margin: 0px;
}
.focus {
background-color: yellow !important;
}
.btn {
float: left;
width: 50px;
height: 50px;
border: 2px gray solid;
margin: 10px;
background-color: #f0f0f0 ;
}
.icon {
width: 60px;
height: 60px;
border: 2px gray solid;
margin: 10px;
background-color: #99ff66;
}
Solution here
http://jsfiddle.net/Uz5a9/
Basically, what you need to do is use the #wrapper div as a container, which is only 200px high.
The .content div you generate should then scroll inside that wrapper.
To accomplish this you need to position the wrapper relatively, and then position the content div absolutely inside the wrapper. The wrapper should never move around.
The content can be as high as you want, the wrapper should always stay 200px high.
Check the following fiddle, which demonstrates exactly this: http://jsfiddle.net/Uz5a9/
Try this css it will work fine DEMO HERE
.content {
height:200px;
overflow:hidden
}
Just apply these additional rules to #wrapper:
#wrapper { max-height: 200px; overflow: hidden; }
and it seems to work just as described.