I have 2 divs beside each other. I would like to have both divs the same height. Possible?
Here is a JsBin as a starting point: http://jsbin.com/uhoqeb/edit#html,live
Thanks.
For this you can use display:table-cell property for this.
#leftSection, main-content{
display:table-cell;
}
Check this http://jsbin.com/uhoqeb/2/edit#html,live
But it's not work IE7 & below.
http://jsfiddle.net/spacebeers/s8uLG/3/
You set your container up with overflow set to hidden, then on each div add negative margin-bottom and equal positive padding-bottom.
#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }
<div id="container">
<div>
<p>Content 1</p>
</div>
<div class="col2">
<p>Content 2</p>
<p>Content 2</p>
<p>Content 2</p>
<p>Content 2</p>
</div>
</div>
If you want a border round it then have a look at this example - http://www.ejeliot.com/samples/equal-height-columns/example-6.html
add a container div
#macroSection {
height: 250px;
border: 1px solid #AAA;
}
then add the property "height" to the other 2 divs:
#leftSection
{
background-color: #fff;
width:170px;
float:left;
height: 100%;
border: 1px solid #c7c7c7;
display:block;
}
#main-content
{
width:250px;
overflow:auto;
height: 100%;
border: 1px solid #c7c7c7;
display: block;
overflow: hidden;
}
then wrap them in your html like this:
<div id="macroSection">
<div id="leftSection">
This is my left section
</div>
<div id="main-content">
This is my main content <br/>
This is my main content <br/>
This is my main content <br/>
This is my main content <br/>
This is my main content <br/>
This is my main content <br/>
This is my main content <br/>
</div>
</div>
You can also achieve this with javascript:
<script type="text/javascript">
document.getElementById('leftSection').style.height = document.getElementById('main-content').clientHeight;
</script>
Related
I play with floats and I noticed then "float collapse bug" does not arise with fixed position. Here is example.
So I have two divs:
<body
<div class="static">
<img>
<p>text text text</p>
</div>
<div class="fixed">
<img>
<p>text text text</p>
</div>
</body>
First with static position and second with fixed:
.fixed, .static{
outline: 1px solid black;
width: 150px;
}
.fixed{
position: fixed;
left: 200px;
top: 200px;
}
img{
float: right;
background-color: green;
width: 100px;
height: 100px;
}
And result:
So why the second fixed-div does not need something like .clearfix to fix float collapse?
Because position: fixed; creates Block formatting context.
Try the below styles also, which have similar effect in your div.
float
position absolute and fixed
display - inline-blocks, table, table-cells
overflow - hidden, auto
if you want them both to appear the same you can put in overflow-y:hidden;
https://jsfiddle.net/1nq8b7xs/3/
or if you want them to appear beside each other use display:inline-block and remove position-fixed from your fixed class
https://jsfiddle.net/1nq8b7xs/4/
.fixed, .static{
outline: 1px solid black;
width: 150px;
overflow-y:hidden; /*added this*/
}
.fixed{
left: 200px;
top: 200px;
}
img{
float: right;
background-color: green;
width: 100px;
height: 100px;
}
.fixed, .static{display:inline-block;}
<body>
<div class="static">
<img>
<p>text text text</p>
</div>
<div class="fixed">
<img>
<p>text text text</p>
</div>
</body>
I have one big container, and inside I have two div, I want to separate these internal divs with vertical line, I posted down what I tried, on another example thats CSS code work correctly, but in this case not working.
HTML
<div class="rowFrame">
<div class="col-sm-6">
<h3>Info:</h3>
<p>About</p>
<p>About</p>
</div>
<div class="col-sm-6 rightcontact" >
<h3>Contact us</h3>
</div>
</div>
CSS
.container2{
border-style: solid;
border-width: 3px;
display: inline-block;
width:100%;
}
.rowFrame{
top: 0;
bottom: 0;
left: 50%;
border-left: 2px;
}
So you want a vertical line between the two divs? Just add a border to one of the two divs. If you want full width you need to make your container fluid. Here is an example showing both full width and normal container.
full width example (fluid container)
jsfiddle demo
html
<div class="container-fluid" id="mycontainer">
<div class="col-sm-6" id="one">
<h3>Info:</h3>
<p>Ukoliko imate neko pitanje budite slobodni i pitajte nas!</p>
<p>Podelite sa nama Vase misljenje.</p>
</div>
<div class="col-sm-6" id="two" >
<h3>Kontaktirajte nas</h3>
some text here... bla bla bla
</div>
</div>
css
#mycontainer{
border:1px solid black;
overflow: hidden;
}
#one{
border-right:1px solid black;
}
normal container
jsfiddle demo
html
<div class="container" id="mycontainer">
<div class="col-sm-6" id="one">
<h3>Info:</h3>
<p>Ukoliko imate neko pitanje budite slobodni i pitajte nas!</p>
<p>Podelite sa nama Vase misljenje.</p>
</div>
<div class="col-sm-6" id="two" >
<h3>Kontaktirajte nas</h3>
some text here... bla bla bla
</div>
</div>
css
#mycontainer{
border:1px solid black;
}
#one{
border-right:1px solid black;
}
If you do what #primeape91 is suggesting you'll also need to include the clearfix hack to get the float to act like a block again.
div.rowFrame:after {
content: "";
display: table;
clear: both;
}
div.rowFrame > div {
width:50%;
float:left;
}
I made a few changes but here's a basic example of what you can do:
HTML
<div id="container">
<div id="one">
<h3>Info:</h3>
<p>Ukoliko imate neko pitanje budite slobodni i pitajte nas!</p>
<p>Podelite sa nama Vase misljenje.</p>
</div>
<div id="two">
<h3>Kontaktirajte nas</h3>
</div>
</div>
CSS
#container {
height: 500px;
border: medium black solid;
}
#container div {
height: 100%;
padding-left: 20px;
}
#one {
width: 50%;
float: left;
border-right: thin black solid;
}
#two {
overflow: hidden;
border-left: thin black solid;
}
View on Codepen
I want all three boxes to be at the same level, you'll see how box 2 is below box 1 and 2 because it has less content in it than the other boxes, but there has to be some style I am missing to be make each div display at the same level (visually speaking) regardless of the content in it.
http://jsfiddle.net/bkmorse/519xzvou/
css
.container {
width: 470px;
border:1px solid purple;
height: 210px;
}
.box {
width: 150px;
height: 200px;
border:1px solid red;
display:inline-block;
}
html
<div class="container">
<div class="box">
<h1>Box 1</h1>
<p>Content</p>
<p>Content</p>
</div>
<div class="box">
<h1>Box 2</h1>
</div>
<div class="box">
<h1>Box 3</h1>
<p>Content</p>
<p>Content</p>
</div>
</div>
apply the style vertical-align:top to .box in your stylesheet
Making them display like table-cell also fit their heights and placement automatically:
http://jsfiddle.net/519xzvou/2/
.box {
width: 150px;
height: 200px;
border:1px solid red;
display:table-cell;
}
You can Use CSS 3 property in parent class
display:-webkit-box;
-webkit-box-orient: horizontal;
[jsfiddle][1]
[1]: http://jsfiddle.net/519xzvou/4/
I have two divs inside a div. I want the second div to fill up to the bottom of the container. I tried various height: 100%;, height: inherit;, height: auto;, etc. and different values for display css property, but didn't succeed. Please help.
Html:
<div style='height: 100px; width: 100px; background-color: black; border: 3px solid black;'>
<div style='background-color: red;'>
<label>Test</label>
</div>
<div style='height: inherit; background-color: green;'>
</div>
</div>
Fiddle
Note: The second div has some rows and then a footer. I want the rows to be hidden as per the height. But the footer of the second div should be visible.
Another note:
The container is re-sizable (using JQuery Re-size). Hence I do not want to set the height of the second div. That will make it static. I want the second div to have dynamic height. i.e. Expanding yo the bottom of the container, always.
Try This
**overflow:hidden;**
<div style='height: 100px; width: 100px; background-color: black; border: 3px solid black;overflow:hidden;'>
<div style='background-color: red;'>
<label>Test</label>
</div>
<div style='height: inherit; background-color: green;'>
</div>
</div>
Or Else you have to master div height auto and inner keep 100% some content inside.
<div style='height: auto; width: 100px; background-color: black; border: 3px solid black;'>
<div style='background-color: red;'>
<label>Test</label>
</div>
<div style='height: 100%; background-color: green;'>
</div>
</div>
when you do height: inherit;, the target container acquires the height of parent, that's why, your inner green div is taking height:100px and hence it is overshooting.
You should NOT DO overflow:hidden, as it will eat up your lower content.
What you should do is to either give percentage height to both your containers like
<div id="parentDiv" style='height: 100px; width: 100px;
background-color: black; border: 3px solid black;'>
<div id="topDiv" style='background-color: red;height:30%'>
<label>Test</label>
</div>
<div id="lowerDiv" style='height: 70%; background-color: green;'>
</div>
</div>
or use javascript to set height of your containers, something like
$(window).resize(function(){
var _heightT= $('#parentDiv').height();
$('#topDiv').height(_height*0.3);
$('#lowerDiv').height(_height*0.7);
})
I would suggest to give your Parent container a fixed height(deduced according to the window size, through javascript/jQuery), so that it is consistent across all browsers, and your inner containers, a percentage height, or atleast your top container a fixed height, and lower container a min-height and overflow-y:auto
How about something like this:
HTML:
<div id="con">
<div id="top">
<label>Test</label>
</div>
<div id="bottom">sdsdfsdfsdfs sdfs dfsdf sdf sd ff</div>
</div>
CSS:
#con {
height: 200px;
width: 100px;
background-color: black;
border: 3px solid black;
position: relative;
}
#top {
background-color: red;
position: absolute;
width: 100%;
}
#bottom {
top: 0px;
left: 0px;
background-color: #F5F5F5;
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: green;
}
Take a look and see what you think. (you will have to push down inside to put text etc using padding-top: 20px;
DEMO HERE
Very simple:
<div style='overflow:hidden;height: 100px; width: 100px; background-color: black; border: 3px solid black;'>
<div style='background-color: red;'>
<label>Test</label>
</div>
<div style='height: inherit; background-color: green;'>
</div>
</div>
You could use a percentage based height like you suggested, but the thing is when you set the bottom div to height:100%; that means 100% of the parent div's height which is 100px and it'll go outside the box, instead you could give the top div a 25% height and the bottom div 75% height, like this:
<div style='height: 100px; width: 100px; background-color: black; border: 3px solid black;'>
<div style='height:25%; background-color: red;'>
<label>Test</label>
</div>
<div style='height: 75%; background-color: green;'>
</div>
</div>
Fiddle
When you do height:inherit, it takes the height value from the parent div, which is the same as saying height:100%. But this causes the div to overflow because there is another inner-div child inside the main container div, which is taking a height equal to the default line-height of the label tag. You can try giving the inner div tags separate heights:
HTML:(same as your markup, just adding classes so you don't have to give inline styling)
<div class="p">
<div class="c1">
<label>Test</label>
</div>
<div class="c2"></div>
</div>
CSS:
.p {
height: 100px;
width: 100px;
background-color: black;
border: 3px solid black;
}
.c1 {
height:20%;
background-color: red;
}
.c2 {
height: 80%;
background-color: green;
}
DEMO
You can do this with display:table property in CSS. See more
Add display:table to the wrap div and display:table-row for the children.
Working Demo
UPDATE
According that we don't want to use overflow:hidden
Updated FIDDLE
<div style='height: auto; width: 100px; background-color: black; border: 3px solid black;'>
<div style='background-color: red;'>
<label>Header</label>
</div>
<div style='height: 100%; background-color: green;'>
<label>Body</label>
<p>Some text here</p>
<p>Some text here</p>
<p>Some text here</p>
<p>Some text here</p>
</div>
</div>
Why is it that my border does not go around my inner divs, and my inner div borders do not go to the bottom of the outer div, ( in FF but need this for all major browser).
Can someone please help
<div id="main">
<div class="insidediv">
<p>Article 1</p>
</div>
<div class="insidediv">
<p>Article 2</p>
</div>
<div class="insidediv">
<p>Article 3</p>
</div>
</div>
#main{
width: 800px;
height: 100%;
border: 20px solid black;
}
.insidediv{
width: 200px;
height: 100%;
border-right: 20px solid black;
float:left;
}
Alter #main to float: left; or overflow:hidden. I recommend the float
Set overflow: hidden; on #main.
Edit: demo
Floating elements takes them out of the normal flow of the document, meaning their container no longer understands where they end for lack of a more technical explanation. To solve the issue you need to clear the float after the last inner div by adding an element with clear:both applied. http://jsfiddle.net/calder12/BcqnE/
<div id="main">
<div class="insidediv">
<p>Article 1</p>
</div>
<div class="insidediv">
<p>Article 2</p>
</div>
<div class="insidediv">
<p>Article 3</p>
</div><div class="clear"</div>
</div>
#main{
width: 800px;
height: 100%;
border: 20px solid black;
}
.insidediv{
width: 200px;
height: 100%;
border-right: 20px solid black;
float:left;
}
.clear{clear:both;}
There is also the clearfix method which is similar to the above but the more standard approach these days. http://j.mp/bestclearfix