Is it possible to make a multi row div? Just a 2 basic rows .
I have been able to make a static example of what I am looking for. However I'm not too sure how I would make this responsive. Using percents % with current css doesn't work.
HTML
<div class='wrap'>
<div class = "blocks">
div 1
</div>
<div class = "blocks">
div 2
</div>
<div class = "blocks">
div 3
</div>
<div class = "blocks">
div 4
</div>
</div>
CSS
.blocks {display: inline-block; border: solid 1px red; width: 100px;}
.wrap{
width:210px;
border: solid 1px black;
}
I think you're looking for something like this :
.blocks {
display: block;
float: left;
border: solid 1px red;
width: 25%;
box-sizing : border-box
}
.wrap {
width:400px;
padding: 1px;
border: solid 1px black;
}
.wrap:before,
.wrap:after {
content: "";
display: table;
}
.wrap:after {
clear: both;
}
#media (max-width: 800px) {
.blocks {
width:50%;
}
}
#media (max-width: 400px) {
.blocks {
width:100%;
}
.wrap {
width:100%;
}
}
<div class='wrap'>
<div class = "blocks">
div 1
</div>
<div class = "blocks">
div 2
</div>
<div class = "blocks">
div 3
</div>
<div class = "blocks">
div 4
</div>
</div>
(see also this Fiddle)
If you want to use percentage values for your block widths, you have to make sure that there is no blank between the blocks (1) and that the borders and paddings of your blocks are included in the percentage (2).
.blocks {
width: 50%;
float: left; /* (1) */
box-sizing: border-box; /* (2) */
border: 1px solid red;
}
For adding margin between two blocks, you have to give the margin in % and make sure that two blocks width and the margin add up to 100%. I created an example on JSFiddle.
You should use this: http://getbootstrap.com/css/#grid. The grid will help you create multiple columns on a row.
However if you want use custom css then:
.wrap{
width:100%;
clear:both;
border: solid 1px black;
}
.blocks {
width:25%;border: 1px solid red;
}
Related
This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Closed 4 years ago.
I've got a question for which I didn't find any easy solution.
Using only HTML and CSS,
is there a nice way to fits the parent div to "match" the total sizes of its contained elements?
Note that the box elements all have the same fixed, mandatory sizes. But this size may vary, so I'd like to not use #media queries.
Here is a commented snippet to illustrate what I mean:
#page{
width: 500px;
}
.container {
display: inline-block;
border: 1px solid black;
background: #ddd;
height: auto;
}
.box {
width: 200px;
height: 30px;
background: #fff;
line-height: 30px;
text-align: center;
border: 1px solid gray;
float: left;
}
#con1{
width: 404px;
}
<div id="page">
<p>How is it possible to have the container sized to fit its children?</p>
<div class="container">
<div class="box">x</div>
<div class="box">x</div>
<div class="box">x</div>
</div>
<br><br>
<p>Here is what I want, but without setting width in the CSS!</p>
<div class="container" id="con1">
<div class="box">x</div>
<div class="box">x</div>
<div class="box">x</div>
</div>
</div>
Doing this snippet, it appears to me I've got another little question…
Why is there some space between the boxes in my snippet?
Thanks in advance for any helpful answer.
Use of Media Query like this:
.container {
border: 1px solid black;
background: #ddd;
display: inline-block;
}
#media screen and (max-width: 631px) {
.container {
width: 409px;
}
}
#media screen and (max-width: 421px) {
.container {
width: 202px;
}
}
.box {
width: 200px;
height: 30px;
display: inline-block;
background: #fff;
line-height: 30px;
text-align: center;
border: 1px solid gray;
}
<p>How is it possible to have the container sized to fit its children?</p>
<div class="container">
<div class="box">x</div>
<div class="box">x</div>
<div class="box">x</div>
</div>
Note: Resize browser and see result!
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'm trying to put two fixed width divs and one fluid width div in one row of col-12-xs. I want this fluid div to fill out whole space left, but with min-width (for example 600px).
I did something like this:
<div class="container">
<div class="row">
<div class="col-12-xs">
<div class="event">
<div class="date">
</div>
<div class="flyer">
</div>
<div class="info">
</div>
</div>
</div>
</div>
</div>
.date, .flyer, .info {
float: left;
border: 1px solid black;
height:100px;
}
.date, .flyer {
width: 100px;
}
.info {
min-width: 600px;
}
It works fine, but when I decrease window size this .info div moves to next row, which is not what I want.
How can I fix this?
http://www.bootply.com/stF3byJ56I#
Remove float:left for .info
.date, .flyer, .info {
border: 1px solid black;
height:100px;
}
.date, .flyer {
width: 100px;
float:left;
}
.info {
min-width:600px;
}
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 try to get a various number of divs side by side.
This number is will be dynamic.
But in total these divs should have the width of exactly 100% (not under, not over).
Is this possible and if so, how can I achieve this?
Something Like:
SCREEN SIZE
|<--------------------->|
(for 2 boxes:)
|-----------|-----------|
| | |
|-----------|-----------|
or
(for three boxes:)
|-------|-------|-------|
| | | |
|-------|-------|-------|
this jsFiddle shows you how you can achieve 3 boxes side by side. I've edited the css to being:
.left {
float:left;
width:50%;
border: 3px solid #333;
box-sizing: border-box;
background: #C0C0C0;
margin: 0;
}
which works (even after resizing),
and the html was:
<div class="left">...B1</div>
<div class="left">...B2</div>
See below for it in action:
.left {
float:left;
width:50%;
border: 3px solid #333;
box-sizing: border-box;
background: #C0C0C0;
margin: 0;
}
<div class="left">...B1</div>
<div class="left">...B2</div>
Try flex model, works like a charm!
html, body { height: 100%; width: 100%; }
.eqWrap { display: flex; }
.eq { padding: 10px; }
.eq:nth-of-type(odd) { background: yellow; }
.eq:nth-of-type(even) { background: lightblue; }
.equalHW { flex: 1; }
<div>
<h1>EQUAL WIDTH COLUMNS</h1>
<p>Add display:flex to the parent and flex:1 to the boxes</p>
<div class="equalHWrap eqWrap">
<div class="equalHW eq">boo <br> boo</div>
<div class="equalHW eq">shoo</div>
<div class="equalHW eq">shoo</div>
</div>
</div>
jsFiddle: http://jsfiddle.net/SchweizerSchoggi/y7L698nq/