This is blowing my mind. I have a wrapper div and 2 divs inside it, one of the divs its height is 100% but does not stretch to fit the wrapper.
Here is a JSFIDDLE
The HTML:
<div class="wrapper">
<div class="inner_left">
Just<br />Some<br />Words
</div>
<div class="inner_right">
Anything
</div>
</div>
The CSS:
.wrapper {
width:auto !important;
height:auto !important;
margin:auto;
float:left;
padding:0;
background-color:#ccc;
}
.inner_left {
background-color:#f0f0f0;
width:270px;
height:auto !important;
border:1px solid #666;
float:left;
margin:auto;
padding:10px;
text-align:center;
}
.inner_right {
background-color:#f0f0f0;
width:200px;
height:100%;
border:1px solid #666;
float:right;
margin:auto;
padding:10px;
text-align:center;
}
I need the div (inner_right) to auto fit the height of the wrapper. So whenever the wrapper's height shrinks or stretches, this div stretches to the maximum height of the wrapper.
Anyone knows why my code isn't working? Appreciate any help.
Here is a solution using display:table and display:table-cell
.wrapper {
display: table;
width: 100%; /* whatever you want */
padding: 0;
background-color: #ccc;
}
.wrapper > div {
display: table-cell;
border: 1px solid #666;
background-color: #f0f0f0;
padding: 10px;
text-align: center;
}
.inner_left {
width: 270px;
}
.inner_right {
width: 200px;
}
<div class="wrapper">
<div class="inner_left">Just
<br />Some
<br />Words</div>
<div class="inner_right">Anything</div>
</div>
#showdev is right, the parent element needs to have its height explicitly set in order for the height of the child element to work the way you want it to.
Try to set 100% height to whole document:
html,body {
height: 100%;
}
and for wrapper class:
.wrapper {
width:auto !important;
height: 100%;
margin:auto;
float:left;
padding:0;
background-color:#ccc;
}
fiddle
Related
hi i am just trying to change width and height of .content class. but its giving me like 100px of width and 100% of height even if i don't mention.
i have tried removing float but stil not working.what is the reason?
<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0}
#navbar{
width:100%;
background-color:black;
height:50px;
padding: 0 150px 0 150px;
position:relitive;
}
#logo{height:60px;
width:90px;
}
#container{
background-color:#E6E6E6;
width:78%;
margin: auto;
height:1000px;
text-align:center;
}
#navTable{
color:white;
position:absolute;
top:10px;
left:300px;
font-size:1.5em;
}
#navTable td{padding:0 10px 0 10px;
border-right:1px solid white;
}
#container div{width:32%;
height:100%;
border:1px solid black;
float:left;
}
.content{ /*this is not working[enter
background-color:yellow;
}
</style>
</head>
<body>
<div id='navbar'>
<img id='logo' src="http://i.cdn.cnn.com/cnn/.e/img/3.0/global/misc/cnn-logo.png"/>
<table id='navTable'>
<tr> <td>Home</td> <td>News</td> <td>Money</td> <td>Entertainment</td> <td>Travel</td> </tr>
</table>
</div>
<div id='container'>
<div id='leftDiv'>
<div class='content'>hhhh</div> <!--this-->
</div>
<div id='middleDiv'></div>
<div id='rightDiv'></div>
</div>
</body>
</html>
output:
it only gives me like 100px wide div here .
As #RLaaa said: "The reason is that you have style for #container div and it's affecting the result".
If you want to keep all styles that you have already wrote, you just need to use !important in your case for .content such properties, for example (random values):
.content {
background-color: yellow;
width: 500px !important;
height: 200px !important;
}
You can change this to any values you like. Here is the snippet:
body{margin:0}
#navbar{
width:100%;
background-color:black;
height:50px;
padding: 0 150px 0 150px;
position:relitive;
}
#logo{height:60px;
width:90px;
}
#container{
background-color:#E6E6E6;
width:78%;
margin: auto;
height:1000px;
text-align:center;
}
#navTable{
color:white;
position:absolute;
top:10px;
left:300px;
font-size:1.5em;
}
#navTable td{padding:0 10px 0 10px;
border-right:1px solid white;
}
#container div{width:32%;
height:100%;
border:1px solid black;
float:left;
}
.content {
background-color:yellow;
width: 500px !important;
height: 200px !important;
}
<div id='navbar'>
<img id='logo' src="http://i.cdn.cnn.com/cnn/.e/img/3.0/global/misc/cnn-logo.png"/>
<table id='navTable'>
<tr> <td>Home</td> <td>News</td> <td>Money</td> <td>Entertainment</td> <td>Travel</td> </tr>
</table>
</div>
<div id='container'>
<div id='leftDiv'>
<div class='content'>hhhh</div> <!--this-->
</div>
<div id='middleDiv'></div>
<div id='rightDiv'></div>
</div>
When you use the selector #container div it means every div element inside, including div inside div. You should use #container > div if you mean to apply it just to direct children.
Note you said you did not defined height:100%, but actually you do! Your problem is that your #container div selector applies also to #container div div.content element.
You can use !important or be more specific in your CSS selectors:
#container > div { ... }
#container > div > .content { ... }
I have a div inside another div and when I set margin and padding to the inner div it overlaps with parent.
How can I prevent the inner div overlapping?
Here is a fiddle of the below:
.outer {
border: 1px;
border-style: solid;
width: 250px;
height: 250px;
}
.inner {
padding: 5px;
margin: 5px;
height: 100%;
width: 100%;
border: 1px;
border-style: solid;
}
<div class="outer">
<div class="inner">inner</div>
</div>
Method 1: Try position:relative for the parent div and position:absolute for the inner div and add 5px each to the top,left,bottom and right, to push it from all sides:
.outer {
border:1px;
border-style:solid;
width:250px;
height:250px;
overflow:hidden;
position:relative;
}
.inner {
padding:5px;
left:5px;
top:5px;
bottom:5px;
right:5px;
position:absolute;
border:1px;
border-style:solid;
}
Fiddle: http://jsfiddle.net/7kcaavzt/2/
Method 2 Add display:table to the parent div and add 5px padding to it than adding margin to the inner div.
Fiddle: http://jsfiddle.net/7kcaavzt/4/
remove margin:5px; for .inner
add padding: 5px parent .outer
add box-sizing for .inner - 100% + padding 5px > 100%
.outer {
border:1px;
border-style:solid;
width:250px;
height:250px;
padding: 5px;
}
.inner {
padding:5px;
height:100%;
width:100%;
border:1px;
border-style:solid;
box-sizing: border-box;
}
<div class="outer">
<div class="inner">inner</div>
</div>
The inner div overlaps because you introduced a 5px offset via margin, yet set its height and width to 100%, which is the parent's height, 250px.
You can try setting the height and width to 100% - 2 * margin using CSS3:
.inner {
height:calc(100% - 2 * 5px);
}
jsfiddle
I have two divs inside a div. One of the two is floated to the left and it has some links in it. It has a width of 200px The second of the two has a value of overflow:hidden and it has a width of rest to the right. It has some content in it which makes its height longer than first div.
I want first div to expand to parent's or the second div's height according to the increment of the second div's height
<div id ="main">
<div id ="first">
Link
Link
Link
Link
</div>
<div id ="second">
Link
Link
Link
Link
Link
Link
Link
Link
</div>
</div>
.
#main{
overflow:hidden;
border:1px solid black;
}
#first{
border:1px solid black;
width:200px;
float:left;
}
a{
display:block;
padding:10px;
}
#second{
border:1px solid black;
overflow:hidden;
}
JSFiddle
The solution for your problem is: first you have to give a height to the parent div and then set the height of the child, #first to min-height: 100%, the code would be like this:
#main {
overflow:hidden;
border:1px solid black;
height: 400px;
}
#first {
border:1px solid black;
width:200px;
float:left;
min-height: 100%;
}
You can use display: table; applied to the #main container and display:table-row; and display:table-cell; applied to #first and #second to make the first child container take the height of its sibling container #second. Remember to add overflow:auto; to allow the first container to make it expand its height until the bottom.
CSS
#main{
overflow:hidden;
border:1px solid black;
display:table;
width:100%;
}
#first{
border:1px solid black;
width:200px;
float:left;
display:table-row;
overflow:auto;
height:100%;
}
a{
display:block;
padding:10px;
}
#second{
border:1px solid black;
overflow:hidden;
height:400px;
display:table-cell;
width:100%;
}
DEMO http://jsfiddle.net/a_incarnati/djobkh7t/7/
I've removed the floats and changed the display types on your divs to fix the problem. See example CSS + fiddle:
#main{
border: 1px solid black;
display: table;
width: 500px;
}
#first{
border: 1px solid black;
width: 25%;
display: table-cell;
}
#second{
border: 1px solid black;
width: 75%;
display: table-cell;
}
http://jsfiddle.net/djobkh7t/13/
You can set the display type of 'table' on the parent div, then 'table-cell' on the child div's.
I'm trying to make the div have same height so i used display table , problem that i having is the width will grow.
As an example try adding content in the tableright , when it is exceeded the width , it will not break to the next line but it will expand horizontally to the tableleft.
Please Advice.
Below is the sample code
<div id="maintable">
<div id="table-row">
<div id="tableleft></div>
<div id="tableright></div>
</div>
</div>
<style>
#maintable
{display:table;
width:100%;
}
#table-row
{
display:table-row
width:100%;
}
#tableleft
{
width:60%;
display:table-cell;
}
#tableright
{
width:40%;
display:table-cell;
}
</style>
You made few syntax error there.
Further to make sure if one big un spaced word is placed in table-cell i have used "table-layout: fixed;"
check this fiddle: http://jsfiddle.net/5q9K8/17/
The HTML:
<div id="maintable">
<div id="table-row">
<div id="tableleft">lorem</div>
<div id="tableright">ipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsum</div>
</div>
</div>
The Css:
#maintable
{
display:table;
width:100%;
table-layout: fixed;
word-wrap:break-word;
}
#table-row
{
display:table-row;
width:100%;
}
#tableleft
{
width:60%;
display:table-cell;
background: #eef;
}
#tableright
{
width:40%;
display:table-cell;
background: #efe;
}
Add width as accordingly here just an example to show div height equal to table height.
css
.maintable {
width:100%;
display: table;
border: 1px solid blue;
}
.maintable .table-row {
display: table-row;
border: 2px solid black;
}
.maintable .table-row .tableleft, .maintable .table-row .tableright {
display: table-cell;
border: 4px solid red;
}
.tableright {
width: 60%;
}
.tableleft {
width: 40%;
}
DEMO
Final DEMO
I have a three column site that will display all three columns or just one. If it displays just one column, my example below is the column it will be displaying. This intro wrapper is the center column that needs to grow in the event that the columns to the left and right of this wrapper are not present. Specifically, the first div in the intro wrapper. The second div has a static image in it and should not change.
I've used min/max-width but the content never reaches the maximum but rather stays at the minimum.
.intro is the wrapper. The min-width for this wrapper should be 801px and can grow up to a max of 1200px. The first inner div (.intro-left) should be a minimum of 531px and can grow up to a maximum of 979px.
Can someone have a look and tell me where I'm going wrong?
Here is my code.
.intro{
float:left;
min-height:200px;
width:801px;
padding:10px 0;
}
.intro .intro-right{
display:inline;
float:left;
height:200px;
width:250px;
background:#ccc;
}
.intro .intro-right img{
height:190px;
width:240px;
margin:5px 0 0 5px;
border:1px solid #777;
}
.intro .intro-left{
display:inline;
float:left;
width:531px;
min-height:200px;
margin-right:20px;
}
<div class="intro">
<div class="intro-left">
<h2>Test</h2>
<p>test</p>
</div>
<div class="intro-right">
<img alt="" src="1.jpg">
</div>
</div>
display:table solves your issue,. here is the CSS, ive made some changes while testing that you may want to remove.. such as making the left div resizeable so that you can see it work in action.
div.intro {border:2px dotted red;
min-height: 200px;
max-width:1200px;
min-width:801px;
padding: 10px 0;
margin:0 auto;
display:table;
}
.intro-right, .intro-left{display:inline-block;vertical-align:top;}
.intro-right {
height: 200px;
width: 250px;
background: #ccc;
outline: 2px solid green;
}
.intro-right img {
height: 190px;
width: 240px;
margin: 5px 0 0 5px;
border: 1px solid #777;
}
.intro-left {
width: 531px;
height: 200px;
margin-right: 20px;
outline: 2px solid blue;
resize:both;
overflow:auto;
}