I have a table that is contained in a parent div. The issue I'm seeing is that when the table contains data that is larger than the parent, it will expand past the parent.
Here's a fiddle, basically everything needs to be contained in the blue box. (more information below)
http://jsfiddle.net/CjX2v/7/
table {
background-color: red;
height: 100%;
width: 100%;
max-width: 100%;
max-height:100%;
}
table > tbody > tr:first-child {
background-color: green;
height: 20px;
}
div {
background-color: blue;
width:500px; /* This value is not known, supplied by user */
height: 500px; /* This value is not known, supplied by user */
display: inline-block;
}
overflow:hidden will not work as there is text contained in the table that needs to be visible.
I figure it's a pretty straightforward issue, but if you need more information, let me know.
OK I think this is what you're trying to do.
Click here for the example: JS FIddle
In order to get the children scrollable in the parent you have to set the overflow of the fixed element.
overflow: auto;
In my example <div class="main"> is the parent and fixed element so the css looks like this.
.main {
background: black;
width: 250px;
height: 250px;
padding: 40px;
overflow: auto;
}
.child1 {
width: 400px;
height: 400px;
background: red;
padding: 20px;
}
p {
float: right;
}
.child2 {
width: 300px;
height: 300px;
background: green;
padding: 40px;
margin: 0 auto;
margin-top:20px;
}
Related
I have been trying my hand at Electron and for that, I am trying to create 2 divs, next to each other. I have read a few solutions on here for aligning 2 divs next to each other, but nothing works for me. Here's my code so far:
Code
body, html {
height: 100%;
}
.wrapper{
height: 90%;
}
.request-pane {
float:left; /* add this */
margin-left: 10%;
height: 90%;
width: 45%;
border: 1px solid red;
}
.response-pane {
float:right; /* add this */
margin-left: 55%;
height: 90%;
width: 45%;
border: 1px solid black;
}
<div class="wrapper">
<div class="request-pane"></div>
<div class="response-pane"></div>
</div>
Can anyone point me out what I'm doing wrong here? I am very new to HTML, so I don't know if the solution is too obvious or not
you can do it by two ways.
remove float atrribute and add
.wrapper{
height: 90%;
display: flex;
}
try using display:inline-block in css for both request-pane and response-pane
If you want to keep floats here - fixed with code
body, html {
height: 100%;
}
.request-pane, .response-pane {
box-sizing: border-box; /* count border inside of a `width` */
}
.wrapper {
height: 90%;
}
.request-pane {
float: left;
margin-left: 10%;
height: 90%;
width: 45%;
border: 1px solid red;
}
.response-pane {
float: right;
/* margin-left: 55%; */ /* this is a root of a problems */
height: 90%;
width: 45%;
border: 1px solid black;
}
<div class="wrapper">
<div class="request-pane"></div>
<div class="response-pane"></div>
</div>
But yes, you probably better to go with flexbox. A good guide to it you can find here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.
Also, it looks like you lack a basic understanding of how HTML/CSS work, so you'd better have some basics free courses to moving forward.
Remove the margin-left property and also add display:inline-flex to the css class request-pane and response-pane as shown below.
body, html {
height: 100%;
}
.wrapper{
height: 90%;
}
.request-pane {
float:left; /* add this */
height: 90%;
width: 45%;
border: 1px solid red;
display:inline-flex;
}
.response-pane {
float:right; /* add this */
height: 90%;
width: 45%;
border: 1px solid black;
display:inline-flex;
}
<div class="wrapper">
<div class="request-pane"></div>
<div class="response-pane"></div>
</div>
This works fine. Do run the code from snippet,I hope that's the result you wanted.
If you want even more simpler way, use bootstrap. Divide your screen into two halves. In each section create div. This will full fill your requirements.w3school is best website for this.
I have three divs:
.container (display:table),
.left, .right (display:table-cell);
For .left I used 80%, the .right is 20%. In the left div I have many items with percentage width. If I add about 5 items everything work, I can resize the browser window, but when I have about 25 items the right side disappear.
I didn't added the html, because it's too long. Please check the result on JSFiddle. How can I solve this issue?
.container {
border: 1px solid gray;
display: table;
width: 100%;
}
.left {
display: table-cell;
width: 80%;
background: yellow;
}
.right {
display: table-cell;
width: 20%;
background: red;
}
.items {
width: 40%;
height: 100px;
background: blue;
display: inline-block;
margin-right: 15px;
}
.scroll {
width: 100%;
overflow-x: scroll;
white-space: nowrap;
}
If you change the table-layout property to fixed for the .container element, it resolves the issue:
Updated Example
.container {
border: 1px solid gray;
display: table;
table-layout: fixed;
width: 100%;
}
how can I design a child div whose initial size should not increase with the expansion of the parent div but should only shrink when the parent div decreases in size.
And the div should always be a square.
I am trying to use min-width and min-height but it doesn't work.
#parentDiv{
position:relative;
border:solid pink;
}
#childDiv{
position:absolute;
right:10px;
bottom:10px;
width:250px;
height:250px;
min-width:2%;
min-height:2%;
border:solid blue;
}
You want to set the width and height in % so that they're proportional to the parent's sizing, and set a max-height and max-width to whatever you want the maximum size to be.
so:
width: 20%;
height: 20%; //will make sure div is always 20% of parent's height
max-width: 250px;
max-height: 250px; //will never go bigger than 250px
You would simply do something like this: JsFiddle
#parent {
width: 80%;
height: 300px;
background: #f5f5f5;
margin: auto;
position: relative;
}
#child {
width: 80%;
height: 200px;
max-width: 500px;
min-width: 250px;
margin: 50px 0;
background: #eee;
position: absolute;
}
This is a CSS-only solution that assumes that the square has an explicitly defined maximum width. This means that whenever the user loads the page and decides to reduce the browser width, the child div may not start reducing right away.
HTML:
<div>
<div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
body {
padding: 10px;
}
body > div {
height: 300px;
outline: 1px solid red;
padding: 20px;
}
div > div {
outline: 1px solid blue;
width: 20%;
max-width: 100px;
}
div > div:before {
content: "";
display: block;
width: 0;
padding-top: 100%;
}
And, here's a fiddle: http://jsfiddle.net/L8e89/.
The following is a JavaScript solution. The maximum width of the child div is not defined. Instead, the initial width is remembered by the JS program when the page loads. If the user decides to reduces the viewport size, this time, the child div will start reducing right away.
Same HTML:
<div>
<div>
</div>
</div>
Slightly different CSS:
* {
margin: 0;
padding: 0;
}
body {
padding: 10px;
}
body > div {
height: 300px;
outline: 1px solid red;
padding: 20px;
}
div > div {
outline: 1px solid blue;
width: 20%;
}
div > div:before {
content: "";
display: block;
width: 0;
padding-top: 100%;
}
And, JS/jQuery:
$(function() {
var win = $(window).eq(0),
initialWinWidth = win.outerWidth(),
$squareDiv = $("div > div").eq(0),
squareDivWidth = $squareDiv.outerWidth(),
ratio = squareDivWidth / initialWinWidth;
$(window).resize(function(evt) {
var winWidth = win.outerWidth();
$squareDiv.css("width", winWidth > initialWinWidth ? squareDivWidth : winWidth * ratio);
});
});
And, a fiddle: http://jsfiddle.net/Yy5ah/.
Have a class for the page, a container class for rows of div-boxes, and box class to style all of the boxes..
The rows of div-boxes need to be centered on the page..
What combination of width + display + margin is required (cross-browser)?
The boxes are floating-left, which seems to be the origin of the question..
Current CSS:
.page {
width: 100%;
}
.container {
width: 100%;
display: block;
margin: 0 auto;
}
.box {
float: left;
margin: %;
}
You'd want to use display:inline-block in your boxes, effectively treating them like text and then set text-align:center in your container
.container {
width: 100%;
display: block;
margin: 0 auto;
text-align: center;
}
.box {
display: inline-block;
width: 200px;
height: 200px;
background: grey;
}
Demo fiddle
I made a jsFiddle. Its fixed width. my question is how many .box elements will there be?
if its dynamic then use some javascript to work out the widths of '.box'
http://jsfiddle.net/james_nicholson/4P9s8/10/
.page {
width: 100%;
border:1px solid black;
height:auto;
}
.container {
width: 440px;
display: block;
margin: 0 auto;
background:blue;
min-height:500px;
}
.box {
float: left;
width: 100px;
background: red;
margin: 5px;
display: block;
height: 100px;
}
I have a container with a defined height containing two divs, the first which has a pixel-defined height and the second which I would like to fill the remaining space of its container, i.e. 100% minus first div's pixel-defined height.
Is there a solution to this problem which doesn't involve JavaScript? I can use a JavaScript solution (and in fact JavaScript changing the container's height is what brought me here), but this seems like it should have lower-level support, and this looks like it might become quite a cascading problem.
Example
http://jsfiddle.net/h3gsz/1/
HTML
<div id="container">
<div id="top_content"></div>
<div id="remaining_content"></div>
</div>
CSS
#container {
width: 400px;
height: 400px;
border: 5px solid black;
}
#top_content {
background-color: blue;
width: 100%;
height: 50px;
}
#remaining_content {
background-color: red;
width: 100%;
height: 100%;
}
Edit
An answer was already provided for the original fiddle, but in simplifying the question I allowed the answer to introduce new problems: http://jsfiddle.net/h3gsz/6/
I had removed the inline-block styling and a max-width value. Given the absolute positioning of the remaining content, the container's width is no longer defined by said content (from inline-block), so a horizontal scrollbar is introduced where there shouldn't be one.
I'm not sure if I should simply make a new question or not.
#container {
width: 400px;
height: 400px;
border: 5px solid black;
position: relative;
}
#top_content {
background-color: blue;
width: 100%;
height: 50px;
}
#remaining_content {
background-color: red;
width: 100%;
top: 50px;
bottom: 0;
position: absolute;
}
http://jsfiddle.net/h3gsz/4/
How about using overflow:hidden;?
#container {
width: 400px;
height: 400px;
border: 5px solid black;
overflow:hidden;
}
JSFiddle.
Why not just use auto?
http://jsfiddle.net/h3gsz/3/
CSS:
#container {
width: 400px;
height: auto;
border: 5px solid black;
}
#top_content {
background-color: blue;
width: 100%;
height: 50px;
}
#remaining_content {
background-color: red;
width: 100%;
height: auto;
}
you could also do it by using display:table; fiddle here
.main, .sidebar {
float: none;
padding: 20px;
vertical-align: top;
}
.container {
display: table;
}
.main {
width: 400px;
background-color: LightSlateGrey;
display: table-cell;
}
.sidebar {
width: 200px;
display: table-cell;
background-color: Tomato;
}
Someone more experienced might have a better option but you can try this :
#container {
width: 400px;
height: 400px;
border: 5px solid black;
overflow: hidden ;
}
#top_content {
background-color: blue;
width: 100%;
height: 50px;
}
#remaining_content {
background-color: red;
width: 100%;
height: 100%;
margin-bottom: 0;
}
Depending on what you want to use this for you could remove the #remaining_content <div>
HTML:
<div id="container">
<div id="top_content"></div>
</div>
CSS:
#container {
background-color: green;
width: 400px;
height: relative;
min-height:400px;
border: 5px solid black;
overflow:none;
word-wrap:break-word;
}
#top_content {
background-color: blue;
width: 100%;
height: 50px;
}