I need to make child div with text size of container. I mean to grow text and input field to fill all container. Here is my code:
<body>
<div class="Container">
<div class="One">
<div class="Child">
<div class="MyText">text <input type="text"></div>
</div>
</div>
</div>
</body>
html,
body {
height: 100%;
margin: 0px;
font-size: 14px;
}
.Container
{
display: flex;
flex-direction: column;
border: 1px black dashed;
height: 100vh;
}
.One
{
display: flex;
border: 1px red dashed;
flex-basis: 100px;
}
.Child
{
heigth:100%;
}
.MyText input {heigth:100%;}
.MyText /* I want to make this content 100% of parents size */
{
font-size: 1vh;
}
https://jsfiddle.net/p6z6huvz/9/
If I get your question right, you try to achieve something like this?
You need to use jQuery for this.
You can adjust the width of the container in CSS and jQuery calculates the font-size
var fontwidth = $('.label').width();
var divwidth = $('.container').width();
var size = parseFloat($('.label').css('font-size'));
var fontsize = (divwidth / fontwidth) * size;
$('.label').css("font-size", fontsize);
*{
margin:0;
padding:0;
}
.label{
float:left;
line-height:.8;
float:left;
}
.container{
width:60%;
display:inline-block;
height:auto;
border:1px dashed black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="label">Text</div>
</div>
Related
Is there a way to achieve the following behavior in css/html :
Please note the green side bar has not to be responsive but I cannot give it a fixed width with
width: XX px;
because it can contain more or less elements, so no idea of XX in advance.
The brown bar has to be responsive and takes all the remaining width.
Thanks in advance for any trick! I have tried tables but with no success as we can't specify a div to restrict its with to what is necessary.
You can achieve that easily with flexbox. Here's the example:
http://codepen.io/anon/pen/JKXXNE
#container {
display:flex;
}
#sidebar, #content {
height: 100px;
}
#sidebar {
background-color: green;
}
#content {
background-color: brown;
flex: 1;
}
You can use Flexbox, and if you set flex: 1 on right div it will take rest of free space and width of left div will still be dynamic.
.parent {
display: flex;
border: 2px solid black;
}
.left {
background: #22B14C;
padding: 10px;
}
.right {
background: #EFE4B0;
padding: 10px;
flex: 1;
}
span {
margin: 0 20px;
}
<div class="parent">
<div class="left"><span>Span</span><span>Span</span></div>
<div class="right">Right</div>
</div>
This can also be done with CSS Table layout you just need to set width: 100% on .right div and it will take rest of free space
.parent {
display: table;
border: 2px solid black;
}
.left {
background: #22B14C;
display: table-cell;
padding: 10px;
}
.right {
background: #EFE4B0;
display: table-cell;
width: 100%;
padding: 10px;
}
span {
margin: 0 20px;
}
<div class="parent">
<div class="left"><span>Span</span><span>Span</span></div>
<div class="right">Right</div>
</div>
For older browsers, use display: table
html, body{
height: 100%;
margin: 0;
}
.tbl{
display:table;
}
.row{
display:table-row;
}
.cell{
display:table-cell;
}
.content{
width: 100%;
}
#left_col {
background: orange none repeat scroll 0 0;
width: 1%;
}
#right_col {
background: green none repeat scroll 0 0;
width: 100%;
}
<div class="tbl content">
<div class="row">
<div id="left_col" class="cell">
wide content <br>
content <br>
wider contentcontent <br>
</div>
<div id="right_col" class="cell"></div>
</div>
</div>
Another way to achieve this without using flexbox can be:
Working Fiddle:
https://jsfiddle.net/y00e5w6m/
(Note i have used sample css and input just to showcase how this can be done. This should be tuned a bit according to requirements)
Sample Output:
Html:
<div style="float:left;width:100%;border:1px solid #000;">
<div id="dynamic-content" style="float:left;background-color:#090;border:1px solid #900">
<div style="float;left;">
Mango
</div>
<div style="float;left;margin-left:5px;">
Banana
</div>
<div style="float;left;margin-left:5px">
Orange
</div>
</div>
<div id="other-content" style="float:left;background-color:#630;border:1px solid #009;">
</div>
</div>
JS:
var items=["mango","grapes","banana"];
var windowWidth = $(window).width();
console.log(windowWidth);
var dynamicContentWidth = $("#dynamic-content").width();
console.log(dynamicContentWidth);
var otherContentWidth = dynamicContentWidth >= windowWidth ? windowWidth : windowWidth-dynamicContentWidth-20;
console.log(otherContentWidth);
$("#other-content").width(otherContentWidth);
$("#other-content").height($("#dynamic-content").height());
I have a layout with a top section which can grow in height, and a content section below which contains a chart. The basic HTML structure can be characterized as:
<div class="wrapper">
<div class="top">
<span class="box">Box 0</span>
<span class="box new">
<button>+</button>
</span>
</div>
<div id="chart">
Chart
</div>
</div>
Each box element is a fixed width and height, and is a fluid design so that as the boxes cannot fit onto the same line, they wrap round to the next, making their container (top) grow.
Here is an interactive demo at this stage: http://jsfiddle.net/d1d6bwbc/ where you can see that the wrapper is 100% width & height (red border). The top has a magenta border, and grows as the boxes need to wrap and the chart has a blue border.
I am trying to make that chart element fill 100% of the remaining height in wrapper.
Here is my css so far
body{margin:0}
.wrapper{
position:absolute;
border:1px solid red;
height:calc(100% - 2px); /* account for border in this example */
width:calc(100% - 2px); /* account for border in this example */
}
.top{
border: 1px solid magenta;
padding-bottom:5px
}
#chart{
border: 1px solid blue;
/* style chart to fill 100% of wrapper
}
I have tried numerous css hacks and tricks, such as those found in this question and this one too but they do not seem to work on my layout.
I have complete control over the layout so if my markup requires some work that will be fine, but a simple way to achieve a fill on that chart element is what I'm after.
Looks like a perfect case for CSS table layout. Set the wrapper as table, top and bottom box as table-row, and the bottom box with height:100% that pushes the top box to its minimal height to fit the content inside.
function ViewModel() {
var self = this;
self.boxes = ko.observableArray([new Box(0)]);
self.addBox = function () {
self.boxes.push(new Box(self.boxes().length));
}
}
function Box(index) {
self.text = "Box " + index;
}
ko.applyBindings(new ViewModel())
html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: table;
border-collapse: collapse;
border: 1px solid red;
box-sizing: border-box;
height: 100%;
width: 100%;
}
.top {
border: 1px solid magenta;
display: table-row;
}
#chart {
border: 1px solid blue;
display: table-row;
height: 100%;
}
.box {
width: 150px;
height: 50px;
border: 2px solid black;
display: inline-block;
vertical-align: top;
margin: 5px;
}
.box.new {
border: 1px dashed black;
}
.box.new button {
display: inline-block;
width: 100%;
height: 100%;
text-align: center;
font-size: 3em;
border: none;
background: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class="wrapper">
<div class="top">
<!-- ko foreach:boxes -->
<span class="box" data-bind="text:text">
</span>
<!-- /ko -->
<span class="box new">
<button data-bind="click:addBox">+</button>
</span>
</div>
<div id="chart">
Chart
</div>
</div>
http://jsfiddle.net/d1d6bwbc/4/
I am not sure if this behavior is achievable via pure CSS .
But it is easy to create using javascript.
I've added this JS to your example
var Fill = function (){
var top =document.getElementById("top").offsetHeight;
var wrapper =document.getElementById("wrapper").clientHeight;
document.getElementById("chart").setAttribute("style","height:"+(wrapper-top-1)+"px");
}
var addEvent = function(elem, type, eventHandle) {
if (elem == null || typeof(elem) == 'undefined') return;
if ( elem.addEventListener ) {
elem.addEventListener( type, eventHandle, false );
} else if ( elem.attachEvent ) {
elem.attachEvent( "on" + type, eventHandle );
} else {
elem["on"+type]=eventHandle;
}
};
addEvent(window, "resize", Fill);
Fill();
and also edited the addBox function to fire the event
self.addBox = function(){
self.boxes.push(new Box(self.boxes().length));
Fill();
}
I also Had to add id's to top and wrapper for this example but you can use class obviously.
Here is the working Fiddle
I have a page that looks like this jsfiddle, code below:
html:
<div class="parent">
<div class="child">
<input type="text">
<input type="submit">
</div>
</div>
css:
.parent { width: 500px; }
.child { width: 100%; }
How do I get it so that together they take up 100% of the parent div width (with the text input stretching accordingly)?
To clarify: I want the button(s) in a row to be fixed width and the input to take up the remaining width of the parent so that together the width = parent width. In the case that there are no button in the row, I'd like the textinput to take up the whole width.
.parent { width: 500px; margin:auto; }
.child { width: 100%; }
add this to make input stretches to full width
.child input { width: 100%; }
There are many ways to do this. One way to do this is to use the display:table-x attribute.
If you wrap the input elements in a div of their own like so:
<div class="parent">
<div class="text">
<input type="text" />
</div>
<div class="button">
<input type="submit" />
</div>
</div>
Then style the parent as display:table, the wrapper div's as display:table-cell, and give a width to div.button, like so:
.parent {
width: 500px;
background-color:blue;
display:table;
}
.text {
display:table-cell;
}
.text input {
width:100%;
-webkit-appearance:none;
}
.button {
display:table-cell;
background-color:red;
width:100px;
}
Then you can achieve the result you are looking for: http://jsfiddle.net/QpCCD/9/
This is similar to #panindra's post, but it keeps both inputs on the same line.
I've added some color to the sample to be able to see the position on the screen.
<html>
<head>
<style type="text/css">
body { background-color: black; }
.parent { width: 500px; background-color: white; text-align: center; }
.child { width: 100%; position: relative; margin: 0px 0px 0px 0px; border: 0px; }
.child input { width: 49%; margin: 0px 0px 0px 0px; border: 0px; }
</style>
</head>
<body>
<div class="parent">
<div class="child">
<input type="text">
<input type="submit">
</div>
</div>
</body>
</html>
Actually, this would be closer:
.child input { width: 248px; }
I have this problem, I have two divs:
<div style="width:100%; height:50px;" id="div1"></div>
<div style="width:100%;" id="div2"></div>
How do I make div2 occupy remaining height of the page?
Use absolute positioning:
#div1{
width: 100%;
height: 50px;
background-color:red;/*Development Only*/
}
#div2{
width: 100%;
position: absolute;
top: 50px;
bottom: 0;
background-color:blue;/*Development Only*/
}
<div id="div1"></div>
<div id="div2"></div>
You can use this http://jsfiddle.net/Victornpb/S8g4E/783/
#container {
display: table;
width: 400px;
height: 400px;
}
#container > div{
display: table-row;
height: 0;
}
#container > div.fill{
height: auto;
}
Just apply the class .fill to any of the children to make then occupy the remaining height.
<div id="container">
<div>
Lorem ipsum
</div>
<div>
Lorem ipsum
</div>
<div class="fill"> <!-- this will fill the remaining height-->
Lorem ipsum
</div>
</div>
It works with how many children you want, no additional markup is required.
Demo
One way is to set the the div to position:absolute and give it a top of 50px and bottom of 0px;
#div2
{
position:absolute;
bottom:0px;
top:50px
}
Since you know how many pixels are occupied by the previous content, you can use the calc() function:
height: calc(100% - 50px);
I faced the same challenge myself and found these 2 answers using flex properties.
CSS
.container {
display: flex;
flex-direction: column;
}
.dynamic-element{
flex: 1;
}
https://stackoverflow.com/a/35348188/1084619
https://stackoverflow.com/a/35348188/1084619
You can use
display: flex;
CSS property, as mentioned before by #Ayan, but I've created a working example: https://jsfiddle.net/d2kjxd51/
With CSS tables, you could wrap a div around the two you have there and use this css/html structure:
<style type="text/css">
.container { display:table; width:100%; height:100%; }
#div1 { display:table-row; height:50px; background-color:red; }
#div2 { display:table-row; background-color:blue; }
</style>
<div class="container">
<div id="div1"></div>
<div id="div2"></div>
</div>
Depends on what browsers support these display types, however. I don't think IE8 and below do. EDIT: Scratch that-- IE8 does support CSS tables.
I tried with CSS, and or you need to use display: table or you need to use new css that is not yet supported on most browsers (2016).
So, I wrote a jquery plugin to do it for us, I am happy to share it:
//Credit Efy Teicher
$(document).ready(function () {
$(".fillHight").fillHeight();
$(".fillWidth").fillWidth();
});
window.onresize = function (event) {
$(".fillHight").fillHeight();
$(".fillWidth").fillWidth();
}
$.fn.fillHeight = function () {
var siblingsHeight = 0;
this.siblings("div").each(function () {
siblingsHeight = siblingsHeight + $(this).height();
});
var height = this.parent().height() - siblingsHeight;
this.height(height);
};
$.fn.fillWidth = function (){
var siblingsWidth = 0;
this.siblings("div").each(function () {
siblingsWidth += $(this).width();
});
var width =this.parent().width() - siblingsWidth;
this.width(width);
}
* {
box-sizing: border-box;
}
html {
}
html, body, .fillParent {
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="fillParent" style="background-color:antiquewhite">
<div>
no1
</div>
<div class="fillHight">
no2 fill
</div>
<div class="deb">
no3
</div>
</div>
You could use calc function to calculate remaining height for 2nd div.
*{
box-sizing: border-box;
}
#div1{
height: 50px;
background: skyblue;
}
#div2{
height: calc(100vh - 50px);
background: blue;
}
<div id="div1"></div>
<div id="div2"></div>
<div>
<div id="header">header</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
#header {
height: 200px;
}
#content {
height: 100%;
margin-bottom: -200px;
padding-bottom: 200px;
margin-top: -200px;
padding-top: 200px;
}
#footer {
height: 200px;
}
Why not use padding with negative margins? Something like this:
<div class="parent">
<div class="child1">
</div>
<div class="child2">
</div>
</div>
And then
.parent {
padding-top: 1em;
}
.child1 {
margin-top: -1em;
height: 1em;
}
.child2 {
margin-top: 0;
height: 100%;
}
I have four divs contained in another div, and I want the four inner divs to be centered.
I have used float: left on the four divs so that they are horizontally aligned.
CSS:
<style>
.square //inner divs
{
float: left;
margin:1pt;
width:72pt;
height:72pt;
}
.container //outer divs
{
text-align:center;
width:450pt;
height: 80pt;
}
</style>
and HTML:
<div class = "container">
<div class = "square">...</div>
<div class = "square">...</div>
<div class = "square">...</div>
<div class = "square">...</div>
</div>
How can I center the divs inside the container?
The number of inner divs can be variable.
Because you don't know the number of divs you have, you should use
text-align:center on the outer div
display:inline-block on then inner div
http://jsfiddle.net/edi9999/yv2WY/
HTML
<div class = "container">
<div class = "square">John</div>
<div class = "square">Mary</div>
<div class = "square">Doe</div>
<div class = "square">Jane</div>
</div>
CSS
.square
{
margin:1px;
width:20%;
text-align:left;
border: 1px solid gray;
display:inline-block;
}
.container
{
text-align:center;
width:100%;
height: 80pt;
border: 1px solid black;
}
Here's an alternate method if you can use an extra div:
<div class = "container">
<div class="centerwrapper">
<div class = "square">...</div>
<div class = "square">...</div>
<div class = "square">...</div>
<div class = "square">...</div>
</div>
</div>
<style>
.square
{
float: left;
margin:1pt;
width:72pt;
height:72pt;
}
.container
{
text-align:center;
width:450pt;
height: 80pt;
}
.centerwrapper
{
margin: auto;
width: 302pt;
}
</style>
Also, make sure you have a closing quote on your <div class = "container"> there. The code you pasted is missing one.
As #RwL say, using <span> works, here a sample code, tested on IE6/8, Chrome, Safari, Firefox:
CSS
<style type="text/css">
/* borders and width are optional, just added to improve visualization */
.parent
{
text-align:center;
display: block;
border: 1px solid red;
}
.child
{
display: inline-block;
border: 1px solid black;
width: 100px;
}
</style>
HTML
<span class="parent">
<span class="child">
A
</span>
<span class="child">
B
</span>
</span>
Instead of floating the .square divs, give them display: inline-block. This might be dodgy in Firefox 3.0.x but I believe inline-block is fully supported in 3.5.x.
Most elegant solution I could find when you have a dynamic number of div to center is to use
text-align: center; on the parent div, and display: inline-block; on the children.
It's all explained in details here.
Simply place margin:auto; for all subsequent divs inside your main wrapper that is text-align:center;. SHOULD allign all child divs to the center of the parent div i think?
enter link description here
All in one HTML element in auto center
This code apply all over HTML element in Center without any #mediaquery.
The HTML element auto center main css property display inline-block of the chide div and add css property text-align center of parent div
.center {
border: 1px groove;
width: 97px;
border-radius: 7px;
padding: 10px;
width: 122px;
margin-left: 12px;
margin-top: 13px;
display: inline-block;
text-decoration: none;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 1.2em;
color: #000000;
background: #dbdbdb;
}
<div style="width: auto;text-align: center;">
<div class="center">Div1</div>
<div class="center">Div2</div>
<div class="center">Div3</div>
<div class="center">Div4</div>
<div class="center">Div5</div>
<div class="center">Div6</div>
<div class="center">Div7</div>
</div>
see this example click here
I think this might help:
<style>
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-flow: wrap;
}
</style>