I have a three rows CSS table, which is nested in a fixed size div. The table has three rows, the height of first two rows is defined by the contents (I can't give any explicit sizes) and the last row simply takes what's left. The last row has a single child, which is a div, having loads of child divs with display: inline-block. The problem I have is - I the div is always overflowed and I want it to display a vertical scrollbar, which only happens in Chromium. FF & Opera simply ignore overflow-y:scroll and let the content run down (I belive IE is the same I just don't have it). I wonder if the problem can be solved without using javascript and if so how.
I don't mind using HTML5 only solution as long as it's supported by the recent versions of all browsers.
Update 1 - Just wanted to make it clear - I can't use explicit sizes for any of the rows as they host controls of unknown height.
<html>
<body>
<div style="width: 500px; height: 300px;">
<div style="display: table; width: 100%; height: 100%; position: relative; border: 1px solid #ccc;">
<div style="display: table-row;">
<div style="display: table-cell; background-color: #ccc;">Test</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell; background-color: white;">Filter</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell; height: 100%;">
<div style="height: inherit; overflow-y: scroll">
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A0</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A1</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A2</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A3</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A4</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A5</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A7</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A8</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Here's the solution (overflowed div has to be positioned absolutely and wrapped in another relatively positioned one):
<html>
<body>
<div style="width: 500px; height: 300px;">
<div style="display: table; width: 100%; height: 100%; position: relative; border: 1px solid #ccc;">
<div style="display: table-row;">
<div style="display: table-cell; background-color: #ccc;">Test</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell; background-color: white;">Filter</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell; height: 100%;">
<div style="position: relative; width: 100%; height: 100%;">
<div style="overflow-y: scroll; position: absolute; top: 0px; right:0px; bottom: 0px; left: 0px;">
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A0</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A1</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A2</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A3</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A4</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A5</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A7</div>
<div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A8</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
My problem is that whenever I resize the window, the divs should warp to the next row if there is not place with the same size as all the other divs.
View this in "Full Page" and try to resize yourself.
<html>
<body>
<div id="wrapper" style="display: flex; width: 100%; flex-wrap: wrap; justify-content: center;">
<div id="content" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
</div>
</body>
</html>
This is how it should look like:
They can't have the same size on 2nd row with the given setup.
And reason is when you set flex: 13px, it means flex: 1 1 13px, hence they will grow, if there is space left, until they reach the max-width, and when to little space, they will shrink until reaching the min-width.
There is also no possibilities to detect when an item wrap, so to keep the min/max-width concept you need to add a few media query's.
Note, the !important used in the CSS is needed to override the inline value of 250px
Fiddle demo
Stack snippet
body {
margin: 0;
}
#wrapper div {
box-sizing: border-box;
}
#media (max-width: 900px) {
#wrapper div:nth-child(6) { /* 6th child */
max-width: calc(100% / 5) !important;
}
}
#media (max-width: 750px) {
#wrapper div:nth-child(n+5) { /* from 5th child */
max-width: calc(100% / 4) !important;
}
}
#media (max-width: 600px) { /* from 4th child */
#wrapper div:nth-child(n+4) {
max-width: 250px !important;
}
}
<div id="wrapper" style="display: flex; width: 100%; flex-wrap: wrap; justify-content: center;">
<div id="content1" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content2" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content3" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content4" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content5" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content6" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
</div>
Change justify-content from center to flex-start in #wrapper which is by default is flex-start and then it align child divs to left every time when user resize.
<div id="wrapper" style="display: flex; width: 100%; flex-wrap: wrap; justify-content:flex-start;">
<div id="content" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
<div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
Hey!
</div>
</div>
Remove flex: 13px; from the div. Also, you are using same id for all the divs, please remove that. I have used class instead.
Below is the solution
#wrapper {
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: center;
}
.content {
text-align: center;
background-color: red;
border: 3px solid grey;
height: 200px;
min-width: 150px;
max-width: 250px;
}
<html>
<head>
</head>
<body>
<div id="wrapper">
<div class="content">Hey!</div>
<div class="content">Hey!</div>
<div class="content">Hey!</div>
<div class="content">Hey!</div>
<div class="content">Hey!</div>
<div class="content">Hey!</div>
<div class="content">Hey!</div>
<div class="content">Hey!</div>
</div>
</body>
</html>
I have the following html where I want the left div to show an image about 20% and the second div to contain text and take up the rest of the width. The problem I have is the second div gets pushed to the button when the image is added:
<div style="display:table; width: 100%; border: solid 1px blue;">
<div style="display: table-cell; width: 20%; max-height: 100%; border: solid 1px green; ">
<img src="http://lorempixel.com/400/200/" style=" width: 100%; height: 100%; border: 0;" />
</div>
<div style="dislay: table-cell; border: solid 1px red; vertical-align: top; top: 0; left: 0; ">
This is the area of the description
</div>
</div>
This example as you can see pushes the text to the bottom. But if I remove the image then all is well:
<div style="display:table; width: 100%; border: solid 1px blue;">
<div style="display: table-cell; width: 20%; max-height: 100%; border: solid 1px green; ">
No Image
</div>
<div style="dislay: table-cell; border: solid 1px red; vertical-align: top; top: 0; left: 0; ">
This is the area of the description
</div>
</div>
If I float the image to the left, it behaves properly but the table is not taking the whole width of the browser now
<div style="display:table; border: solid 1px blue;">
<div style="display: table-cell; width: 20%; max-height: 100%; border: solid 1px green; float: left; ">
<img src="http://lorempixel.com/400/200/" style=" width: 100%; height: 100%; border: 0;" />
</div>
<div style="dislay: table-cell; border: solid 1px red; vertical-align: top; top: 0; left: 0; ">
This is the area of the description
</div>
</div>
Here is my demo
I've tried different things but nothing seems to work. So if anyone can give me any tips, it would be appreciated.
You forget to add width:100% on the bottom div.
See this JSFiddle.
It should be like this:
<div style="display:table; width: 100%; border: solid 1px blue;">
<div style="display: table-cell; width: 20%; max-height: 100%; border: solid 1px green; float: left; ">
<img src="http://lorempixel.com/400/200/" style=" width: 100%; height: 100%; border: 0;" />
</div>
<div style="dislay: table-cell; border: solid 1px red; vertical-align: top; top: 0; left: 0; ">
This is the area of the description
</div>
</div>
<div class="outside" style="width: 500px; height: 20px; border: 1px solid red;">
<img src="" style="width: 10px; height: 20px; margin: 0; padding: 0; display: inline-block;">
<div id="here" style="display: inline-block; height: 15px; border: 1px solid blue; font-size: 7px;">11</div>
</div>
I found bottom line of img and #here do not in a line, if I add any text to #here, who can tell me why.
And how to make the #here and img verticall center in the outside (img and #here in the same line )
vertical-align is what you are looking for.
.outside > * {
vertical-align: middle;
}
<div class="outside" style="width: 500px; height: 20px; border: 1px solid red;">
<img src="http://www.fillmurray.com/20/10" style="width: 10px; height: 20px; margin: 0; padding: 0; display: inline-block;">
<div id="here" style="display: inline-block; height: 15px; border: 1px solid blue; font-size: 7px;">11</div>
</div>
Do you want it in the horizontal center?
#ImageCtr {
width: 10px;
height: 20px;
}
#outer {
width: 500px;
height: 20px;
background-color: #FF0000;
display: flex;
align-items: center;
justify-content: center;
}
<div id="outer">
<div id="ImageCtr"><img src="http://i.imgur.com/vCVDBHB.png">
</div>
</div>
For some reason, attribute vertical-align: middle; is not applied to span tag. Here is the code:
<div style="position: relative; background-color: gray; padding: 1%; width: 100%; height: 60px;">
<div style="background-color: green; width: 50%; height: 100%">
<span style="position: absolute; display: inline-block; text-align: center; width: 100%; vertical-align: middle">
50%
</span>
</div>
</div>
Since you know the height of the outer div is 60px, you can set the line-height of the span to match it:
<div style="position: relative; background-color: gray; padding: 1%; width: 100%; height: 60px;">
<div style="background-color: green; width: 50%; height: 100%">
<span style="position: absolute; display: inline-block; text-align: center; width: 100%; vertical-align: middle;line-height: 60px;">
50%
</span>
</div>
</div>
You could use line-height to center your text vertically, in this case use line-height: 60px
<div style="position: relative; background-color: gray; padding: 1%; width: 100%; height: 60px;">
<div style="background-color: green; width: 50%; height: 100%">
<span style="position: absolute; display: inline-block; text-align: center; width: 100%; line-height: 60px;">
50%
</span>
</div>
</div>
I need help with to centering my yellow boxes vertically.
<html>
<head>
<title></title>
</head>
<body style="border-collapse: collapse;">
<div style="margin: 100px; width: 100px; height: 200px; background-color: gray; border: 1px solid gray;">
<table style='background-color: white; width: 100%; height: 100%; border-collapse: collapse; vertical-align: top;'>
<tr>
<td style='height: 33.33%;'>
<div style="position: relative; width: 100%; height: 100%;">
<div style="position: absolute; top: -50%; height: 100%; display: table-cell; vertical-align: middle;">
<div style="border: 1px solid #ccc; width: 30px; height: 30px; background-color: yellow; ">A</div>
</div>
<div style="position: absolute; bottom: -50%; height: 100%; display: table-cell; vertical-align: middle;">
<div style="border: 1px solid #ccc; width: 30px; height: 30px; background-color: yellow; ">B</div>
</div>
</div>
</td>
</tr>
<tr>
<td style="height: 33.33%;">
<div style="position: relative; width: 100%; height: 100%;">
<div style="position: absolute; bottom: -50%; height: 100%; display: table-cell; vertical-align: middle;">
<div style="border: 1px solid #ccc; width: 30px; height: 30px; background-color: yellow; ">C</div>
</div>
</div>
</td>
</tr>
<tr>
<td style="height: 33.33%;">
<div style="position: relative; width: 100%; height: 100%;">
<div style="position: absolute; bottom: -50%; height: 100%; display: table-cell; vertical-align: middle;">
<div style="border: 1px solid #ccc; width: 30px; height: 30px; background-color: yellow; ">D</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Got it fixed by adding margin-top: 50%; for each of the boxes.