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;
}
Related
I have been searching for how to create the aspect ratio of divs using the CSS stylesheet; I could successfully create a demo. The aspect ratio works fine but I can not find a way to set the height of my container if its width and height ratio is bigger (#1 scenario).
I managed to successfully create the #2 scenario. But when I try to create #1 scenario, the container's height expands, here is my code:
HTML, body {
margin:0;
padding:0;
height:100%;
}
#container{
background: khaki;
padding: 10px;
display: table;
width: 150px;
height: 300px;
transition: all .5s ease-in-out;
}
#container:hover {
width: 500px; /* Only increasing the width */
height: 300px;
}
#c-ver-al {
background: lightblue;
padding: 10px;
text-align: -webkit-center;
display: table-cell;
vertical-align: middle;
height 100%;
width: 100%;
}
#c-hor-al {
background: pink;
padding: 10px;
text-align: -webkit-center;
display: inline-block;
object-fit: cover;
height 100%;
width: 100%;
}
#frame {
padding: 10px;
background: lightgray;
height: 100%;
width: 100%;
}
#window {
width: 66%;
padding-bottom: 75%;
background: blue;
}
#chat {
width: 33%;
padding-bottom: 75%;
background: red;
}
.content {
display: inline-block;
margin: -2px;
}
<html>
<body>
if you hover over it, only the container's width will be increased, not the height
<div id="container">
<div id="c-ver-al">
<div id="c-hor-al">
<div id="frame">
<div id="chat" class="content"></div>
<div id="window" class="content"></div>
</div>
</div>
</div>
</div>
The height of the container should not change, but it is
</body>
</html>
Note: I've only added padding to the divs so it would be easier to visualize where they currently are. Also, ignore my poorly made demo, I am a beginner in HTML and in CSS and I might have missed something very obvious.
Edit: I have made a hover action on css so you can see the aspect ratio working
The problem is with your two inner elements' padding-bottom. Because of the box model, when you apply a percentage-based padding to an element, it calculates based off of the parents (bubbling) width, ignoring the **height.
To resolve this, simply set a fixed padding-bottom:
HTML,
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
background: khaki;
padding: 10px;
width: 350px; /* Increased for demo */
height: 150px; /* To fit within snippet */
display: table;
}
#c-ver-al {
background: lightblue;
padding: 10px;
text-align: -webkit-center;
display: table-cell;
vertical-align: middle;
height 100%;
width: 100%;
}
#c-hor-al {
background: pink;
padding: 10px;
text-align: -webkit-center;
display: inline-block;
object-fit: cover;
height 100%;
width: 100%;
}
#frame {
padding: 10px;
background: lightgray;
height: 100%;
width: 100%;
}
#window {
width: 66%;
padding-bottom: 75px;
background: blue;
}
#chat {
width: 33%;
padding-bottom: 75px;
background: red;
}
.content {
display: inline-block;
margin: -2px;
}
<html>
<body>
<div id="container">
<div id="c-ver-al">
<div id="c-hor-al">
<div id="frame">
<div id="chat" class="content"></div>
<div id="window" class="content"></div>
</div>
</div>
</div>
</div>
</body>
</html>
If you want to have the child actually exceed the parent container, then you'll want to use negative margin.
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 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.
I use this template
<style>
#block_center{
position: absolute;
right: 210px;
left: 210px;
text-align: left;
border: 1px solid #000;
overflow: auto;
height: auto;
}
#block_right{
width: 200px;
border: 1px solid #000;
position: relative;
right: 3px;
text-align: left;
float: right;
}
#block_left{
position: relative;
left: 3px;
width: 200px;
border: 1px solid #000;
text-align: left;
float: left;
}
#block_content{
clear: both;
float: none;
width: 100%;
text-align: center;
overflow-y:auto;
overflow-x:auto;
height: auto;
/* margin-bottom: -50px; */
margin: auto;
}
#block_buttom {
background-color: blue;
/* z-index: -10; */
width: 100%;
height: 50px;
clear: both;
}
.clear {
clear:both;
overflow:hidden;
}
</style>
<div id="block_content">
<div id="block_center"> ARTICLE <br> article_ajax_content </div>
<div id="block_right"> Artile links </div>
<div id="block_left"> banner </div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div id="block_buttom"> some text info about site and 31px height img </div>
Problem that I having is that Article not only can be random height size but also there is ajax block of random size content going after it and I simply can't absolutely stick bottom div to stay in bottom after all content regarding browser window size, content size, ajax block size...
Can any one help me with how css (I do not want to use jQuery to pin bottom block to a fix y coordinate) should look like for my pattern of use?
Make all blocks relatively positioned and give the heights and widths using percentage rather than pixels.
Make sure the sum of all your height percentages is 100%(in case you want to cover the whole screen).
This ensures your page content covers the whole screen, irrespective of the screen resolution.
The relative sizes of each block is also kept the same across all resolutions.
The key is to use PERCENTAGE values and not PIXEL values.
To solve the Dynamic sized article data, just CSS the article div to have a scroll bar.
this is currently does want i want
<style>
#block_buttom {
margin-top: 10pt;
/* z-index: -10; */
width: 100%;
display: inline-block;
height: auto;
clear: both;
}
.page-buffer {
padding-top: 50px inherit;
height: 50px;
clear: both;
width: 100%;
}
.clear {
clear:both;
font-size:0;
overflow:hidden;
}
#block_content {
width:100%;
text-align:center;
}
#block_left {
position: relative;
top: 0px;
text-align: left;
float:left;
width: 10%;
min-width:210px;
height: auto;
padding: 3px;
}
#block_center {
text-align: left;
display: inline-block;
margin:0 auto;
width:70%;
min-width: 640px;
height: auto;
padding: 3px;
}
#block_right {
position: relative;
text-align: left;
float:right;
width: 10%;
min-width:210px;
height: auto;
padding: 3px;
}
</style>
on high resolution it looking very nice, on lower - still require some tuning with finding balance of center block size and spaces between fixed size left\right blocks
Hi i am having trouble trying to get my child div expand to the height of the parent div that it is inside of.
Here is the css for the parent div
#wrapper #content {
border: 1px ridge #999;
height: auto;
min-height: 1000px;
width: 1100px;
margin-top: 40px;
margin-right: auto;
margin-bottom: 30px;
margin-left: auto;
float: left;
}
And here is the css for the child div
.tab_container {
clear: both;
width: 100%;
border-right: 1px ridge #999;
margin-bottom: 20px;
height: 100%;
}
Any ideas what i can do?
You can do it with the folowing style: (Inspired by this question: CSS - Expand float child DIV height to parent's height)
#content {
border: 1px ridge #999;
height: auto;
min-height: 1000px;
width: 1100px;
margin-top: 40px;
margin-right: auto;
margin-bottom: 30px;
margin-left: auto;
float: left;
position: relative; /* added */
width: 100%; /* added */
}
.tab_container {
border: 1px ridge orange; /* added */
clear: both;
width: 100%;
border-right: 1px ridge #999;
margin-bottom: 20px;
height: 100%;
position: absolute; /* added */
}
Fiddle here
You have margin-bottom set on both elements. With the child having a bottom margin, it will always be smaller by that amount. Removing the margin-bottom style might bring it a little closer.
You can do it with jQuery. Please check the example code below.
<html>
<head>
<title>Auto Height in jQuery</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
var height = $("#content").height();
$(".tab_container").height(height);
});
</script>
<style type="text/css">
#wrapper #content {
border: 1px ridge #999;
height: auto;
min-height: 1000px;
width: 1100px;
margin-top: 40px;
margin-right: auto;
margin-bottom: 30px;
margin-left: auto;
float: left;
}
.tab_container {
clear: both;
width: 100%;
border-right: 1px ridge #999;
height: 100%;
border: 1px solid green;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<div class="tab_container">Tab Container</div>
</div>
</div>
</body>
</html>
The height of the parent is auto. The 100% of the child results in it also being defined as auto, and auto results in size to content.
You can try adding a fixed height to the parent which might work or put enough content in the child to stretch it; that will work.