I have a div with an specific height. i want this: i put some nested div's inside this div an tell them use specific percentage of height of the parent div. for example: div1=10%, div2=50% and div3=40%. Im talking about height.
Im using bootstrap and i can control location of parts of a row via col-*, But i want this for height of a parent div. How i can achieve this via Bootstrap?
<div id="parent" stele="height:500px;">
<div class="child">text 1</div>
<div class="child">text 2</div>
<div class="child">text 3</div>
</div>
Bootstrap grid system will make it easy for you to make responsive columns, because that is a cumbersome part to handle yourself for differing screen-sizes without horizontal scrolling. For height, you can rely on plain CSS styles, because vertical scrolling is not a problem.
Whatever your use-case be, just remember that percent dimensions are always relative to an element's parent. So if you want to give an element a height of 10% you need to consider the question: 10% of what?.
Following snippet will hopefully make it clear to you.
Snippet:
.parent { height: 120px; border: 1px solid gray; }
.parent div:nth-child(1) { height: 20%; background-color: #f00; }
.parent div:nth-child(2) { height: 50%; background-color: #00f; }
.parent div:nth-child(3) { height: 30%; background-color: #0f0; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="parent col-xs-10 col-xs-offset-1">
<div class="child">text 1</div>
<div class="child">text 2</div>
<div class="child">text 3</div>
</div>
</div>
</div>
Related
So there might be an easier way to explain this problem but this is how I know:
This basically is a simple dropdown menu inside a dropdown menu. I know how this dropdown works but the real problem here is width of .
<div id="nav2">
Categories
<div id="dropcontents">
<div id="sub-nav">
Mobile
<div id="sub-dropcontents">
Hardware
Software
</div>
</div>
Windows
News
Articles
</div>
</div>
Now the question is if I give 50% width to "dropcontents" then it takes like the half the whole website width. SO isn't it supposed to take 50% of "nav2" as it is inside that div? And I don't want to use pixel here. And I noted that "sub-dropcontents" take 50% width of "dropcontents" which I assume is correct.
Here's the pictorial representation:
The problem is the position value:
If the parent and the children are not positioned, 50% width for the children means 50% width of the parent
If the children is position:absolute; 50% of width means 50% of the first parent that is positioned; if there is not any parent it'll refer the percentage to the whole document.
To fix that just put position:something; in the div that the percentage must refer to.
For a better explanation see this DEMO.
.parent {
width: 500px;
height: 200px;
background-color: red;
margin-bottom:10px;
}
.child {
width: 50%;
height: 200px;
background-color: blue;
}
.absolute {
position:absolute;
}
.relative {
position:relative;
}
Parent-> not positioned and Child -> not positioned
<div class="parent">
<div class="child">
</div>
</div>
Parent-> not positioned and Child -> absolute
<div class="parent">
<div class="child absolute">
</div>
</div>
Parent-> relative and Child -> absolute
<div class="parent relative">
<div class="child absolute">
</div>
</div>
Parent-> absolute and Child -> absolute
<div class="parent absolute">
<div class="child absolute">
</div>
</div>
it(any element) takes the percentage width of its parent element.
Note nav2 is a block element and it will take out the entire width of of its parent (in this case the body)
See this snippet
#nav2{
border:solid red;
}
#dropcontents{
border:solid;
width:50%;
}
<div id="nav2">
Categories
<div id="dropcontents">
<div id="sub-nav">
Mobile
<div id="sub-dropcontents">
Hardware
Software
</div>
</div>
Windows
News
Articles
</div>
</div>
If you set the width of nav to to 50% of its parent width, you will notice that the dropContents div will adjust to 50% of nav2
See snippet below
#nav2 {
border: solid red;
width: 50%
}
#dropcontents {
border: solid;
width: 50%;
}
<div id="nav2">
Categories
<div id="dropcontents">
<div id="sub-nav">
Mobile
<div id="sub-dropcontents">
Hardware
Software
</div>
</div>
Windows
News
Articles
</div>
</div>
I'm struggling with Bootstrap rows and columns in a SharePoint web site. The problem is that I can't and don't want to change the styling that originates from SharePoint, but still be able to use the Bootstrap grid in a part of the page.
I've tried to illustrate the problem without Bootstrap and SharePoint. Here's the JSFiddle:
https://jsfiddle.net/knLjyhe4/
Below is a complete illustration of my example. The problem is that once I use a row to separate element B from C, D and E, the height of side element A affects the first row's height, which I don't want. I want element C to appear immediately below element B. The second example is how it looks before I add the div.row elements.
Below is the HTML and CSS for the isolated example. I had hoped that I could style the div.main element somehow so that the float of A doesn't affect the float of B-E at all. But I can't figure it out.
Please note that I'm sure there are several solutions if I start to change the HTML and styles (like using position), but I really just want to know if there is a way in CSS where the div.main element gets "its own" floating area, without being affected by the A element's float.
<style>
section {
width: 600px;
margin: auto;
}
.block {
float: left;
margin: 10px;
background-color: #339;
color: #fff;
width: 140px;
padding: 10px;
}
.side {
width: 200px;
height: 100px;
}
.main {
margin-left: 240px;
}
.row:after {
display: table;
content: ' ';
clear: both;
}
</style>
<section>
<div class="side block">This is element A in problematic example. I want element C immediately below element B, regardless of the height of this element</div>
<div class="main">
<div class="row">
<div class="block">This is element B</div>
</div>
<div class="row">
<div class="block">This is element C</div>
<div class="block">This is element D</div>
<div class="block">This is element E</div>
</div>
</div>
</section>
<section>
<div class="side block">This is element A when it works but without rows</div>
<div class="main">
<div class="block">This is element B</div>
<div class="block">This is element C</div>
<div class="block">This is element D</div>
<div class="block">This is element E</div>
<div class="block">This is element F</div>
<div class="block">This is element G</div>
<div class="block">This is element H</div>
<div class="block">This is element I</div>
</div>
</section>
Seems to be working if you change your CSS for .main to this (display: table-row;):
.main {
margin-left: 240px;
display: table-row;
}
Updated JSFiddle here
UPDATE 1
Changed table to table-row since it did not work in IE10.
UPDATE 2
For future reference, the final solution used in SharePoint / O365 looked something like this:
HTML (.container is a bootstrap container)
<div id="DeltaPlaceHolderMain">
<div class="container">
<div class="inner-container">
<!--Your content here-->
</div>
</div>
</div>
CSS
.container .inner-container {
display: inline-block;
width: 100%;
}
The .main needs to be float:left and it needs to have less px to width.
Try defines
.side {width:30%; float:left;}
.main{width:70%; float:left; margin-left:0; }
Don't forget to clean the margin-left of .main
The clear: both property on the row:after pseudoclass is causing your second row to jump down below the left-floated side element.
In bootstrap you should use classname col-md-4 on your side element, classname col-md-8 on your main element, and remove the float: left property from your side element. This will give you 2 columns, one for side which is 4 grids wide and one for main which is 8 grids wide. Your rows should function as you expect once the float is gone.
<style>
section {
width: 600px;
margin: auto;
}
.block {
background-color: #339;
color: #fff;
padding: 10px;
}
</style>
<section class="row">
<div class="block col-md-4">This is element A</div>
<div class="col-md-8">
<div class="row">
<div class="block col-md-6">This is element B</div>
</div>
<div class="row">
<div class="block col-md-6">This is element C</div>
<div class="block col-md-6">This is element D</div>
<div class="block col-md-6">This is element E</div>
</div>
</div>
</section>
In general, with bootstrap you don't want to float things. Also, instead of setting element widths explicitly, it is better to use the .col- classes to fit them into the bootstrap grid system.
I am dealing with a fixed width parent div that is being used in multiple pages. This div has many(3-5) child div elements inside it. For different pages, the number of child div elements vary, i.e. for page 1, the parent div has 3 child divs, for page 2, the parent div has 5 child divs etc.
How can I set the width of these child elements so that they fully occupy the width of parent div in every page?
P.S. The constraint is to not use SASS/Less and Bootstrap.
Basically you are asking for a table where the width of every cell should be the same in proportion of the fixed width of the parent.
It is possible in CSS if you know the maximum possible number of children (if not you will always use all the space but the width of each cell will change based on the content)
When you know the maximum number if children, you add that property to the class .height: max-width:Npx where N is the width of the parent divided by the number of children
.container {
border:1px solid #000;
border-radius:5px;
width:500px;
display:table;
}
.child{
display:table-cell;
border-right:1px solid #000;
}
.child:last-of-type {
border:none;
}
.height{
min-height:100px;
}
<div class="container height">
<div class="child height">Child 1</div>
<div class="child height">Child 2</div>
<div class="child height">Child 3</div>
<div class="child height">Child 4</div>
<div class="child height">Child 5</div>
</div>
You might want to try flex
.parent {
width: 100%;
background-color: blue;
display: flex;
}
.child {
height: 20px;
background-color: red;
margin: 10px;
display: flex;
width: 100%;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
I'm using Boostrap 3 and have a problem with backgrounds on elements that appear too wide. The container is in desktop mode 1170px and has 15px padding left and right which makes the content appear with 1140px width.
When I'm adding an element with a different background color (let's say body + .container both has same background), then the element will appear as 1170px wide due to the background showing in the padding area as well.
I could add CSS for each element with deviating background in each screen width (media queries) to solve the problem. But I hope there is a better way to achieve this since I can't be the only person with this problem. Does anyone know some Boostrap class / function to solve this issue, or know some best practise for this?
Try wrapping the rows and/or inner content, you can see how I have done it here; http://jsfiddle.net/w7wowg94/
HTML
<div id="master-wrap">
<div class="container">
<div class="wrap-class-one">
<div class="row">
<div class="col-md-6">Content 1</div>
<div class="col-md-6">Contnent 2</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-4">
<div class="inner-wrap">Content 1</div>
</div>
<div class="col-md-4">
<div class="inner-wrap">Contnent 2</div>
</div>
<div class="col-md-4">
<div class="inner-wrap">Contnent 2</div>
</div>
</div>
</div>
</div>
CSS
#master-wrap {
margin: 0 auto;
background-color: #eee;
padding: 15px;
}
.wrap-class-one {
background-color: #ccc;
padding: 15px;
}
.inner-wrap {
padding: 15px;
background-color: #ccc;
}
I am working on a grid layout using css flex styling and want a total css solution, if possible, I have the means to fix it with javascript.
When a row exceeds the viewport width, it displays the scrollbar,
but when you scroll, the styling of the row element remains the size of the viewport,
it does not seem to "wrap" all of its children.
see : fiddle
Try scrolling, you will see the yellow row (.sk_row) class does not appear around all its children.
A solution would be fine, but I would like to know why the parent does not visually contain all children. I think I may be missing some key concept about flexboxes...
Duplicate of fiddle code...
<body>
<div id='pg_wrap'>
<div id='frm0'>
<div class='sk_scrl'>
<div class='sk_row'>
<div class='itm_val'>row 1</div>
<div class='itm_val'>1</div>
<div class='itm_val'>2</div>
<div class='itm_val'>3</div>
<div class='itm_val'>4</div>
<div class='itm_val'>5</div>
<div class='itm_val'>6</div>
<div class='itm_val'>7</div>
<div class='itm_val'>8</div>
</div>
<div class='sk_row'>
<div class='itm_val'>row 2</div>
<div class='itm_val'>1</div>
<div class='itm_val'>2</div>
<div class='itm_val'>3</div>
<div class='itm_val'>4</div>
<div class='itm_val'>5</div>
<div class='itm_val'>6</div>
<div class='itm_val'>7</div>
<div class='itm_val'>8</div>
</div>
</div>
</div>
</div>
#frm0{ width:420px;height:200px}
.sk_scrl{ overflow:auto;display:flex;flex-flow:column;align-content:stretch}
.sk_row{
display:flex;
justify-content:flex-start;
align-items:center;
background:#ff0;border:2px #f00 solid;
height:50px}
.itm_val{
display:flex;
border:1px #000 solid;background:#666;
flex:0 0 100px; height:30px; margin:0 5px;
align-items:center;justify-content:center}
Note : this is not the same as question
That op wants to change child behaviour, I want the parent to change.
It's not working the way you want because .sk_row inherits the width, in this case from #frm0:
#frm0 { width: 420px; }
With the class .sk_scrl you can't see it very well, because it's set to:
.sk_scrl { overflow: auto; }
If you use your browsers developer tools (assuming you have any), you'll see that the elements wrapped around your .itm_val divs are all 420 pixel wide. The reason the .itm_val divs are all visible outside of their container, is because they are "overflowing" out of their containing div.
Here's an example for how the width-inheriting-thing works:
<div class="container">
<div class="element"></div>
</div>
If you set the the width of .container to 50%, it will use up half of the available width within the window. If, however, you want .element to take up the full width of the window, you will have to adjust the width like this:
.element {
width: 200%;
}
If it were set to 100%, it would only be as wide as .container.
Here's a fiddle: http://jsfiddle.net/Niffler/n8hmpv13/