Goal: remove the white gap in between the two rows of images:
repro case: https://jsfiddle.net/kromato4/5cyLvnut/
The gap does not appear under html, but crops up when I switch to xhtml (and the epub that this is going into expects xhtml).
here is the html:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>divs to the rescue?</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="grid">
<div class="gridrow">
<div ><img src="https://i.imgur.com/pvh1qBn.jpg"/></div>
<div ><img src="https://i.imgur.com/Mmnz4YT.gif"/></div>
<div ><img src="https://i.imgur.com/3nAJxUE.gif"/></div>
</div>
<div class="gridrow">
<div><img src="https://i.imgur.com/C8mn56T.gif" /></div>
<div><img src="https://i.imgur.com/Tic5I5b.gif" /></div>
</div>
</div>
</body>
</html>
and the minimal css:
.grid {
display: table;
width: 585px;
height: 580px;
}
.gridrow {
display: table;
}
.gridrow > div {
display: table-cell;
I've mucked with setting heights on the divs to no avail. The top row images are all 255 pixels tall, but the divs holding the images appear to be an extra 4 pixels tall. Also tried using table with rows and columns, but showed the same issue. Any help appreciated as this gap is super distracting when the images are all panels from the same comic.
Define display block on image tag, See attached code
.gridrow > div img {
display: block;
}
Welcome to SO
Set image as display table
.gridrow img {
display: table;
}
You have to add just one css only
.gridrow img {
display: block;
}
Related
I'm having an issue, primarily on mobile devices (in my case, an iOS device) where a div is seemingly preventing scroll-chaining; this is problematic because it's the first place you would touch to scroll (as opposed to a smaller div above it). Similarly for scrolling back up. I couldn't find anything online stating that there was a parameter or property default to mobile webkit that would contain a div. It seems though maybe this is behavior on iOS webkit, as notably, a second swipe on the final image after the "bounce" of the scroll of the div returns to normal positioning in the div allows a scroll (sometimes seemingly inconsistently?)
I've managed to recreate the issue with a test with minimum code repeated from my project (view on mobile! overscroll works fine on desktop)
https://codepen.io/hennigarj/pen/ZEjYrpW
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<style>
#container {
display: block;
width: 100%;
height: 100%;
padding-top: 4vh;
}
.flex-items {
width: 100%;
overflow: auto;
}
.flex-items:nth-child(1) {
display: block;
height: 10vh;
}
.flex-items:nth-child(2) {
display: block;
margin-top: 4vh;
margin-bottom: 4vh;
height: 64vh;
text-align: center;
}
.flex-items img {
max-width: 100%;
}
.flex-items:nth-child(3) {
display: block;
padding-bottom: 6vh;
}
</style>
</head>
<body>
<div id="container">
<div class="flex-items">
Div 1
</div>
<div class="flex-items">
<section id="highlights">
<div class="highlight">
<img src="https://placehold.jp/400x536.png" />
</div>
<div class="highlight">
<img src="https://placehold.jp/400x536.png" />
</div>
<div class="highlight">
<img src="https://placehold.jp/400x536.png" />
</div>
</section>
</div>
<div class="flex-items">
Div 3
</div>
</div>
</body>
</html>
Anyone have any ideas? I've tried all sorts of overflows and overscroll-behaviors on everything but nothing seems to fix this, and there is no value to specifically enable scroll-chaining through overscroll.
This is probably clear as day and I'm completely missing it.
Thank you :)
I've tried various different potential heights, overscroll-behaviors, overflows on divs (to no success). Ideally, hitting the end of the div would continue the scroll-chain past it, just as it does on desktop, but it contains. I've tried -webkit-overflow-scroling: auto as well.
Right now I'm coding a menu that has a two column layout. This is the code.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="stockapps">
<img src="icons/eShop.svg">
<img src="icons/sverse.svg">
</div>
<div class="main">
<p>
Hello!
</p>
</div>
</body>
</html>
CSS:
.stockapps {
background-color: #111;
float: left;
width: 5%;
height: 100%;
}
.stockapps :after {
content: "";
display: table;
clear: both;
}
.stockapps img{
width:100%;
display: inline;
vertical-align: top;
}
.main {
float: left;
padding: 2%;
width: 91%;
overflow: hidden;
}
The issue is that the stockapps div tag is not filling the whole screen with height instead opting to only fill the area the children objects take up.
I have tried using the clear-fix and setting overflow to hidden but neither seem to fix the issue. Its likely some beginner mistake as CSS is not my strong suit
This fiddle showcases the issue.
You can wrap stockapps and main divs into a container div
Style this container as below
I used background color for stockapps div to show you its height
.container {
display: flex;
align-items: stretch;
/*Set height as you want, you can use height in px */
height: 100vh;
}
.stockapps {
/* used background-color to show you how much height it takes*/
background-color: #999;
/*You can ignore width if it's not convenient for your desired final output */
width: 50%
}
<div class="container">
<div class="stockapps">
<img src="icons/eShop.svg">
<img src="icons/sverse.svg">
</div>
<div class="main">
<p>
Hello!
</p>
</div>
</div>
If I understand you correctly, you need to create a 2-column layout for your menu.
To achieve this layout, I would wrap the <div class="stockapps"> and <div class="main"> into another <div> with class of manu-wrap and add this CSS styles:
.menu-wrap {
display: flex;
justify-content: space-between;
}
I would then remove the float properties and you should have a working 2-column layout.
You can find more about display: flex here.
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 1 year ago.
This should be simple but I just can't figure it out. I have 3 divs displayed as inline block. Whenever I put an svg image (or any image, for that matter - I linked a jpeg and got the same result but I need to have inline svg in this case) inside of one the divs, it causes the other two divs to move down. What could be causing this? Why are the divs no longer on the same baseline?
Resulting behavior
Here is my (simple) code, less the very lengthy svg bit:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Merch</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="headingcontainer">
<div class="div1">1</div>
<div class="div2">
<svg
</svg>
</div>
<div class="div3">3</div>
</div>
</body>
</html>
CSS:
.div1, .div2, .div3 {
width: 150px;
height: 150px;
display: inline-block;
}
.div1 {
background-color: red;
}
.div2 {
background-color: blue;
}
.div3 {
background-color: green;
}
Someone please make me feel like an idiot by pointing out what's going on here. :-)
I think if you add vetical-align: top; to the elements it will work. inline-block elements are vertical-align: baseline; unless otherwise specified.
Example:
.div1,
.div2,
.div3 {
width: 150px;
height: 150px;
display: inline-block;
vertical-align: top;
}
.div1 {
background-color: red;
}
.div2 {
background-color: blue;
}
.div3 {
background-color: green;
}
<div class="headingcontainer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
Just a bit about the default baseline:
Aligns the baseline of the element with the baseline of its parent.
The baseline of some replaced elements, like , is not
specified by the HTML specification, meaning that their behavior with
this keyword may vary between browsers.
I have the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
#scale div {
float: left;
width: 75px;
padding: 5px;
border: 0px #333 solid;
}
</style>
</head>
<body>
<div style="font-size: 10px;" id="scale">
<div id="box" align="center" style="background:#88ff88;" > </div>
<div id="a"> 1   </div>
<div id="box" align="center" style="background:#ff8888;"> </div>
<div id="b"> 2   </div>
<div id="box" align="center" style="background:#ff88ff;"> </div>
<div id="c"> 3   </div>
</div>
</body>
</html>
How can I get the above on three lines. That is, a color block and a number on a single line.
First, you have multiple elements with the same ID. It doesn't work like that. ID is unique, multiple elements can have the same class.
Second, I would recommend just having an empty span tag inside a div for your box. Divs display block by default (take up whole line) so you can have an inline-block span (takes up only required space but treated like block element) with set width and height and a number next to it.
Also, inline styles make the code look messy and difficult to read & work with. You should keep your CSS separate from your HTML.
<div id="scale">
<div id="a"><span></span>1</div>
<div id="b"><span></span>1</div>
<div id="c"><span></span>1</div>
</div>
#scale div span {
width: 100px;
height: 20px;
display: inline-block;
}
#a span{
background-color:#00F;
}
#b span{
background-color:#0F0;
}
#c span{
background-color:#F00;
}
DEMO
In your style tag, use display: inline-block on all of your box divs.
I have the following HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Table-cell issue</title>
<style type="text/css">
html, body { height: 100%; }
.table
{
display: table;
height: 100%;
}
.row
{
display: table-row;
}
.aside
{
display: table-cell;
}
.center
{
background-color: red;
display: table-cell;
width: 100%;
}
.wide
{
background-color: green;
width: 16000px;
}
</style>
</head>
<body>
<div class="table">
<div class="row">
<div class="aside">
Left column
</div>
<div class="center">
<div class="wide"> </div>
</div>
<div class="aside">
Right column
</div>
</div>
</div>
</body>
</html>
The problem is that the div.center stretches to fit its content, while the div.table is meant to occupy the whole viewport, and the rest of the div.center's content should be invisible. Neither overflow:hidden nor explicit width setting in pixels (900px, for instance) helps.
I would be very grateful for any idea on how to fix the issue.
Use table-layout:fixed on the table div. This disables the automatic cell resizing and will make the center only as wide as you allow it to be.