I have a scenario, where I have a container div and inside 2 children div. The children div's would have rows inside and data would be dynamic. So, the height of those could vary. The container height is fixed.
What i want is:
1) If child1 has less data, then it should take height as required and rest height should be taken up by child2 (provided it has enough data) and vice versa, with auto vertical scrollbar
2) If both have less data, then both should occupy 50% height
3) If both have huge data, then also, both should occupy 50% height with vertical scrollbar in each
HTML:
<div class="parent">
<div class="child1">
<div style="height:30px; width:100%;background:red;"></div>
<div class="inner-child">
child1<br>child1<br>child1<br>child1<br>child1<br>child1<br>child1<br>child1<br>
</div>
</div>
<div class="child2">
<div style="height:30px; width:100%;background:red;"></div>
<div class="inner-child">
child2<br>child2<br>child2<br>child2<br>child2<br>child2<br>child2<br>child2<br>
</div>
</div>
</div>
CSS
*{ box-sizing:border-box;}
.parent{display:flex; flex-direction:column; width:800px; height:300px; border:2px solid red;}
.child1{flex-grow:1; width:600px; border:1px solid yellow;}
.child2{flex-grow:1; width:600px; border:1px solid green; }
.inner-child {overflow-y:auto; }
JSFiddle
https://jsfiddle.net/mqa4g74s/2/
I am just not able to fix this. Have tried different approaches, but all in vain. Any help would be appreciated.
With display: flexbox.
DEMO
flex-direction: column sets children placement to the vertical axis
flex-grow: 1 lets children grow equally to the given space
Read more about flexbox in this wonderful article
/edit
Updated Demo
Related
I have been studying flex box layout method for the last week but I feel I can't get my head around. I'm going straight to the point.
Let's look at this scenario
.container{
display:flex;
}
.container div{
border:2px solid red;
background: peachpuff;
height:50px;
flex: 1;
}
<div class="container">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
Here, we have 3 divs items inside of a div container. We applied some height to them and a flex: 1 property, which means that items will grow inside their container, with the 50px height and they will start from a flex-basis of 0.
Let's say now that we change the .container rule to:
.container{
display:flex;
flex-direction: column;
}
.container div{
border:2px solid red;
background: peachpuff;
height:50px;
flex: 1;
<div class="container">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
We added the flex-direction: column; property, but we won't change anything on the other rule, meaning that the same height is applied and the flex:1 property still is applied. Now our divs will collapse, because even thought the flex-grow factor is 1, the flex-basis is set to 0.
There is the think I don't understand, in both case scenario we had empty divs and in both cases we applied the same flex: 1 property, which automatically sets the flex-basis to 0. In the first example however 3 boxes will be created and they will share the same amout of space in the container (even thought they have no HTML content), while in the second example the boxes will collapse and we will just see the border.
The only explanation I could come up with is that those divs (that got no content) items are treated (somehow?) as block-level elements and their content-box width is given a value which is not 0 (and will be taken as the starting basis for the flex-grow), but the height value is set to 0 (and hence will be taken as the starting basis for the flex-grow property, making everything collapse).
However, how can the items be at a flex-level and at a block-level at the same time? If they were at a block-level, then why with if we create this code:
.container{
display:flex;
}
.container div{
border:2px solid red;
background: peachpuff;
height:50px;
}
<div class="container">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</div>
Those items will not be treated as block-level items because no new line will be created between them and they don't extend their width to their container.
I apologize for the long question, I hope I was clear enough and I hope somebody can clarify my dobuts!
I have a single div that has a width of 100%. When the browser is resized the div resizes to remain 100% of the browser width. Inside that div is three more divs with widths of 200px. When the browser it stretched to be 600px wide then all the divs are side by side nicely, just as I want it. But if you stretch the browser to be 599px or less one or two divs get knocked down a row and appear below the other divs which is not ideal.
So what I want is for the divs to always remain side by side and equally change in width. So if I change the browser width to, for example, 150px then the three divs that are all side by side have widths of 50px each.
Is this possible using only CSS and HTML code? I don't think I need to provide my code seeing as it is just three divs inside one other div.
.parent {
display: block;
}
.child{
width: 32.5%;
border:1px solid red;
float:left;
}
<div class="parent">
<div class="child">One</div>
<div class="child">Two</div>
<div class="child">Three</div>
</div>
You can do it with the Flexbox:
body {margin: 0}
.parent {
display: flex; /* displays flex-items (children) inline */
}
.child {
flex: 0 1 200px; /* initial width of 200px */
text-align: center;
}
.red {background: red}
.green {background: green}
.blue {background: blue}
<div class="parent">
<div class="child red">Red</div>
<div class="child green">Green</div>
<div class="child blue">Blue</div>
</div>
You can apply these settings to your three DIVs.
.my_div {
width: 33%;
max-width: 200px;
}
This will make sure the three DIVs always fit into the container (33% width), but will never get wider than 200px each, also if the container is much wider than 600px.
how would I go about placing an image vertically between 2 section divs so that I can accomplish the following:
Set the exact width in which the image overlaps the section. Example - I want 30% of the height of the image to be part of the top div and 70% of the height of the image to be on the bottom div
Have consistency on all screen sizes/browsers for the above goal
Here's an example to illustrate what I mean:
From what I've read and seen, a lot of people just set margin to be a negative pixel amount or use top/bottom and set a pixel amount but i dont think this is compatible across screen sizes
thanks a lot for the help, it means a lot
Try this you can insert image in div having id img
#div1{width:400px;height:100px;background:red;}
#div2{position:relative;width:400px;height:100px;background:yellow;z-index:1;}
#image{width:40px;height:40px;background:green;position:relative;
margin-left:180px;margin-top:-20px;margin-bottom:-20px;z-index:2}
<div id="div1"></div>
<div id="image"></div>
<div id="div2"></div>
USING % FOR WIDTH
#div1{position:relative;width:50%;height:100px;background:red;z-index:2;}
#div2{position:relative;width:50%;height:100px;background:yellow;z-index:1;}
#image{position:absolute;bottom:-20%;/* 2/3=66.6 */
left:35%;z-index:4;
width:30%;
height:30%;background:green;
}
<div id="div1"> <div id="image"></div></div>
<div id="div2"></div>
You can add 2 parents around the image element, one with position:relative; and another (nested div) with position:absolute;. then for img tag, apply margin-top:-30%; to place it at desired position.
To center the image: we set left:50% to inner div (parent of image) and set margin-left:-50%; for image as shown here:
#div1 {background: #e0f0e0; padding: 1em;}
#div2 {background: #e0e0f0; padding: 1em;}
#divImg {position:relative; border:1px solid red; }
#divImg2 {position:absolute; border:1px solid blue; left:50% }
#divImg img { margin-left:-50%; margin-top:-30%; }
<div id="div1">Section 1<br/>Contents of div1 ...<br/><br/>123<br/>456<br/></div>
<div id="divImg">
<div id="divImg2">
<img src="http://triptopersia.com/wp-content/uploads/2016/04/Iranian-Cheetah-2.jpg" style="width:150px" />
</div>
</div>
<div id="div2">
Section 2<br/>Contents of div2 ...<br/>
<br/>
ABCD<br/>EFGH<br/>
123<br/>456<br/>
</div>
The red line indicates border of first position:relative div (divImg)
The blue line indicates border of second position:absolute div (divImg2)
The final position of img element is shifted relative to second div by margin-left:-50%; margin-top:-30%;
I am trying to allow the height of the div to dynamically change according to the number of elements inside the div. The whole idea of what i am trying to do is shown in the diagram below
The last div should be able to change dynamically. It seems that i have to set the height of the third inner div. If i don't, the div appears outside the main div.
Solutions that i have tried:
1) overflow: auto
2) trying not setting the height of the 3rd inner div.
Must i use javascript? can i don't use javascript? These solutions didn't work. Need some guidance.. Sorry if the question was repeated....
Hey now i think you should this
HTML
<div class="parent">
<div class="child1">
<div class="one">One</div>
<div class="one">two</div>
</div>
<div class="child1">
<div class="one">One</div>
<div class="one">two</div>
</div>
<div class="child2">
dynamic height
</div>
</div>
Css
.parent{
border:solid 1px red;
}
.child1, .child2{
overflow:hidden;
margin:10px;
border:solid 2px green;
}
.one{
background:red;
border:solid 1px black;
padding:10px;
float:left;
margin:10px;
}
Live demo http://tinkerbin.com/i1R8emEb
Now change to height width or height according to your design ..
Don't give the div a fixed height, just use float:left; in your CSS.
I'm working on a website that uses two columns inside a container. The container has a white background that should stretch to the bottom of whichever column is highest, so I'm using the holy grail method for that.
However, both columns should positioned so that a part of it exceeds the white background (this example uses a fixed height, which should be fluid). As far as I know, this can only be done by setting the overflow to visible but this break the equal height of the columns.
How do I fix this with as little additional elements as possible?
The easiest fix in this case seems to be adding <br style="clear:both" /> before the closing tag for #container.
You can change it to <br class="clearfix" /> and .clearfix{clear:both} if you wish.
Solution is to use inline-block elements..
Css
.container{
width:300px;
background-color:#ccc;
margin:0 auto;
border:1px solid red;
}
.container > div{
width:150px;
display:inline-block;
vertical-align:top;
}
.inner{
background-color:#666;
margin-top:10px;
width:130px;
}
.left .inner{
margin-left:-10px;
}
.right .inner{
margin-right:-10px;
margin-left:auto;
}
HTML
<div class="container">
<div class="left">
<div class="inner">left 1st inner panel</div>
<div class="inner">left 2nd inner panel</div>
</div><div class="right">
<div class="inner">right 1st inner panel</div>
<div class="inner">right 2nd inner panel with arbitrary text to show the increase in parent elements</div>
</div>
</div>
view demo