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.
Related
Im trying to center a box 200 by 200. I have tried using left:50% top:50% etc., but this is somehow not really working.
I created a fiddle to recreate my problem: https://jsfiddle.net/8k9o9Lvv/2/
I also tried to center the text from the top as well, with text-align:center and this is also not working.
Any ideas why this is not working?
HTML
<div id ="container">
<div class="slider-text">
<h2>Test</h2>
</div>
</div>
CSS
#container{
width:100%;
}
.slider-text {
text-align:center;
position:relative;
height:200px;
width: 200px;
border-left:1px solid red;
border-right:1px solid red;
border-top:1px solid red;
border-bottom:1px solid red;
top:50%;
left:50%;
right:50%;
}
Just margin:0px auto; is enough
#container {
width: 100%;
}
.slider-text {
text-align: center;
margin:0px auto;
height: 200px;
width: 200px;
border-left: 1px solid red;
border-right: 1px solid red;
border-top: 1px solid red;
border-bottom: 1px solid red;
}
<div id="container">
<div class="slider-text">
<h2>Test
</h2>
</div>
</div>
Give the below code a try, centering the #container div horizontally, and the .slider-text div horizontally and vertically within #container.
#container{
width:100%;
}
.slider-text {
text-align:center;
position:relative;
height:200px;
width: 200px;
border:1px solid red; /* Creates a border around entire element */
margin: auto; /* Centers horizontally */
}
/* This is to center the text vertically within its parent, */
/* remove it if you don't want to do that */
.slider-text h2 {
text-align:center;
position: absolute; /* position: relative; works too */
width: 100%;
top: 30%;
left: 0%;
}
<div id ="container">
<div class="slider-text">
<h2>Test</h2>
</div>
</div>
Let me know if it helps.
* {
margin: 0;
padding: 0;
}
#container{
position:relative;
width:100%;
height: 100vh;
}
.slider-text {
position: absolute;
text-align:center;
height:200px;
width: 200px;
border-left:1px solid red;
border-right:1px solid red;
border-top:1px solid red;
border-bottom:1px solid red;
top:50%;
left:50%;
transform: translateX(-50%) translateY(-50%);
right:50%;
display: flex;
align-items: center;
justify-content: center;
}
<div id ="container">
<div class="slider-text">
<h2>Test</h2>
</div>
</div>
You need to set the height of the container. In this case I used 100vh which is equal to 1 viewport height. transform: translateX(-50%) translateY(-50%); with top: 50%; left: 50% will make your .slider-text on center.
To center your text. You can use flexbox. Using display: flex will enable you to use align-items and justify-content. With value of center, it will allow your text to flow on center of its parent.
Your HTML
<div id ="container">
<div class="slider-text">
<h2>Test</h2>
</div>
</div>
Modified CSS
#container{
width:100%;
}
.slider-text {
position:relative;
height:200px;
width: 200px;
border:1px solid red;
margin: 0 auto;
}
.slider-text h2 {
width: 100%;
text-align: center;
}
#container{
width:100%;
position: relative;
}
.slider-text {
text-align:center;
height:200px;
width: 200px;
border-left:1px solid red;
border-right:1px solid red;
border-top:1px solid red;
border-bottom:1px solid red;
position: relative;
}
/*since slider-text has a fixed height and width, a simple math would do*/
.slider-text h2 {
margin-top: 90px;
}
<div id ="container">
<div class="slider-text"><h2>Test
</h2></div>
</div>
Just a simple calculation would do
You should set height:100% to all elements down to your container. That means:
html, body, #container
{
height:100%;
}
Then to center horizontaly and verically a known-size div inside your #container, you just need to set for that div:
left:50%;
top:50%;
and
margin-left:(MINUS whatever is the half of your div width)
margin-top:(MINUS whatever is the half of your div height)
UPDATED FIDDLE (sorry forgot to "update" it)
edit: i assumed you want to center it to the whole screen.
Assuming you want to center it both X and Y, you're right so far, however there are a few changes. Use this for your .slider-text class:
.slider-text {
text-align:center;
position:absolute; /* Relative was wrong */
height:200px;
width: 200px;
border-left:1px solid red;
border-right:1px solid red;
border-top:1px solid red;
border-bottom:1px solid red;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
Relative positioning was incorrect in this instance. absolute is correct. Relative would make it move X amount of pixels from its natural position, whereas absolute will position it in a specific place, relative to the closest parent with position: relative on it.
The transform basically does the same as negative margins, but you don't need to change the margin if the size of the box changes :)
Let me know if you have any questions.
Here is the css code:
.slider-text {
text-align:center;
position:absolute;
height:200px;
width: 200px;
border-left:1px solid red;
border-right:1px solid red;
border-top:1px solid red;
border-bottom:1px solid red;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-100px;
}
margin-left:-(div width)/2;
margin-top:-(div height)/2;
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
I need your help,
How can the CSS code below be modified, such that I would be able to have a parent (container) div at 100% width while the 2 inner divs are 70% and 30% width inside the box? As it stands now, it seems that the 2nd div is pushing out of the container div?
<style type="text/css">
#containerdiv {
width:100%;
}
#outerdiv {
height:300px;
border: 1px solid blue;
position: relative;
}
#innerdiv1 {
height:300px;
float:left;
border: 1px solid red;
width: 70%;
}
#innerdiv2 {
height:300px;
border: 1px solid green;
width: 30%;
}
</style>
<div id="outerdiv">
<div id="innerdiv1">
</div>
<div id="innerdiv2">
</div>
</div>
SOLUTION :
I updated your CSS code in this FIDDLE
EXPLANATION :
The 1px border you put around the inner-divs increases the with of these divs to prevent that and include the border in the CSS width property, You can use box-sizing:border-box; with float:left on both inner divs.
You can learn more about box-sizing property here
CSS :
#containerdiv {
width:100%;
}
#outerdiv {
height:300px;
border: 1px solid blue;
position: relative;
}
#innerdiv1 {
height:300px;
float:left;
border: 1px solid red;
width: 70%;
box-sizing:border-box;
}
#innerdiv2 {
height:300px;
border: 1px solid green;
width: 30%;
box-sizing:border-box;
float:left;
}
for one your innderdiv2 needs float: left; in the code you provided, but besides that it looks like you're experiencing the pains of the box-model. Your divs are indeed 30% and 70% width of the parent container, however they each have a 1px border, which causes them each to be 2px too large. Try using box-sizing: border-box;. I generally do something like this:
*,
*:before,
*:after {
box-sizing: border-box;
}
See here:
JSFiddle
The 1px borders push the divs past 100%, because they add to the overall width.
Use -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; on your inner divs so you can add attributes such as padding and borders without contributing extra to the dimensions.
Borders increases the size of the element you give it to.
Remove the borders and it should work like you want it to.
And you dont need the double-width.
#containerdiv {
width:100%;
}
#outerdiv {
height:300px;
background-color:blue;
position: relative;
}
#innerdiv1 {
height:300px;
float:left;
background-color:red;
width: 70%;
}
#innerdiv2 {
height:300px;
background-color:green;
width: 30%;
}
JSFiddle
on your innserdiv2 you can use a margin-left attribute as well to fix this...
#innerdiv2 {
height:300px;
border: 1px solid green;
width: 30%;
box-sizing:border-box;
margin-left:70%;
}
and you dont need to have a width:100% on #containerdiv. jsut have width:100% in #outerdiv.
your #innerdiv1 looks like
#innerdiv1 {
height:300px;
float:left;
border: 2px solid red;
width: 70%;
box-sizing:border-box;
}
this takes care of your border from overflowing as well outside the div. hopefully this helps. I know you have alrdy accepted an answer.
We can centering content of div block like this:
<div class="parent">
<form> <input type="text"/> </form>
</div>
css-style:
.parent{
display:table-cell;
text-align:center;
vertical-align:middle;
width:500px;
height:500px;
border: 1px solid #dd0;
background: #ffa;
}
It's ok to centering form here. JSFIDDLE. But if we add some margin to div.parent we lost vertical centering form. JSFIDDLE. Please explain me why it's occuring?
If you want to add a margin to your cell, try this code:
.parent{
display:table-cell;
text-align:center;
vertical-align:middle;
width:500px;
height:500px;
border: 1px solid #dd0;
background: #ffa;
}
input[type=text] {
margin: 20px;
position: absolute;
}
http://jsfiddle.net/markom/ZLLVu/3/
Remove position: absolute; and it works fine!
JSFiddle
Remove: position: absolute;
This is because position:absolute; forces display:block; and that is not what you want. you want it to remain display: table-cell;
If you want to center your container horizontally and vertically take a look here: http://jsfiddle.net/g4xfx/3/show/
.parent is also centered if you resize the browser window. The content, in your case the
form, is also horizontally and vertically centered within the parent container.
.parent {
position: absolute;
margin-top:-250px;
margin-left:-250px;
top:50%;
left:50%;
width:500px;
height:500px;
border: 1px solid #dd0;
background: #ffa;
display:table;
}
.parent form {
width:100%;
height:100%;
display:table-cell;
text-align:center;
vertical-align:middle;
}
Pink and green layout are parent layout. When gray layout is clicked blue layout will be created. I want blue layout overlay the parent layout (pink and green) and comes to top.
But the blue layout is overlay by pink layout. I need help on it.
div{
display:block;
}
#content{
height:400px;
width:100%;
background-color:green;
}
.center{
width:100px;
height:100px;
background-color:#808080;
text-align: center;
margin:auto;
}
#foo{
background-color:#2060ff;
border: 1px solid #000;
width:50px;
height:50px;
}
<div id="content">
<div id="d" class="center">
<div class="center">
Click here to create new blue element
</div>
</div>
<div style="background-color:pink;width:100%;height:20px;"></div>
</div>
Check JSFiddle
Add some positioning and a z-index...
#foo{
position: relative;
background-color:#2060ff;
border: 1px solid #000;
width:50px;
height:50px;
z-index: 1;
}
DEMO
You need to adjust the z-index. z-index needs to be positioned to work correctly. See jsfiddle.
#foo{
background-color:#2060ff;
border: 1px solid #000;
width:50px;
height:50px;
position:relative;
z-index:100;
}
Can I suggest absolute positioning?
#foo{
position:absolute; // <-- here is the change
background-color:#2060ff;
border: 1px solid #000;
width:50px;
height:50px;
}
This, of course, is if I understand your question correctly...
What you need to do is to use a z-index. According to http://www.w3schools.com/cssref/pr_pos_z-index.asp specifies the stack order of an element. Please note you will have to make the div's relative Please see code
http://jsfiddle.net/wbfTq/16/
div{
display:block;
}
#content{
position: relative;
height:400px;
width:100%;
background-color:green;
}
.center{
width:100px;
height:100px;
background-color:#808080;
text-align: center;
margin:auto;
}
#foo{
position: relative;
background-color:#2060ff;
z-index:1px;
border: 1px solid #000;
width:50px;
height:50px;
}
Do let me know if this answers your question!