I have a centered div whose height depends on the user screen resolution ( div1 ). I would like to automatically position a second div ( div2 ) exactly under it ( again in the center ), preferably without the use of either calculations/javascript or the use of a wrapping table
<div id="div1" class="div1"></div>
<div id="div2" class="div2"><input type=image src=bla.jpg></div>
css:
.div1 {
position: absolute;
overflow: hidden;
top: 10px;
left: 0px;
right: 0px;
width: 50%;
height: 65%;
min-width: 100px;
min-height: 200px;
max-width: 200px;
max-height: 300px;
background-color: red;
border: 1px solid #000000;
margin: 0 auto;
}
.div2 {
position: relative;
display: table;
overflow: hidden;
top: 200px;
border: 1px solid #000000;
padding: 0px;
margin: 0 auto;
background-color: yellow;
visibility: visible;
}
not working jsfiddle : http://jsfiddle.net/Y4kga/
the yellow div should be exactly ( touching ) under the red div
p.s. i'm using display: table because i have insite input type=image and i want the width the be as big as the input type.
How should i do this ?
thanks in advance!
Remove the absolute positioning from your div1 and add it to a wrapper div. Then the browser's layout engine can take care of positioning the yellow div beneath your red div.
<div class="wrapper">
<div id="div1" class="div1"></div>
<div id="div2" class="div2">lol</div>
</div>
Since div1 is no longer absolutely positioned, you can horizontally center using auto-margins.
.div1 {
margin: 0px auto;
margin-top: 10px;
}
http://jsfiddle.net/Y4kga/3/
Well, don't position your first div has absolute --> http://jsfiddle.net/tPJNg/1/
.div1 {
overflow: hidden;
width: 50%;
height: 65%;
min-width: 100px;
min-height: 200px;
max-width: 200px;
max-height: 300px;
background-color: red;
border: 1px solid #000000;
margin: 10px auto;
clear:both;
}
.div2 {
clear:both;
display: table;
overflow: hidden;
border: 1px solid #000000;
padding: 0px;
margin: 0 auto;
background-color: yellow;
visibility: visible;
}
That's it.
Related
I have 3 div elements, one is the parent and other two are children:
<div id="table">
<div id="first"> dinesh </div>
<div id="second"> pathak </div>
</div>
and their css are:
#table {
display: table;
width: 200px;
height: 200px;
margin: 0;
border: 5px solid blue;
padding: 5px;
}
#first {
display: table-cell;
border: 3px solid red;
margin: 2px;
width: 50px;
height: 200px;
overflow: hidden;
}
#second {
display: table-cell;
border: 3px solid red;
margin: 2px;
width: 50px;
height: 200px;
overflow: hidden;
}
I am giving the #table div the height of element height #first, and #second has the height that is greater than its parent. But I want that the inner div to be visible only if their parent height and the rest are hidden. But the parent is taking the height of its children.
Overflow:hidden only works on block-level elements, hence it not working with display: table. To fix this, you can use position: absolute on your inner elements and position: relative on the parent div.
Hope this helps!
#table {
display: table;
width: 200px;
height: 100px;
margin: 0;
border: 5px solid blue;
padding: 5px;
position: relative;
overflow: hidden;
}
#first {
display: table-cell;
border: 3px solid red;
margin: 2px;
width: 50px;
height: 300px;
position: absolute;
top: 0;
left: 15%;
}
#second {
display: table-cell;
border: 3px solid red;
margin: 2px;
width: 50px;
height: 300px;
position: absolute;
top: 0;
left: 55%;
}
<div id="table">
<div id="first"> dinesh </div>
<div id="second"> pathak </div>
</div>
I have a container and children elements. The container is positioned fixed with 10% height. Each child element must have 100% height and width equal to its height - this gets even more complicated when I add that my container is expanding horizontally not vertically. I would like to ask if this is possible using CSS because with JavaScript it could be easily achieved but I'd have to listen for window resizes which is a pain and I would like to avoid that.
.container {
width: 200px;
height: 10%;
border: solid 1px black;
position: fixed;
top: 0;
left: 0;
white-space: nowrap;
overflow: auto;
}
.container > div {
display: inline-block;
height: 100%;
width: 50px;
border-radius: 50%;
border: solid 1px black;
}
https://jsfiddle.net/fdtajx3k/1/
The following might do the trick for you.
On your child div elements, use viewport units vh for both the width
and height values.
Also, add some bottom padding (optional) on your parent container if the scroll bar is an issue.
Reference: https://www.w3.org/TR/css3-values/#viewport-relative-lengths
html,
body {
height: 100%;
}
.container {
width: 200px;
height: 10%;
border: solid 1px black;
position: fixed;
top: 0;
left: 0;
white-space: nowrap;
overflow: auto;
padding-bottom: 30px;
}
.container > div {
display: inline-block;
height: 10vh;
width: 10vh;
border-radius: 50%;
border: solid 1px black;
box-sizing: border-box;
}
<div class=container>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
I have a div inside another div. The outer div has a given width, but max-width should be 100%. The inner div is resizable but somehow the outer div doesn't seem to care whether or not the inner div gets wider. A scrollbar is displayed instead of sizing with the inner box to a maximum of 100%.
This fiddle demonstrates the issue; how can I have a div with a given width in px, set the inner div to resizable and have the outer div listen to the inner div's current width and size up to a maximum of 100%?
JSFiddle with the example
HTML
<div id="outer">
<div id="inner">resize me...</div>
</div>
CSS
#outer {
overflow: auto;
width: 200px;
min-width: 200px;
max-width: 100%;
min-height: 100px;
background: #ededed;
border: 1px solid #f90;
}
#inner {
overflow: auto;
background: #ccc;
border: 1px solid #999;
padding: 15px;
resize: both;}
Add the following CSS (or replace it):
#outer {
display: inline-block;
width: auto;
}
#inner {
width: 200px;
}
Live preview: JSFiddle
You should remove "width: 200px;" and add "float: left;" to "#outer"
Here is the code:
#outer {
overflow: auto;
min-width: 200px;
max-width: 100%;
min-height: 100px;
background: #ededed;
border: 1px solid #f90;
float: left;
}
see if this helps.
body {
padding: 0;
margin: 0;
}
#outer {
/* min-width: 200px;*/
/* max-width: 100%; */
min-height: 100px;
background: #ededed;
border: 1px solid #f90;
display: inline-block;
box-sizing: border-box;
}
#inner {
overflow: auto;
background: #ccc;
border: 1px solid #999;
padding: 15px;
max-width: 100%;
resize: both;
}
<div id="outer">
<div id="inner">resize me...</div>
</div>
I have a div with the following css properties
#maindiv {
padding: 0px 30px 15px 30px;
background-color: #fff;
border-radius: 4px 0 0 0;
border: solid 2px #ccc;
min-height: 500px;
height: auto;
width: 100%;
}
I have a webgrid in this view. Unfortunately, the #maindiv does not expand to accomodate its content (the webgrid). How can I adjust the properties of he div to always expand to cover all its content?
EDIT:
I have two inner divs the structures is
<div id="maindiv">
<div class="container">
<div id="inner1">
<!-- my webgrid is contained here -->
</div>
<div id="inner2>
</div>
and the other css are as follows:
.container{
height: 100%;
width: 100%;
}
#inner1 {
height: 100%;
width: 700px;
float: left;
border: 2px solid #000;
}
#inner2 {
height: 100%;
width: 200px;
float: right;
margin-right: 90px;
}
You are not clearing after the floats. Floated elements are seen by the browser as having zero height, which is why their parent isn't expanding to fit them.
To solve the problem, add an empty div with clear: both; after #inner2 or add a clearfix to .container. The latter has the advantage of not cluttering your html with non-semantic tags and can be implemented like this.
.clearfix:after
{
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0;
line-height: 0;
}
I am trying to figure out the correct way to make a div class inherit the parent div height so that when I do for example, padding-top: 100% , it puts the element at 100% of the parent div.
Here's my code:
CSS
#globalContainer{
margin: 0px auto;
width: 100%;
height: 100%;
}
#header-out{
width: 100%;
background-color: black;
}
#header{
width: 940px; /* Set to % when possible */
height: 240px; /* Set to % when possible */
margin: 0px auto;
background-color: white;
}
#header .title{
position: relative;
float: left;
padding-top: 100%;
}
HTML:
<body>
<div id="globalContainer">
<div id="header-out">
<div id="header">
<div class="title">Test</div>
</div>
</div>
</div>
</body>
At the moment, my Test appears at the very bottom of the page inside of the bottom of my header...
Thanks !
EDIT: I am now trying to add a logo next to my title, I used this code:
#header .title{
position: relative;
float: left;
top: 50%;
left: 2.5%;
width: 250px;
height: 100px;
border-style: solid;
border-width: 1px;
}
#header .logo{
position: relative;
float: left;
top: 50%;
width: 250px;
height: 100px;
border-style: solid;
border-width: 1px;
}
Problem is, it overlaps my title, starting where my title would end if I did not use the left: 2.5%
I tried to remove the float: left, it doesn't change anything...
Anyone can help on this ?