I am looking for a way to have a fixed width div centered in the display with divs to the left and right that re-size to fill the display. I am currently accomplishing this with a javascript window.resize function. The reason I want the divs to resize instead of just spill off screen is I actually want the images inside those divs to compress and expand. Is there a way I can accomplish this with just css?
Here is an example of my current markup:
HTML
<body>
<div id="wrapper">
<div id="center">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
</body>
CSS
body {
margin: 0px;
min-width: 1024px;
font-size: 14px;
line-height: 20px;
}
#wrapper {
position: absolute;
top: 0px;
left: 0px;
height: auto;
min-width: 1024px;
width: 100%;
background: #7c7b79;
overflow: hidden;
}
#center {
position: relative;
width: 1000px;
height: auto;
margin: 0px auto;
}
#left {
position: absolute;
top: 0px;
left: -610px; //I do want slight overlap
width: 630px; //full width of image
height: 100%;
overflow: hidden;
}
#right{
position: absolute;
top: 0px;
right: -610px; //I do want slight overlap
width: 630px; //full width of image
height: 100%;
overflow: hidden;
}
javascript
$(window).resize(function(){
var browser_width = $(window).width();
if(browser_width >1100){ //below this width stop compressing
var width = ((browser_width - 1000)/2)+ 20;
$('.mid_pat2').css({'width': width, 'right': -(width-20), 'min-width': 30});
$('.mid_pat1').css({'width': width, 'left': -(width-20), 'min-width': 30});
}
});
You can do that with table-cell (IE8+), or flex (IE10).
Here's an example with table-cell.
HTML:
<div id="wrapper">
<div id="left">a</div>
<div id="center">a</div>
<div id="right">a</div>
</div>
CSS:
#wrapper {
display: table;
width: 100%;
}
#left, #center, #right
{
display: table-cell;
}
#center {
width: 400px; /*fixed*/
background-color: yellow;
}
#left {
background-color: red;
}
#right {
background-color: blue;
}
If the view port width is smaller then the fixed width, the table will not overflow, but instead the columns will shrink (and the fixed column will try to take as much space as possible)
Related
I need to build a tv guide almost exactly like this one:
tv guide
If the user scrolls horizontally in the guide, the timebar should scroll but the channel list should stay fixed.
If the user scrolls vertically in the guide, the timebar should stay fixed but the channel list should scroll.
Is this possible with only using CSS? I'd rather not use JS to solve this because this would be laggy/glitchy.
I tried to make 2 scroll containers, 1 horizontal and 1 vertical, but I am only able to get 1 of the prerequisites right.
Here's the CodePen: CodePen
HTML:
<div class="page">
<div class="horscroll">
<div class="timebar">timeline</div>
<div class="vertscroll">
<div class="channel-list">channel list</div>
<div class="content">grid</div>
</div>
</div>
</div>
CSS:
body {
background-color: #333;
}
.page {
width: 1000px;
height: 1000px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.horscroll {
width: 1000px;
overflow-x: scroll;
overflow-y: hidden;
position: relative;
}
.timebar {
background-color: red;
width: 5000px;
height: 50px;
position: absolute;
top: 0;
}
.vertscroll {
width: 5000px;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
position: relative;
margin-top: 50px;
}
.channel-list {
background-color: green;
width: 200px;
height: 10000px;
position: absolute;
top: 0;
left: 0;
}
.content {
width: 5000px;
height: 10000px;
margin-left: 200px;
background-color: cyan;
}
Can you guys help me?
Many thanks in advance!
I'm trying to find a way to do the following:
Have 2 divs, each with an image as a child element, each 50% width of current viewport
Scale each of these two divs in a 1:1 aspect ratio, and let the image inside each of them fill as good as possible
Never make the divs larger (width or height) so that we get scrollbars in our browser..
Am I asking for the impossible? Or is there a way to do this in css?
For example, let's say I have viewport of 1800x700 px. That would mean each of my columns would have dimensions of 900x900 if run the code below. But my viewport is only 700px heigh = I get scrollbars..
.columns-ratio-slide-container{
background-color: green;
position: relative;
height: 100%;
.col-container{
width: 50%;
padding-top: 50%;
position: relative;
float: left;
#include debug();
.half{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
img{
display: block;
max-height: 100%;
&.landscape{
width: 100%;
height: auto;
}
}
}
}
}
HTML structure:
<div class="columns-ratio-slide-container">
<div class="col-container">
<div class="half">
<img src="https://placeholdit.imgix.net/480x640">
</div>
</div>
<div class="col-container">
<div class="half">
<img src="https://placeholdit.imgix.net/640x320">
</div>
</div>
</div>
See this image if that helps...
You can use 50vw and 100vh to get what you want. Here is an example code snippet:
EDIT: use flex layout to put 2 divs in horizontal center place and update the jsfiddle. Also, describe how to deal with header and footer.
*
{
margin:0;padding:0;
}
.parent {
display: flex;
justify-content: center;
}
div.container
{
width: 50vw;
height: 50vw;
max-height: 100vh;
max-width: 100vh;
background-size: contain;
background-repeat: no-repeat;
background-position: 50%;
}
.container1 {
background-color: red;
background-image: url('https://img3.doubanio.com/lpic/s4554820.jpg');
}
.container2 {
background-color: green;
background-image: url('http://pagead2.googlesyndication.com/simgad/10067268081911489671');
}
<div class="parent">
<div class="container1 container"></div>
<div class="container2 container"></div>
</div>
A jsfiddle is also made. You can adjust the view area's width/height, these 2 divs' aspect ratio are always 1:1, and no scrollbar will appear.
If header or footer is needed, you can use calc() on max-height and max-width, such as:
max-height: calc(100vh - 80px); // 80px is the sum of header height and footer height.
max-width: calc(100vh - 80px);
You can use the "display: table-row" and "display: table-cell"
.columns-ratio-slide-container {
background-color: green;
position: relative;
height: 100%;
display: table-row;
}
.col-container{
width: 50%;
position: relative;
display: table-cell;
vertical-align: middle;
}
.col-container img{
display: block;
max-height: 100%;
width: 100%;
height: auto;
}
<div class="columns-ratio-slide-container">
<div class="col-container">
<div class="half">
<img class="landscape" src="http://placehold.it/480x640">
</div>
</div>
<div class="col-container">
<div class="half ">
<img class="landscape" src="http://placehold.it/640x320">
</div>
</div>
</div>
I have div container, stretched vertically to 'body'.
Inside it I have 2 DIVs on the one level.
The 1st must be stretched to browser's window. But it minimal
height shouldn't be smaller, than the second's height.
The 2nd have 2 fixed heights (changing by JS).
The problem is:
Can I solve this problem WITHOUT using JS, but only with CSS+HTML?
UPDATE:
My HTML code structure - jsFiddle
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
</div>
.container{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding-top: 51px;
}
.div1{
width: 100%;
height: 100%;
position: absolute;
margin-top: -51px;
background: red;
}
.div2{
float: left;
width: 440px;
height: 500px;
margin-top: 44px;
margin-left: 30px;
position: absolute;
background: #cccccc;
}
If you want the first <div> to always be at least as tall as the second <div>, I would start by placing the latter inside the former:
<div class="div1">
<div class="div2"></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 trying to make a 3 column layout webpage with percentage wrapper width, fixed (pixels) left and right side width and a varying middle column width but i cannot get it to work for the middle column. Here is the source:
html
<aside class="left">
<span>Categories</span>
</aside>
<section>
<span>Main</span>
</section>
<aside class="right">
<span>Test</span>
</aside>
css
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
width: 100%;
}
.container {
height: 100%;
width: 100%;
}
.container > aside.left {
float: left;
width: 197px;
border-right: black dashed 3px;
}
.container > section {
float: left;
width: auto;
}
.container > aside.right {
float: left;
background-color: #005f98;
width: 200px;
}
Have you looked at the flexible box model? http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/
If you don't have to support IE7, this will work:
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
width: 100%;
}
.container {
display: table;
height: 100%;
width: 100%;
min-width: 600px;
}
.container > aside, .container > section {
display: table-cell;
width: auto;
}
.container > aside.left {
width: 197px;
border-right: black dashed 3px;
}
.container > aside.right {
background-color: #005f98;
width: 200px;
}
You could replace your floats with absolutely positioned sidebars:
<aside class="left">
<span>C</span>
</aside>
<section>
<span>M</span>
</section>
<aside class="right">
<span>T</span>
</aside>
And
.left {
position: absolute;
top: 0;
left: 0;
width: 50px;
display: block;
background: #ffe;
height: 100%;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 50px;
display: block;
background: #fef;
height: 100%;
}
section {
display: block;
margin: 0 50px; /* Margin sized to match the sidebars */
background: #fee;
}
Live: http://jsfiddle.net/ambiguous/puPbu/
The colors and sizes are just to clarify where everything is. If you're going to put a wrapper <div> around the whole thing then you'll want to have position: relative on it to get the absolutely positioned sidebars in the right place.
in CSS3 you can use
#multicolumn{
column-count: 3
}
check it on http://jsfiddle.net/ilumin/w7F7c/
reference: http://www.quirksmode.org/css/multicolumn.html
Try setting the widths according to percentages, so for example:
.container > aside.left {
float: left;
width: 31%;
border-right: black dashed 3px;
}
.container > section {
float: left;
width: 31%;
}
.container > aside.right {
float: left;
background-color: #005f98;
width: 31%;
}
Thats how i've overcome this problem before.
If you specify width and float for the left and right column, the middle column will automatically fill up the gap:
http://jsfiddle.net/xHnDX/4/
As you can see, the content div actually overlaps the side divs, although the content will stay between them. If you like, you can add an extra container to compensate for the width of the content div as shown here:
http://jsfiddle.net/YauQc/