div to fill up the remaining space (width) - javascript

hey there i have a div with 100% width (the width of computer screen can be anything) inside this width i have two child divs one with fixed width say 50px and i want the other child div to take up the remaining (100%-50px) space can anyone tell me how do i achieve this please ....
I have done like
<div style="width:100%;min-height:90px;">
<div style="float:left;width:50px;height:60px;">
</div>
<div style="float:left;width:90%;height:60px;">
</div>
</div>
in this code if 50 px is not the 10% of screen the there are some left blank space which I do not want

jsFiddle
Only float the fixed width element.
CSS:
.container {
height: 10px;
width: 100%;
}
.right {
background: red;
height: 10px;
}
.left {
background: blue;
width: 50px;
height: 10px;
float: left;
}
HTML:
<div class="container">
<div class="left">
</div>
<div class="right">
</div>
</div>

You could use a table layout:
HTML:
<div class="container">
<div class="fixed-width"></div>
<div class="fluid-width"></div>
</div>
CSS:
.container {
display: table;
table-layout: fixed;
width: 100%;
}
.fixed-width {
display: table-cell;
width: 50px;
}
.fluid-width {
display: table-cell;
}
http://jsfiddle.net/myajouri/zJq8N/
OR...
You could use width: calc(100% - 50px) which is not supported in IE8 and below.
.container {
width: 100%;
}
.fixed-width {
float: left;
width: 50px;
}
.fluid-width {
float: left;
width: calc(100% - 50px);
}
http://jsfiddle.net/myajouri/mTq6x/

Related

How to automaticlly create an InputField, when a a position is clicked on a picture?

I am trying to display a highlighted circle when the user double clicks on a certain part of an image(which should be erasable if clicket wrong). If the wanted position is clicked i want to create an "ID" and next to it a simple Inputfield.
The Inputfields should be in a countainer/box which is scrollable.
How can I achieve this ?
here is a edited pic as example for what i hope to achieve:
till now i only did the ground work like bulding the header, footer and sidebar
#wrapper {
margin-left: auto;
margin-right: auto;
background-color: red;
width: 1000px;
height: 800px;
}
#header {
width: 100%;
height: 100px;
background-color: blue
}
#footer {
width: 100%;
height: 50px;
background-color: green;
clear: both;
}
#menue-right {
width: 300px;
height: 650px;
background-color: black;
float: right
}
#content {
width: 700px;
height: 650px;
background-color: yellow;
float: left;
}
#content-center {
width: 500px;
height: 400px;
background-color: darkorange;
margin: auto;
margin-top: 125px
}
#wundbild {
height: 400px
}
<div id="wrapper">
<div id="header">
<h1 style="color: white; text-align: center;padding-top: 25px;">Wundposition ermitteln</h1>
</div>
<div id="menue-right">
</div>
<div id="content">
<div id="content-center">
<img id="wundbild" src="https://i.stack.imgur.com/c3CDS.png">
</div>
</div>
<div id="footer">
</div>
</div>

How to resize bottom fixed div when top div is collapsed?

I have two divs, one on top, the other on the bottom. I need to have the bottom div fixed, and to resize and occupy the space above when the div on top is collapsed. Links to the scenarios below. Is this possible to accomplish using only CSS? This is for an angularJS application.
UPDATE: Support for older versions of browsers, specifically IE, must also be considered.
Div1 expanded
Div1 collapsed
Yes, you can do this using flex. See snippet below.
$(document).ready(function() {
$("#div1").click(function() {
$(this).css("max-height", "50px")
});
});
body, html {
margin: 0;
height: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.box {
flex-grow: 1;
text-align: center;
}
#div1 {
background-color: #4472C4;
}
#div2 {
background-color: #ED7D31;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- begin snippet: js hide: false console: true babel: false -->
Update
Since you noted in the comments you wanna support older browsers, the same as above can be achieved using the old fasion table layout.
$(document).ready(function() {
$("#div1").click(function() {
$(this).css("height", "50px")
});
});
html, body {
height: 100%;
margin: 0;
}
.container {
display: table;
height: 100%;
width: 100%;
}
.row {
display: table-row;
width: 100%;
}
.box {
display: table-cell;
color: #fff;
vertical-align: middle;
text-align: center;
}
#div1 {
background-color: #4472C4;
}
#div2 {
background-color: #ED7D31;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="box" id="div1">
<strong>div1</strong>
</div>
</div>
<div class="row">
<div class="box" id="div2">
<strong>div1</strong>
</div>
</div>
</div>
You can try this.
html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: table;
height: 100%;
width: 100%;
background: yellow;
}
.content {
display: table-row;
/* height is dynamic, and will expand... */
height: 100%;
/* ...as content is added (won't scroll) */
background: yellow;
}
.footer {
display: table-row;
background: grey;
}
<div class="wrapper">
<div class="content">
<h2>Content</h2>
</div>
<div class="footer">
<h3>Sticky footer</h3>
<p>Footer of variable height</p>
</div>
</div>
you can try this it works fine for me
<div class="wrapper">
<div class="container">
<div class="top-div">
topd div
</div>
<div class="bottom-div">
bottom div
</div>
</div>
</div>
CSS
.wrapper{
float:left;
height:100%;
}
.container {
position:absolute;
display: block;
float: left;
width: 100%;
height: 100%;
min-height:100%;
}
.top-div {
margin: 5px;
float: left;
position: fixed;
top: 0;
width: 90%;
height: 30%;
background-color: red;
}
.bottom-div {
margin: 5px;
position: absolute;
float: left;
bottom: 0;
width: 90%;
background-color: green;
}
use jQuery
$(function() {
var containerH = $(".container").height();
var topdivH = $(".top-div").height();
$(".bottom-div").height(containerH - topdivH);
});
check out jsfiddle

Div 1:1 ratio with image inside, with a viewport maxheight, no scrollbars

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>

CSS how to fill the entire width?

i already goggle but still don't know what to do
i have 3 div
<body>
<div id="container">
<div id="center"> <h1>center</h1> </div>
<div id="right"> <h1>right</h1> </div>
</div>
</body>
what i try to accomplish
div id=center is auto fill the width
div id=right is in right position of the div id=center, width=200px;
what i try so far
#center{
background-color: green;
float: left;
overflow: auto;
}
#right{
background-color: red;
float: right;
width: 200px;
}
How to make div id=center fill the entire width with another div (div id=right) in right position of it
jsfiddle
forgive my english
If you need a pure CSS Solution, than consider altering your DOM
Demo
First of all, remove float: left; property from #center, and than I've added width: auto; and overflow: hidden; properties which will make the columns independent.
Reference Code :
<div id="container">
<div id="right"></div>
<div id="center"></div>
</div>
#container {
height: auto;
overflow: hidden;
}
#center {
background-color: green;
width: auto;
height: 20px;
overflow: hidden;
}
#right {
background-color: red;
float: right;
height: 20px;
width: 200px;
}
Doesn't work that way - you need to nest the 'right' div inside of the 'center' div:
<body>
<div id="container">
<div id="center">
<h1>center</h1>
<div id="right">
<h1>right</h1>
</div>
</div>
</div>
</body>
Then make the h1 display inline:
h1 {
display: inline-block;
}
#center {
background-color: green;
float: left;
width: 100%;
}
#right {
background-color: red;
float: right;
width: 200px;
}
Here's an updated fiddle.
I got this from here and learnt a new/useful one.
The following solution will not affect your dom in making changes.
#center{
background-color: green;
float: left;
width: -moz-calc(100% - 200px);
width: -webkit-calc(100% - 200px);
width: calc(100% - 200px);
}
DEMO
Adding this separate since the other one may be useful to someone in the future. Here's the only CSS only solution I could come up with, but there's a caveat: you have to use percentage based widths on both divs:
#center {
background-color: green;
display: inline-block;
float: left;
width: 80%;
}
#right {
background-color: red;
float: left;
width: 20%;
}
20% should be close to what you need on the smaller div, and you can use media queries if necessary to keep it from being too wide on larger screens.
Here's an updated fiddle.
What can i do is customize your css :
#center{
background-color: green;
position : absolute;
width : 100%;
z-index : -1;
}
#center fill all the empty space between it and #right. but you have to notice it that the #center is behind the #right

3 column layout auto middle col width

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/

Categories