I have created an html stuff using bootstrap 2.3.2 css. The html will be having four rows with different height such as for the first row it will 10%, second row - 20%, third row - 40% and the fourth row - 40% respetively. The html is rendering but the problem is that the height of each row is not displaying correctly.
Can anyone please tell me some solution for this
My code is as given below
JSFiddle
html
<div id="content">
<div class="row1">
<div class="row-fluid">
<div class="span6">content1</div>
<div class="span6">content1</div>
</div>
</div>
<div class="row2">
<div class="row-fluid">
<div class="span6">content2</div>
<div class="span6">content2</div>
</div>
</div>
<div class="row3">
<div class="row-fluid">
<div class="span4">content3</div>
<div class="span4">content3</div>
<div class="span4">content3</div>
</div>
</div>
<div class="row4">
<div class="row-fluid">
<div class="span3">content4</div>
<div class="span3">content4</div>
<div class="span3">content4</div>
<div class="span3">content4</div>
</div>
</div>
</div>
css
.row1 {
height: 10%;
background: red;
}
.row2 {
height: 20%;
background: yellow;
}
.row3 {
height: 40%;
background: orange;
}
.row4 {
height: 40%;
background: violet;
}
#content {
height: 100%;
}
In order to use a percentage based height, all ancestors must have a defined height.
Add this to your example:
html, body {
height: 100%;
}
JSFiddle
If your elements are heavily nested, a better solution may be to use the following instead:
#content {
height: 100vh;
}
JSFiddle
Related
I want to position a div according to the picture:
I'm successful so far by using Bootstrap's row class and using z-index in my CSS. But when I resize the browser, it's not responsive, it just floats off the right side of the page. By the way, I'm using position: absolute (I read online that I have to use this in order to make use of z-index). Is there any other more elegant way to do this? I want it to be responsive but can't seem to find any other workaround than the wonky one I implemented.
Code:
#div2 {
float: inherit;
position: absolute;
top: inherit;
left: 60%;
width: 320px;
height: 1290px;
z-index: 5;
}
<div class="container">
<div class="div-container">
<div class="row">
<div id="div1">
<p>Div 1</p>
</div>
<div id="div2" align='center'>
<p>Div 2</p>
</div>
</div>
<div class="row">
<div id="div3">
<p>Div 3</p>
</div>
</div>
</div>
</div>
You need to make use of the nested rows inside a column. See here - Bootstrap Nesting. Ignore the CSS here as it is for snippet styling and height is used for ignoring the content.
.B {
min-height: 130px;
background: #393276;
margin-bottom: 20px;
}
.A {
min-height: 100px;
margin-bottom: 20px;
background: #393276;
}
.C {
min-height: 250px;
background: #393276;
}
div {
text-align: center;
color: #fff;
font-size: 32px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container mt-4">
<div class="row">
<!-- First Column -->
<div class="col-sm-6">
<!--Rows nested inside a column-->
<div class="row">
<div class="col-12">
<div class="A">A</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="B">B</div>
</div>
</div>
</div>
<!-- Second Column -->
<div class="col-sm-6">
<div class="C">C</div>
</div>
</div>
</div>
I have used flexbox to keep responsive design and some margin positioning to keep the formation together.
.container{
display: flex;
flex-wrap: wrap;
width: 150px;
}
.div1, .div3{
margin-right: 5px;
width: 50px;
height: 50px;
}
.div2{
margin-right: 5px;
width: 50px;
height: 110px;
}
<div class="container">
<div class="div1"> div1 </div>
<div class="div2"> div2 </div>
<br/>
<div class="div3" style="margin-top: -55px;"> div 3 </div>
</div>
What does my css for fixed-left, fixed-right and content have to be such that the left and right divs are fixed, the content div is max width less the width of the two fixed width div and that the divs don't roll one under the other even if the width of the screen is less than (fixed-left.width + fixed-right.width)?
<div class="row" id="row01">
<div class="fixed-left">
<div class="fixed-left-a">001</div>
<div class="fixed-left-b">Item 1</div>
</div>
<div class="content">
<div class="row">
<div class="col-xs-4 col-md-3">1,234</div>
<div class="col-xs-4 col-md-3">1,234</div>
<div class="col-xs-4 col-md-3">1,234</div>
<div class="col-xs-4 col-md-3">1,234</div>
</div>
</div>
<div class="fixed-right">
<span>A</span>
</div>
</div>
<div class="row" id="row02">
...
</div>
I want to use bootstrap 3 grid within the main content, but have fixed attributes of every row that don't require the left and right pieces to be variable sized.
Edit:
I want the output to look something like the attached image.
You can use calc to set the width of the content
.fixed-left, .fixed-right {
position: fixed;
width: 100px;
top: 0;
bottom: 0;
}
.fixed-left {
left: 0;
background: yellow;
}
.fixed-right {
right: 0;
background: purple;
}
.content {
background: pink;
width: calc(100% - 200px);
margin: 0 auto;
height: 100vh;
}
<div class="row" id="row01">
<div class="fixed-left">
<div class="fixed-left-a">001</div>
<div class="fixed-left-b">Item 1</div>
</div>
<div class="content">
<div class="row">
<div class="col-xs-4 col-md-3">1,234</div>
<div class="col-xs-4 col-md-3">1,234</div>
<div class="col-xs-4 col-md-3">1,234</div>
</div>
</div>
<div class="fixed-right">
<span>A</span>
</div>
</div>
see the snippet in full-page and try to resize the browser window
you set margin to content margin: 0 100px; like this.
Here 100px is your fixed element width.
* {
margin: 0;
padding:0;
box-sizing:border-box;
}
.fixed-left, .fixed-right {
position: fixed;
width: 100px;
top: 0;
bottom: 0;
}
.fixed-left {
left: 0;
background: yellow;
}
.fixed-right {
right: 0;
background: purple;
}
.content {
background: pink;
width: 100%;
margin: 0 100px;
height: 100vh;
}
<div class="row" id="row01">
<div class="fixed-left">
<div class="fixed-left-a">001</div>
<div class="fixed-left-b">Item 1</div>
</div>
<div class="content">
<div class="row">
<div class="col-xs-4 col-md-3">1,234</div>
<div class="col-xs-4 col-md-3">1,234</div>
<div class="col-xs-4 col-md-3">1,234</div>
</div>
</div>
<div class="fixed-right">
<span>A</span>
</div>
</div>
https://stackoverflow.com/a/29532261/2193381 offers a very simple solution that appears to work. It is not the approach I had in mind, and may have unintended effects, but is interesting nonetheless.
In short, pull-left and pull-right the fixed width divs before the central floating width div is set.
Is it possible to fill an entire page with 16 divs but still have it responsive so it can be viewed on different devices. At the moment I have only used percentages but I am open to other solutions if there are any.
-How it is suppose to look.
The webpage has to contain 16 divs in total four spread across the top first quater of the webpage four spread across the second quarter of the page four spread across the third quarter of the page and four spread across the forth quarter of the page.
So overall it is suppose to look like a big cube or look like the 2408 game http://gabrielecirulli.github.io/2048/
-My code so far
***HTML***
<!doctype html>
<head>
<link rel="stylesheet" href="master.css">
</head>
<!-- ========================================================================================================================= -->
<div id="s1" class="divq"> </div> <div id="s2" class="divq"> </div> <div id="s3" class="divq"> </div> <div id="s4" class="divq"> </div>
<!-- ========================================================================================================================= -->
<div id="s5" class="divq"> </div> <div id="s6" class="divq"> </div> <div id="s7" class="divq"> </div> <div id="s8" class="divq"> </div>
<!-- ========================================================================================================================= -->
<div id="s9" class="divq"> </div> <div id="s10" class="divq"> </div> <div id="s11" class="divq"> </div> <div id="s12" class="divq"> </div>
<!-- ========================================================================================================================= -->
<div id="s13" class="divq"> </div> <div id="s14" class="divq"> </div> <div id="s15" class="divq"> </div> <div id="s16" class="divq"> </div>
<!-- ========================================================================================================================= -->
***CSS***
html {
height: 100%;
width: 100%;
margin: 0px;
}
body {
height: 100%;
width: 100%;
margin: 0px;
}
.divq {
height: 25%;
margin: 0px;
width: 25%;
}
#s1 {
background-color: rgb(100,100,100);
float: left;
}
#s2 {
background-color: rgb(120,100,100);
}
#s3 {
background-color: rgb(100,120,100);
}
#s4 {
background-color: rgb(100,100,120);
float: right;
}
#s5 {
background-color: rgb(140,100,100);
float: left;
}
#s6 {
background-color: rgb(100,140,100);
}
#s7 {
background-color: rgb(100,100,140);
}
#s8 {
background-color: rgb(160,100,100);
float: right;
}
#s9 {
background-color: rgb(100,160,100);
float: left;
}
#s10 {
background-color: rgb(100,100,160);
}
#s11 {
background-color: rgb(180,100,100);
}
#s12 {
background-color: rgb(100,180,100);
float: right;
}
#s13 {
background-color: rgb(100,100,180);
float: left;
}
#s14 {
background-color: rgb(200,100,100);
}
#s15 {
background-color: rgb(100,200,100);
}
#s16 {
background-color: rgb(100,100,200);
float: right;
}
Make them all float: left, and don't forget to add box-sizing: border-box to all elements (via .divq)
That way you can add margings and paddings without breakting your grid.
If you are fine with flexbox, you can span four rows inside a wrapper with display: flex and flex-direction: column, each including four columns.
Sample Fiddle:
http://fiddle.jshell.net/n50tnnka/2/
Maybe you could try using a Bootstrap grid? It's fairly easy to use!
Just give your div's the class col-md-3. That way, the div's will know they can take up 3/12th of the screen = 25% = 4 divs per row.
If you then contain all these divs in one parent div with fixed width and height, you should be fine.
<div id="cube">
<div class="col-md-3" id="s1"></div>
<div class="col-md-3" id="s2"></div>
<div class="col-md-3" id="s3"></div>
<div class="col-md-3" id="s4"></div>
<div class="col-md-3" id="s5"></div>
<div class="col-md-3" id="s6"></div>
<div class="col-md-3" id="s7"></div>
<div class="col-md-3" id="s8"></div>
<div class="col-md-3" id="s9"></div>
<div class="col-md-3" id="s10"></div>
<div class="col-md-3" id="s11"></div>
<div class="col-md-3" id="s12"></div>
<div class="col-md-3" id="s13"></div>
<div class="col-md-3" id="s14"></div>
<div class="col-md-3" id="s15"></div>
<div class="col-md-3" id="s16"></div>
</div>
By still using the id's you can give any square the color you like, but by using bootstrap you won't have to use float.
You can do this easily with Flexbox like this
DEMO
.content {
display: flex;
height: 100vh;
width: 100vw;
flex-wrap: wrap;
box-sizing: border-box;
}
.box {
flex: 25%;
border: 1px solid black;
padding: 5px;
box-sizing: border-box;
}
<div class="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
For better browser support (than flex) you can use display table-cell for your elements
But you will have to nest each "row" (four divs) in a parent element:
HTML:
<div class="row">
<div id="s1" class="divq"> </div>
<div id="s2" class="divq"></div>
<div id="s3" class="divq"> </div>
<div id="s4" class="divq"> </div>
</div>
CSS:
html {
height: 100%;
width: 100%;
margin: 0px;
}
body {
height: 100%;
width: 100%;
margin: 0px;
}
div {
box-sizing:border-box;
}
.row{
display: table;
table-layout: fixed;
border-spacing:0px;
width:100%;
height:25%;
}
.divq {
display:table-cell;
height: 25%;
width: 25%;
}
DEMO: https://jsfiddle.net/Nillervision/06z1L5tg/
Please check this two photos
I don't know how to get ".myDivInTheGrid" in boxed bootstrap div. Any suggestions?
I have something like this...
<div class="fluid-container">
<div class="col-md-6"></div><!-- Div with image -->
<div class="col-md-6">
<div class="myDivInTheGrid"></div>
</div><!-- div with content -->
</div>
I have created a working example with a picture in the div you showed in the picture. I made it for col-md-* but you can do the same for larger grid system. If your screen is small, stretch the browser. Check it out HERE
The code is like this:
HTML:
body
<div class="container-fluid">
.fluid-container
<div class="row">
<div class="col-md-6">
.col-md-6
</div>
<div class="col-md-6">
<div class="row">
.col-md-6
</div>
<img class="row" src="http://s22.postimg.org/8z6hs0mch/Chrysanthemum.jpg"/>
</div>
</div>
</div>
CSS:
body{
background:#8EC34D;
color: white;
}
.container-fluid {
background: #81AD4B;
position: relative;
top: 40px;
padding-bottom: 40px;
}
.col-md-6 {
background:#769C47;
height: 300px;
}
img {
width: 256px;
height: 192px;
}
what i have is 3 divs, 1 for left 1 for center and 1 for right
what i need is 3 columns - the left is always there, the center as well but it's width should be adaptive if the right is there or not
<html>
<head>
</head>
<body>
<div style="width:460px; padding:0px 20px;">
<div style="float:left; background: red; width:100px;">
red
</div>
<div style="float:left; background: yellow; max-width:400px">
yellow
</div>
<div style="float:left; background: green; width:100px;">
green
</div>
</div>
</body>
</html>
what am i'm doing wrong?
The best I could come up with, in order to avoid JavaScript solutions and to use CSS and HTML only, is to use class-names for the columns, and to re-order your HTML in order that the right-most column is first in the html:
<div class="wrap" style="width:500px">
<div class="col right">Right Column</div>
<div class="col left">Left column</div>
<div class="col middle">Middle column</div>
</div>
<div class="wrap" style="width:500px">
<div class="col left">Left column 2</div>
<div class="col middle">Middle column 2</div>
</div>
With the CSS adjacent-sibling selector, firstSibling + secondSibling, this can be used to amend the width of the middle column:
.wrap {
width: 500px;
margin: 1em auto;
overflow: hidden;
}
.left,
.right {
width: 100px;
background-color: #ffa;
}
.middle {
width: 400px;
background-color: #f90;
}
.left,
.middle {
float: left;
}
.right {
float: right;
}
div.right + div.left + div.middle {
width: 300px;
}
JS Fiddle demo.
If you float the .middle column right, instead of left as in the previous example, then you can simplify the adjacent-sibling selector, and the HTML is, effectively, visually reversed (which is slightly easier to understand/work with than the above example wherein the two columns come first, in reverse order, and then the middle column comes at the end), giving:
<div class="wrap" style="width:500px">
<div class="col right">Right Column</div>
<div class="col middle">Middle column</div>
<div class="col left">Left column</div>
</div>
<div class="wrap" style="width:500px">
<div class="col left">Left column 2</div>
<div class="col middle">Middle column 2</div>
</div>
And the CSS:
.wrap {
width: 500px;
margin: 1em auto;
overflow: hidden;
}
.left,
.right {
width: 100px;
background-color: #ffa;
}
.middle {
width: 400px;
background-color: #f90;
}
.left {
float: left;
}
.right,
.middle {
float: right;
}
div.right + div.middle {
width: 300px;
}
JS Fiddle demo.
References:
Adjacent sibling selector, at the W3.org.
Width includes borders, you have to take that into consideration. If you decrease the width of the center element a bit, the right will not wrap.
I don't however see anything in your code which would handle the center width being "adaptive".
Not sure exactly what you're trying to do, but this might work. If you can give a little more detail about what it is supposed to do, it would help, but this seems to do what you want. If the right column is set to display:none then the center still goes all the way over.
<html>
<head>
</head>
<body>
<div style="width:480px; padding:0px 20px;">
<div style="float:left; background: red; width:100px;">
red
</div>
<div style="float:right; background: green; width:100px;>
green
</div>
<div style="background: yellow; width:100%;">
yellow
</div>
</div>
</body>
</html>