I have a CSS column layout.
I find however, that there is an unnecessary gap at the bottom (indicated by the pink arrow in screengrab).
This gap disappears if I remove display: inline-block from the CSS, but then some of the <section> elements break in two. I've also tried using break-inside: avoid but it appears to do nothing at all.
Is there a fix for this?
<div class="feed-index">
<div class="feed">
<section>
Lorem ipsum dolor sit amet
</section>
<section>
Lorem ipsum dolor sit amet
</section>
<section>
Lorem ipsum dolor sit amet
</section>
<section>
Lorem ipsum dolor sit amet
</section>
<section>
Lorem ipsum dolor sit amet
</section>
</div>
</div>
.feed-index .feed {
column-count: 3;
column-gap: 40px;
}
.feed-index .feed > section {
display: inline-block;
margin-bottom: 50px;
overflow: hidden;
}
Add vertical-align:top; to your CSS for .feed-index .feed > section
The reason is your overflow: hidden; actually changes the block. See more info here: Why does x-overflow:hidden cause extra space below?
Related
Is there any way to achieve the layout shown in this mockup?
The supplementary text is right-aligned and if there is space it shares the same linebox as the final line of the main text.
Things I've tried
Floating the supplementary text.
Problems with this approach:
It's a float, so has all the edge cases and bugs floats have, and the next element has to deal with clearing it, and margins act in unexpected ways.
If the supplementary text is a different size, it's difficult to align it to the same baseline as the main text since vertical-align does not work on floating elements. It's possible to align them if all sizes are known, but in most cases this will require extra wrapper elements.
To share the same line as the main text, the supplementary text has to come first (this is unacceptable for me) or the main text has to be floating rather than the supplementary. And the latter case only works when the main text and supplementary text all fit on a single line, otherwise the supplementary will be below the final linebox of the main text.
Here it is with the supplementary text floated right, in both orders:
article {
clear: both;
}
header p {
float: right;
}
<article>
<header>
<h2>Lorem ipsum dolor sit amet, adipiscing</h2>
<p>Supplementary</p>
</header>
</article>
<article>
<header>
<p>Supplementary</p>
<h2>Lorem ipsum dolor sit amet, adipiscing</h2>
</header>
</article>
Flexbox
This is better in one way: flex items can be aligned by baseline without extra wrappers and tricky styling. However:
If flex wrap is not enabled the supplemental text will only ever align to the first baseline of the main text, and the horizontal area available to all lines of the main text is reduced by however much space the supplemental text takes up.
If flex wrap is enabled and the main text wraps to a second line, or otherwise doesn't leave enough space for the supplemental text, the main text's flex element's width is the full width of the flexbox or close to it, and so the supplemental text will always be on a new flex line, even if there is visual space available for it in the main text's last linebox.
header {
display: flex;
align-items: baseline;
}
header p {
margin-left: auto;
}
<header>
<h2>Lorem ipsum dolor sit amet, adipiscing</h2>
<p>Supplementary</p>
</header>
<header style="flex-wrap: wrap">
<h2>Lorem ipsum dolor sit amet, adipiscing</h2>
<p>Supplementary</p>
</header>
Absolute positioning
This is no good since if absolutely positioned, the supplemental text doesn't reserve any space and it may overlap with the main text.
This is definitely an interesting issue. Unfortunately, it does actually seem like a prime usecase for inline and floated elements, as much of a pain as they are. Of course it's a bit more difficult to see how they'll interact in a "real world" environment, but if you were to use the ":after as a table" clearfix, make the h2 inline, float the p, and remove the line-height of it, it should rest at the bottom of the typographic x-height of the h2.
Here's a quick demo:
article:after {
content: "";
display: table;
clear: both;
}
header h2 {
display: inline;
}
header p {
float: right;
line-height: 0;
}
/* Just for example layout */
body{width:100vw;overflow-x:hidden;min-height:100vh;display:flex;align-items:center;justify-content:center}div{max-width:50%}header p{position:relative}header p:after{content:"";position:absolute;width:calc(50vw - 40px);height:1px;background:red;top:6px;right:0}article{padding:20px;border:1px solid #ccc}
<div>
<article>
<header>
<h2>Lorem ipsum</h2>
<p>Supplementary</p>
</header>
</article>
<article>
<header>
<h2>Lorem ipsum dolor sit amet, adipi…</h2>
<p>Supplementary</p>
</header>
</article>
<article>
<header>
<h2>Lorem ipsum dolor sit amet, adipiscing Lorem ipsum dolor sit amet, adipiscing Lorem ipsum dolor sit amet, adipiscing Lorem ipsum.</h2>
<p>Supplementary</p>
</header>
</article>
</div>
Interesting note, as #Temani Afif noted, you can replace the article:after { content: ""; display: table; clear: both; } with header { overflow: auto; } to make it self-clearing. A nice little trick to prevent littering your CSS with clear fixes
h2 {
display: contents;
}
p {
float: right;
transform: translateY(-50%);
}
article {
clear: both;
}
article:after {
content: "";
display:block;
width: 100%;
height: 1px;
background: red;
}
<article>
<header>
<h2>Lorem ipsum dolor sit amet, adipiscing blah blahh blahhhh, and long looong looooooong text content</h2>
<p>Supplementary</p>
</header>
</article>
<br>
<article>
<header>
<p>Supplementary</p>
<h2>Lorem ipsum dolor sit amet, adipiscing</h2>
</header>
</article>
and then without display: contents
and the extra gap that came can solve by setting line-height on the h2 (ex: line-height:1em;)
h2 {
display: inline;
/*line-height: 1em;*/
}
p {
float: right;
transform: translateY(-50%);
}
article {
clear: both;
}
article:after {
content: "";
display:block;
width: 100%;
height: 1px;
background: red;
}
<article>
<header>
<h2>Lorem ipsum dolor sit amet, adipiscing blah blahh blahhhh, and long looong looooooong text content</h2>
<p>Supplementary</p>
</header>
</article>
<br>
<article>
<header>
<p>Supplementary</p>
<h2>Lorem ipsum dolor sit amet, adipiscing</h2>
</header>
</article>
I'm trying to style a reusable component such that it will stay inline but truncate its contents whenever it overflows. What makes it trickier is that I need to have an icon on the right.
The main issue is that I need the icon to stay on the same line, so I compensate for it in the width of the truncated text (width: calc(100% - 40px)), which makes any non-truncating example be that much shorter than it's normal width.
See the snippet below and how the short example is barely visible.
body, .container {
width: 100%;
padding: 0;
margin: 50px 0;
}
.quantity-value {
display: inline-block;
max-width: 100%;
margin-right: 16px;
background: #f1f1f1;
}
.value-and-icon-wrapper {
display: inline-block;
width: 100%;
}
.icon {
padding-left: 5px;
}
.truncated-text {
display: inline-block;
width: calc(100% - 40px);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
vertical-align: top;
-webkit-line-clamp: 1;
}
<!-- Example 1: short -->
<div class="container">
<div class="quantity-value">
<div class="value-and-icon-wrapper">
<span class="truncated-text">67</span>
<span class="icon">ℹ️</span>
</div>
</div>
other content
</div>
<!-- Example 2: long -->
<div class="container">
<div class="quantity-value">
<div class="value-and-icon-wrapper">
<span class="truncated-text">68 long text starting now lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</span>
<span class="icon">ℹ️</span>
</div>
</div>
other content
</div>
This is because you are using a lot of inline-block and the width of inline-block is defined by its content so if you set 100% - 40px for a child item, it means its width minus 40px
Try to do it differently like below using flexbox:
body, .container {
width: 100%;
padding: 0;
margin: 50px 0;
}
.quantity-value {
display: inline-flex;
max-width: calc(100% - 16px); /* don't forget to account for margin here */
margin-right: 16px;
background: #f1f1f1;
}
.icon {
padding-left: 5px;
}
.truncated-text {
flex:1;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<!-- Example 1: short -->
<div class="container">
<div class="quantity-value">
<span class="truncated-text">67</span>
<span class="icon">ℹ️</span>
</div>
other content
</div>
<!-- Example 2: long -->
<div class="container">
<div class="quantity-value">
<span class="truncated-text">68 long text starting now lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</span>
<span class="icon">ℹ️</span>
</div>
other content
</div>
Without flexbox you can do it like below:
body, .container {
margin: 50px 0;
}
.quantity-value {
display: inline-block;
max-width: calc(100% - 16px); /* don't forget to account for margin/padding here */
margin-right: 16px;
background: #f1f1f1;
padding-right:20px;
box-sizing:border-box;
position:relative;
}
.icon {
padding-left: 5px;
position:absolute;
right:0;
top:0;
bottom:0;
}
.truncated-text {
display:block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<!-- Example 1: short -->
<div class="container">
<div class="quantity-value">
<span class="truncated-text">67</span>
<span class="icon">ℹ️</span>
</div>
other content
</div>
<!-- Example 2: long -->
<div class="container">
<div class="quantity-value">
<span class="truncated-text">68 long text starting now lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</span>
<span class="icon">ℹ️</span>
</div>
other content
</div>
Try applying the style text-overflow: ellipsis to the div that contains the text to be truncated.
MDN Documentation for text-overflow
We have a container with overflow-y:scroll that must have a footer that is sticky (bottom 0) unless the content inside the scrolling container + the height (which is dynamic) of the footer are bigger than the containers height.
HTML:
<div class="wrapper">
<div class="scroll">
<div class="content">
Lorem ipsum dolor sit amet
</div>
<div class="footer">
This must stick to the bottom until .content is too long, then go below it
</div>
</div>
</div>
.content and .footer can have more or less content.
If possible, we do not want to use JS for this.
I created a fiddle here with several states: http://jsfiddle.net/bqvtf1zo/1/
Removing position: absolute on .footer solves it for case "little content" (see fiddle), but breaks the other 2 cases.
You need to create a flex container. (Though there are other ways to hande this problem as well: https://css-tricks.com/couple-takes-sticky-footer/)
For the container, set the display to flex and flex-direction to column and give the scrollable content a flex value of 1. Remove positioning from footer, and there you have it.
This will cause the content to stretch to fill the height of the container if any is available, and it will cause the footer to be stuck to the bottom of the content.
For implementation: Be sure to follow up on all the cross-browser issues with flexbox, such as prefixes and bugs. https://github.com/philipwalton/flexbugs
.wrapper{
position: relative;
height: 205px;
width: 200px;
}
.scroll{
border: 1px solid red;
overflow-y: scroll;
height: 100%;
width: 100%;
display:flex;
flex-direction: column;
}
.content{
background-color: #ccc;
flex:1;
}
.footer{
background-color: #efefef;
}
<h1>
little content
</h1>
<div class="wrapper">
<div class="scroll">
<div class="content">
Lorem ipsum dolor sit amet
</div>
<div class="footer">
This must stick to the bottom until .content is too long, then go below it
</div>
</div>
</div>
<h1>
large content
</h1>
<div class="wrapper">
<div class="scroll">
<div class="content">
1. Lorem ipsum dolor sit<br>
2. Lorem ipsum dolor sit<br>
3. Lorem ipsum dolor sit<br>
4. Lorem ipsum dolor sit<br>
5. Lorem ipsum dolor sit<br>
6. Lorem ipsum dolor sit<br>
7. Lorem ipsum dolor sit<br>
8. Lorem ipsum dolor sit<br>
9. Lorem ipsum dolor sit<br>
10. Lorem ipsum dolor sit<br>
11. Lorem ipsum dolor sit<br>
12. Lorem ipsum dolor sit<br>
13. Lorem ipsum dolor sit<br>
</div>
<div class="footer">
This must stick to the bottom until .content is too long, then go below it
</div>
</div>
</div>
<h1>
large content with large footer
</h1>
<div class="wrapper">
<div class="scroll">
<div class="content">
1. Lorem ipsum dolor sit<br>
2. Lorem ipsum dolor sit<br>
3. Lorem ipsum dolor sit<br>
4. Lorem ipsum dolor sit<br>
5. Lorem ipsum dolor sit<br>
6. Lorem ipsum dolor sit<br>
7. Lorem ipsum dolor sit<br>
8. Lorem ipsum dolor sit<br>
9. Lorem ipsum dolor sit<br>
10. Lorem ipsum dolor sit<br>
11. Lorem ipsum dolor sit<br>
12. Lorem ipsum dolor sit<br>
13. Lorem ipsum dolor sit<br>
</div>
<div class="footer">
This must stick to the bottom until .content is too long, then go further down<br>
Some additional content
</div>
</div>
</div>
i must use css to alter the positions; the only thing that seems to be working is the right position nav bar and the liquid layout, but the "content" and "right navigation bar" is ot being positioned properly.
I want content to be in the middle, leftnavigation on the left, and right navigation on the right.
<title>CSS liquid layout</title>
<style type="text/css">
.due {
color: #ff0000;
font-weight: bold;
}
#leftnavigation{
position:absolute;
left:10px;
top:10px;
width:250px;
}
#rightnavigation {
float:right;
width:250px;
height:800px;
}
#content {
float:center;
}
</style>
</head>
<body leftmargin="0" topmargin="0" bgcolor="#ccff99">
<div id="app">
<div id="rightnavigation">
<h1>Right Navigation</h1>
link Instructor
Course <a href="http://www,google.com">
Resume
project
</a>
</div>
<div id="content">
<h1>Sample Content</h1>
<p>
This is the content section of the page. Use structural markup
like <p></p>
to keep the page valid in XHTML.
</p>
<h2>Lorem Ipsum</h2>
</div>
<div id="leftnavigation">
<h1>Left Navigation</h1>
<p>
Page 1 Page 2 <a href="http://www,google.com">
Page
3
</a> Page 4 Page 5 <br />
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor
amum.
</p>
<h2>Lorem Ipsum</h2>
</div>
</div>
You could try this:
CSS
.app {
width: 100%
height: 100%;
}
.due {color: #ff0000;
font-weight: bold;
}
#rightnavigation {
float: left;
width: 33.333%
}
#leftnavigation{
float: left;
width: 33.333%
}
#content {
float: left;
width: 33.333%;
}
HTML
<div class="app">
<div id="leftnavigation">
<h1> Left Navigation </h1>
</div>
<div id="content"></div>
<div id="rightnavigation">
<h1>Right Navigation</h1>
</div>
</div>
Here's a live demo of the example - EXAMPLE
There are some errors in your HTML and CSS that need to be addressed before changing the styles to accomplish what you need.
In your HTML, there are still some unclosed tags. Especially the <div id="rightnavigation"> tag is never closed, so styles applied to #rightnavigation are actually applied to the entire page.
In your CSS, you apply a style to div.content. But that div has an id of content, not a class. The identifier should be div#content.
In your CSS, you give the div with id leftnavigation a position of "left". This should be "absolute" instead.
Once that is all cleaned up, the left nav is on the left, the content is in the center, and the right nav is on the right. But the center content overlaps the right nav (I assume that is unwanted behavior). To clean that up, without changing the HTML any more, you need to give your sections widths, and set their positions based on the width of their neighboring elements.
Your HTML:
<div id="rightnavigation">
<h1>Right Navigation</h1>
</div>
<div id="content">
<h1>Sample Content</h1>
<p>This is the content section of the page. Use structural markup
like <p></p>
to keep the page valid in XHTML.</p>
<p>The styled document should look like your printed version/screenshot.
Add styles to the left navigation links to give them borders and a
background color that changes when moused over (hint: Define navigation
links as display:block;). For the right side links, use a different
background color change and border as ashown.
Make the center column "liquid" or "elastic." Use an external (linked)
CSS file. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit
dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. </p>
<h2>Lorem Ipsum</h2>
<p> Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. </p>
<p><span class="due">Due Tuesday, September 22.</span> Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. </p>
</div>
<div id="leftnavigation">
<h1>Left Navigation</h1>
<p><br>Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. </p>
<h2>Lorem Ipsum</h2>
</div>
And your CSS:
#rightnavigation {
position: absolute;
top: 50px;
right: 0px;
width: 25%;
}
#content {
position: absolute;
top: 50px;
left: 25%;
width: 50%;
}
#leftnavigation{
position: absolute;
top: 50px;
left: 0px;
width: 25%;
}
.due {
color: #ff0000;
font-weight: bold;
}
In my code, my footer will display at the bottom of my page, with no space above or below, as long as I specify a height of my page within Google Chrome. I tried doing height: 100% and so forth but still had problems.
When comparing that to my IE 11, the footer with a specified height has space below it. I can't seem to get both browsers to compromise and I have tried various options to make them both work.
My current css code that would affect the footer is as shown:
html {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
min-width: 768px;
/*keeps footer at bottom of page for IE 11 */
display: flex;
}
/* Formating for body of Web Site */
* {margin: 0; padding: 0;}
body {
font-family: times new roman;
background-color: #ebebeb;
zoom: 75%;
/*keeps footer at bottom of page for IE 11 */
width: 100%;
background-postion: 50% 80%;
}
#screen {
/* This locks everything in place*/
top:0px;
margin: 0 auto;
width:1500px;
height: 1500px;
padding-top:0;
padding-bottom: 30px;
postion: absolute;
margin-left: 70px;
margin-bottom: 0;
}
/* footer formating */
#footer {
background-color: black;
height: 40px;
width: 1500px;
color: white;
padding-top: 10px;
position: relative center;
bottom: 0;
text-align: center;
margin-left:70px;
}
My html:
<html>
<div id = "screen">
<body>
............................................. other code
<div id = "footer">
Copyright Notice - Site Maintanence by **********
<br>
Author of Published Text Content: ************<br>
Pagetop
</div> <!-- end footer -->
</div> <!-- end screen format -->
</body>
</html>
What IE looks like:
if i got you right, you want the footer to "stick" the upper part of the website in both Chrome and IE11 browsers.
i'm not sure why you chose this CSS settings because you didn't supply a link to the full website so i don't know exactly what is going on, but, you can get what you want not just on this two, but in all the browsers, the key is in the structure and the CSS, let me show you.
first of all i arranged your HTML and CSS so it will be easier to read and folow, i also deleted not needed code parts but you can do a reference with the old code to see the changes.
the <div id="screen"> element was outside the <body> tag, so i put it in.
as you can see in the HTML code, i've put <div id="leftcol"> and <div id="centercol"> elements with "lorem ipsum" text to Illustrate the situation in your website. i assumed <div id="screen"> is the website wrapper so i wrapped it all inside it.
<div id="screen">
<div id="leftcol">lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet</div>
<div id="centercol">lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet</div>
<div class="clear"></div>
<div id="footer">
Copyright Notice - Site Maintanence by **********
<br />
Author of Published Text Content: ************
<br />
</div> <!-- end footer -->
<div class="center">
Pagetop
</div>
</div> <!-- end screen format -->
you can see in the CSS i've deleted unnecessary code like i said before, the key is to keep the things simple unless you have to make it complicated for some reason, if you will tell me the reason you need the <HTML> element with display: flex; or <div id="screen"> element with position: absolute; i will try to help you with this and solve the problem but otherwise, let's keep it simple:
*
{
margin: 0;
padding: 0;
}
html
{
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body
{
font-family: times new roman;
background-color: #ebebeb;
background-postion: 50% 80%;
}
#screen
{
margin: 0 auto;
}
#footer
{
padding: 5px;
background-color: #000;
color: #fff;
text-align: center;
}
.center
{
text-align: center;
}
#leftcol
{
width: 30%;
float: left;
background: #B4B4B4;
}
#centercol
{
width: 60%;
float: right;
background: #fff;
}
#leftcol, #centercol
{
padding: 2%;
}
.clear
{
clear: both;
}
that's way it's working in all of the browsers include old versions of IE.
example: http://jsfiddle.net/Lvrcw4vw/3/