I have the following CSS code for a div that I want to have a min-height and then the height increases as needed. I have no clue why but the CSS is not working in any browser! I tried to google the answer but yet wasn't able to!
Any help would be really appreciated!
.container {
width: 1024px;
margin-right: auto;
margin-left: auto;
left: auto;
right: auto;
background-color: #FFFFFF;
box-shadow: 0 1px 3px rgba(34,25,25,0.4);
-webkit-box-shadow: 0 2px 12px rgba(34,25,25,0.4);
moz-box-shadow: 0 1px 2px rgba(34,25,25,0.4);
background-repeat: repeat-y;
height: auto !important;
height: 1024px;
min-height: 1024px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #999;
padding-bottom:60px;
position:relative;
}
The container div should grow on the increase of height of this div which increases as and when data is entered to the mysql table and then displayed inside this div:
.udis {
float: left;
height: auto;
width: 680px;
position: relative;
box-shadow: 0 1px 3px rgba(34,25,25,0.4);
-webkit-box-shadow: 0 2px 12px rgba(34,25,25,0.4);
moz-box-shadow: 0 1px 2px rgba(34,25,25,0.4);
margin-left:10px;
min-height:620px;
height:auto!important;
height:620px;
}
Use overflow hidden in the container.
Or remove the float:left in the children.
You can read in google more about clearing floats
http://www.positioniseverything.net/easyclearing.html
By the way, your three heights are correct, keep using them.
height: auto !important;
height: 1024px;
min-height: 1024px;
Change the following code
height: auto !important;
height: 1024px;
min-height: 1024px;
to
min-height: 1024px;
You have specified a fixed height for both elements, so the min-height settings never come into play. Change this in the .container style:
height: auto !important;
height: 1024px;
min-height: 1024px;
to:
min-height: 1024px;
and this in the .udis style:
min-height:620px;
height:auto!important;
height:620px;
to:
min-height:620px;
Related
Hi I want to make fix this iframe into the center between the left table and right table. I'm having trouble with making my site responsive and it appears different on different resolutions: (http://footkick.16mb.com/)
As I said, I wanted this to be bang in the center of the left and right table regardless of resolution. If you can help me out: THANKS SO MUCH
[<]iframe class="channels" src="http://www.bbc.co.uk/sport/football/fixtures" scrolling="yes" style="height: 990px; width: 619px;margin: 45px 0px 0px 115px; border:2px solid black; outline-style: solid; outline-color: green; ">
css:
height: 990px;
width: 619px;
margin: 45px 0px 0px 115px;
border: 2px solid black;
outline-style: solid;
outline-color: green;
Try adding this to your CSS:
margin: 45px auto 0px;
display: block
On your Iframe element remove: margin: 45px 0px 0px 115px; and add margin: 0 auto; display:block;.
Display block:
Margin: 0 auto
Also please learn about why inline css is a bad practice
turn the iframe to a block element like so
.your-frame {
display: block;
width: 80%;
margin: 2% auto;
}
http://jsfiddle.net/k88bqjnj/7/
I'm trying to make a popup window.
Css:
.c1{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 1003;
text-align: center;
padding-top: 49px;
}
.c2{
display: inline-block;
background: #e9e9e9;
box-shadow: 2px 2px 2px #000;
margin: auto;
padding: 20px;
max-height: 80%;
max-width: 90%;
}
.c3{
overflow: auto;
}
Html:
<div class="c1">
<div class="c2">
<div>header</div>
<div class="c3">
*long text*
</div>
</div>
</div>
The thing is c3 block goes out of c2 when I want it reach the bottom border of c2 and become scrollable.
I need c2 block size to depend on a browser window size and to keep header on top. The best solution yet is setting max-height to c3 block.
Add height in [.c3][1]
Update Link
.c3{
overflow: auto;
height:180px;
}
you need to add
overflow: scroll;
to c2's CSS
fiddle
You need to add your overflow: auto property to your .c2 intead adding it to your siblings .c3 DEMO
.c2{
display: inline-block;
background: #e9e9e9;
box-shadow: 2px 2px 2px #000;
margin: auto;
padding: 20px;
max-height: 200px;
max-width: 90%;
overflow:auto; -->> ADDED
}
"overflow: auto" works if there is constraint (width or height).
In you case, you have applied a overflow on the content (.c3) and not the container (.c2).
Just by moving "overflow: auto" rules to the container (.c2) should make what you expect.
.c2{
display: inline-block;
background: #e9e9e9;
box-shadow: 2px 2px 2px #000;
margin: auto;
padding: 20px;
max-height: 80%;
max-width: 90%;
overflow: auto; /* add me */
}
.c3{
/* overflow: auto; delete me*/
}
Here is the result http://jsfiddle.net/vLrjqzcq/
I am trying to make an expandable div that will have a minimum width of 200 px but will expand if the content is longer. the problem is the width always displays as 100%, If i put a width: 200px it will stay 200 and will not expand.
This is my CSS code for the div:
#section_title {
background-color: #2b65ae;
border-radius: 10px;
color: #ffffff;
padding: 5px 30px 0px;
background-size: 100% 100%;
font-size: 24px;
min-width: 200px;
height: 30px;
text-align: center;
font-style: italic;
margin: 0 auto;
text-transform: uppercase;
-moz-box-shadow: inset 0 0 8px #444444;
-webkit-box-shadow: inset 0 0 8px #444444;
box-shadow: inset 0 0 8px #444444;
}
You may use display:table properties to achieve this :
Update your CSS with :
display:table;
width: 200px;
DEMO , using just words and white-space to keep all on one line for the demo purpose.
You can use this
div {
float: left; /* or right according to your requirement */
width: auto;
min-width: 200px;
max-width: 100%;
}
This will keep the minimun width 200, will expand on more content and won't go beyond 100% width.
Try like this:
#section_title {
display:inline-block;
width: auto;
min-width: 200px;
max-width:100%;
}
Updated fiddle
If it's just for one line of content, then you can add a float to your css.
#section_title {
min-width: 200px;
height: 60px;
background-color: rgb(14,87,145);
float: left;
}
Example fiddle here.
I know it's shaky to get a full screen height div without using client-side scripting, but what about this: assuming my div is tall enough to reach the bottom, how do I make it reach the VERY top and bottom, without the little extra space at top and bottom? I've tried adding top and bottom margins (and even padding) of 0px, but it doesn't seem to work.
#container {
height: 1000px;
width: 800px;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
background-color: #FFF;
box-shadow: 0 0 10px rgba(0, 0, 0, 1);
}
Try this:
html, body {
height: 100%;
}
#container {
height: 100%;
width: 800px;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
background-color: #FFF;
box-shadow: 0 0 10px rgba(0, 0, 0, 1);
}
change height: 1000px; to height: 100%;
I am trying to make two floated divs with box-shadow to display the shadows outside of their container. It won't display because their parent has overflow: auto set, which cuts off the shadow, but is nevertheless necessary so the parent won't collapse because both child divs are floated. If I set the parent to overflow: visible it collapses, obviously, because the children are floated. Thanks for any help.
JS Fiddle: http://jsfiddle.net/zJGVz/
HTML
<div id='parent'>
<div id='child1'></div>
<div id='child2'></div>
</div>
CSS:
#parent {
margin: 0 auto;
width: 200px;
background: green;
overflow: auto;
}
#child1 {
width: 150px;
height: 200px;
float: left;
background: pink;
box-shadow: 0 0 10px 0 #000000;
}
#child2 {
width: 30px;
height: 200px;
float: left;
margin-left: 20px;
background: blue;
box-shadow: 0 0 10px 0 #000000;
}
You can add a 5px margin to both children on the sides that touch the edge of the parent.
#child1 {
width: 700px;
float: left;
box-shadow: 0 0 5px 0 #000000;
margin:0 0 5px 5px;
}
#child2 {
width: 300px;
float: left;
box-shadow: 0 0 5px 0 #000000;
margin:0 5px 5px 0;
}
See the JSFiddle.
Try changing the overflow to 'visible'
overflow: visible;