This is bugging me for the past hour and can't figure it out. Here's a test case to better understand the scenario http://jsfiddle.net/slash197/RvTe7/1/
CSS
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
.header {
height: 10%;
background-color: red;
}
.content {
height: 90%
}
#side-bar {
height: 100%;
width: 30%;
float: left;
background-color: blue;
}
#content-zone {
height: 100%;
width: 70%;
float: left;
background-color: yellow;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
line-height: 0;
}
.clearfix:after {
clear: both;
}
HTML
<div class="header">
<h1>test case</h1>
</div>
<div class="content clearfix">
<div id="side-bar">menu</div>
<div id="content-zone">page content <button>add more</button></div>
</div>
I can set the initial height of both my floating elements successfully to be 100%. The problem is new content will be added dynamically and the floated containers do not expand as I would expect.
Any help is appreciated.
If it is enough for you that only the yellow box grows , so you can do it like:
#content-zone {
min-height: 100%;
height: auto;
width: 70%;
float: left;
background-color: yellow;
}
JSFiddle: http://jsfiddle.net/RvTe7/3/
try this
add below class #content-zone{
overflow-y:Scroll;
}
http://jsfiddle.net/RvTe7/2/
You can change height, to min-height
#content-zone {
min-height: 100%;
width: 70%;
float: left;
background-color: yellow;
}
Related
DIVs are overlapping when i resize page to smaller size. I tried to search but could not find a suitable solution.
<div class="column left">
</div>
<div class="column Middle">
</div>
<div class="column right">
</div>
.column {
float: left;
padding: 5px;
height: 100%;
position: relative;
/* height: */
}
.left {
width: 16%;
}
.right {
width: 20%;
}
.middle {
position: relative;
height: 100%;
width: 60%;
}
.row h2 {
color: #800000;
}
.row:after {
display: table;
clear: both;
height: 100%;
}
#media screen and (max-width: 500px) {
.column {
padding: 5px;
height: 100%;
width: 100%;
position: relative;
display: block;
overflow: visible;
float: left;
}
DIVs are not overlapping when i am using overflow: auto in CSS.
overflow auto brings scroll bar which i do not like.
Can you please advise best possible solution?
I have replicated your code and the columns do overlap when it hits the 500px breakpoint. I had to amend though your middle class in the HTML as it was capitalized and wasn't getting the CSS styles. I'm not sure if that solves your problem?
<div class="column left">
</div>
<div class="column middle">
</div>
<div class="column right">
</div>
.column {
float: left;
padding: 5px;
height: 100%;
min-height: 300px;
position: relative;
/* height: */
}
.left {
width: 16%;
background: blue;
}
.right {
width: 20%;
background: red;
}
.middle {
position: relative;
height: 100%;
width: 60%;
background: black;
}
.row h2 {
color: #800000;
}
.row:after {
display: table;
clear: both;
height: 100%;
}
#media screen and (max-width: 500px) {
.column {
padding: 5px;
height: 100%;
width: 100%;
position: relative;
display: block;
overflow: visible;
float: left;
}
https://codepen.io/Angel-SG/pen/dwMvxN
It seem that the padding:5px is causing it. When i change the width to 100% - 10px (5px padding from both sides) the scroll disappears.
#media screen and (max-width: 500px) {
body { margin: 0;}
.column {
padding: 5px;
height: 100%;
width: calc(100% - 10px);
position: relative;
display: block;
overflow: visible;
float: left;
}
}
Hope that helps.
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.
Having a little issue with floating and a responsive layout. I have a div container that has a left and right div container inside. The two have to be on the same "row" but when div container "RIGHT" is set to 100%, it moves it down to the next row. I have made a quick fiddle here.
http://jsfiddle.net/v5tnshjw/1/
<div class="row">
<div class="leftBox">LEFT</div>
<div class="rightBox">RIGHT</div>
</div>
.row {
float: left;
width: 600px;
height: auto;
margin: 0px auto;
}
.leftBox {
float: left;
height: 50px;
background-color: red;
width: 80px;
}
.rightBox {
float: left;
height: 50px;
width: 100%;
background-color: blue;
}
The box on the right needs to flow with the browser width but stay on the same line.
Any help or pointers would be great! Thanks in advance.
You could set the inner divs to display:table-cell with the parent as display:table and table-layout:fixed:
.row {
float: left;
width: 600px;
height: auto;
margin: 0px auto;
display:table;
table-layout:fixed;
}
.leftBox {
display:table-cell;
height: 50px;
background-color: red;
width: 80px;
}
.rightBox {
width:100%;
height: 50px;
display:table-cell;
background-color: blue;
}
<div class="row">
<div class="leftBox">LEFT</div>
<div class="rightBox">RIGHT</div>
</div>
You can also use the CSS3 calc() function :
.row {
float: left;
width: 600px;
height: auto;
margin: 0px auto;
}
.leftBox {
float: left;
height: 50px;
background-color: red;
width: 80px;
}
.rightBox {
float: left;
height: 50px;
width: calc(100% - 80px);
background-color: blue;
}
<div class="row">
<div class="leftBox">LEFT</div>
<div class="rightBox">RIGHT</div>
</div>
If the left box also needs to scale:
.row {
float: left;
width: 600px;
height: auto;
margin: 0px auto;
}
.leftBox {
float: left;
height: 50px;
background-color: red;
width: 20%;
}
.rightBox {
float: left;
height: 50px;
width: 80%;
background-color: blue;
}
I have a layout wherein the container has a fixed height and width of 640px x 480px. Inside this container are 3 divs, top, mid and bot. I want this 3 divs to fit inside the container provided that they will not overflow the container. The top and bot div doesn't have fixed height while the mid should fit the space between and push top and bot.
What I've already tried was like this:
HTML
<div class="main">
<div class="top">
</div>
<div class="mid">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Chestnut-breasted_Malkoha2.jpg/593px-Chestnut-breasted_Malkoha2.jpg" />
</div>
<div class="bot">
</div>
</div>
CSS
.main {
padding: 10px;
width: 640px;
height: 480px;
display: inline-block;
background: #000;
position: relative;
}
.top {
width: 100%;
height: 50px;
display: block;
background: #eee;
}
.mid {
width: 100%;
height: 100%;
display: block;
background: #333;
}
img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
display: block;
}
.bot {
width: 100%;
height: 50px;
display: block;
background: #ccc;
}
FIDDLE HERE
Now my problem is the mid push the bot outside the container. How can i make them fit inside the container without using overflow: hidden? Thanks in advance.
NOTE : the image should fit inside the mid container.
UPDATE top and bot div can contain paragraphs so it's not fixed height.
Check this sample:
http://jsfiddle.net/J6QTg/8/
.main {
padding: 50px 0px;
width: 640px;
height: 480px;
display: block;
background: #000;
position: relative;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.top {
width: 100%;
height: 50px;
display: block;
background: #eee;
position: absolute;
top : 0;
left : 0;
}
.mid {
width: 100%;
height: 100%;
display: block;
background: #333;
}
img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
display: block;
}
.bot {
width: 100%;
height: 50px;
display: block;
background: #ccc;
position: absolute;
bottom : 0;
left : 0;
}
Update:
It is also possible to use tables, to have more flexible boxes.
http://jsfiddle.net/jslayer/U3EaZ/
HTML:
<div class="box">
<div class="h"> Hello<br/>Cruel<br/>World </div>
<div class="m">
<img src="http://goo.gl/a1smCR" alt="" />
</div>
<div class="b"> Omg </div>
</div>
CSS:
.box {
display: table;
width: 640px;
height: 480px;
background: red;
}
.h, .m, .b {
display: table-row;
}
.h {
background: yellow;
height: 0;
}
.m {
background: green;
}
.m img {
max-width: 100%;
height: 100%;
max-height: 100%;
margin: 0 auto;
display: block;
}
.b {
background: blue;
height: 0;
}
I would use JavaScript/JQuery: FIDDLE
I've used JQuery for simplicity, but it can probably be done with just JavaScript...
var totalheight = eval($('.main').height() - $('.top').outerHeight(true) - $('.bot').outerHeight(true))
$('.mid').outerHeight(totalheight);
Try to set the height of mid based on the container.
.mid {
width: 100%;
height: 383px;
display: block;
background: #333;
}
FIDDLE
If the container has a fixed height and width, then you can set the height to 79.25% like this:
.mid {
max-width: 100%;
height: 79.25%;
display: block;
background: #333;
}
demo
Why is wrapper #4 not inheriting the height of its parent table container?
The tables are nested in a display block wrapper, and each nested div is display table, and each table inherits until the innermost one. What is causing this and how can I workaround it?
The jsfiddle: http://jsfiddle.net/ubjZT/14/ (edit there was a typo in the old jsfiddle)
html markup:
<div class="wrapper">
<div class="lastunit">
<div class="wrapper2">
<div class="wrapper3">
<div class="wrapper4">
</div>
</div>
</div>
</div>
</div>
css:
.wrapper
{
display: block;
background: black;
height:100%;
width: 100%;
}
body
{
height: 500px;
}
.lastunit
{
height: 100%;
width: 100%;
background: yellow;
display: table;
}
.wrapper2
{
position: relative;
padding-top: 58.95117540687161%;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
width: 100%;
height: 100%;
display: table;
background: red;
}
.wrapper3
{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: table;
background: green;
height: 100%;
width: 100%;
}
.wrapper4
{
width: 39.24050632911392%;
margin-left: 5.4249547920434%;
margin-right: 5.4249547920434%;
margin-top: 6.69077757685353%;
height: 88.650306748466%;
display: table;
background: purple;
}
UPDATED ANSWER FIDDLE: http://jsfiddle.net/ubjZT/20/
No need to set the wrappers to display: table here. Just set them to display: block (you could, in fact, not set the display property at all because div defaults to display: block)