I have two text fields inside a 100% width flex row. One is positioned on the left and the other on the right. I want the text on the right to overlap/cover the text on the left when the container (window) is resized (smaller) from the right.
Solutions must not use absolute positioning. The left-text has a left margin that the right-text must stop at. The text container is purposefully a row of 100% width.
Fiddle is not the best platform for layout and resizing testing, but https://jsfiddle.net/Lcjcyp4g/6/
The position:abs solution is commented out in the flex code below for completeness. Please ignore the behavior on resize-right -- our only focus is text overlap on resize-left.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<div class="container--text">
<div class="left">Left Text</div>
<!-- <div class="container--right"> -->
<div class="right">Right Text</div>
<!-- </div> -->
</div>
</div>
</body>
</html>
html, body {
height: 100vh;
width:100%;
background-color: #D7CCC8;
overflow: hidden;
margin: 0;
padding: 0;
}
.container {
min-width:100%;
width:100%;
margin-left:20px;
height: 14px;
max-height:14px;
}
.container--text {
height: 14px;
max-height:14px;
width:100%;
display: flex;
flex-flow: row nowrap;
padding: 10px 0;
}
.left {
white-space: nowrap;
color: #000000;
font-size: 14px;
font-weight: bold;
text-overflow: ellipsis;
flex-shrink:1;
}
/* This is not a viable soln because there is no boundary left for the pos:absolute element without JS*/
.container--right {
/*height: 14px;
background-color: #D7CCC8;
position:absolute;
right:0;
*/
}
.right {
white-space: nowrap;
justify-self:flex-end;
margin-left:auto;
margin-right:20px;
background-color:#BCAAA4;
color: #616161;
font-size: 12px;
}
A solution is to add width: 0;min-width: 0; to the left text to make the left part with no size thus the text will overflow. Then due to white-space:nowrap you won't see any visual changes but the right text will be able to cover it.
html,
body {
margin: 0;
padding: 0;
}
.container--text {
display: flex;
flex-flow: row nowrap;
padding: 10px 0;
animation: change 2s infinite linear alternate;
}
.left {
white-space: nowrap;
width: 0;
min-width: 0;
color: #000000;
font-weight: bold;
}
.right {
white-space: nowrap;
margin-left: auto;
margin-right: 20px;
background-color: #BCAAA4;
color: #616161;
}
#keyframes change {
from{width:500px;}
to{width:230px;}
}
<div class="container--text">
<div class="left">Leeeeeeeeeeeft Text</div>
<div class="right">Rigggggggggggggggght Text</div>
</div>
Or you can omit the width:0 and use overflow:hidden to hide the text when its container will shrink:
html,
body {
margin: 0;
padding: 0;
}
.container--text {
display: flex;
flex-flow: row nowrap;
padding: 10px 0;
animation: change 2s infinite linear alternate;
}
.left {
white-space: nowrap;
overflow:hidden;
text-overflow:ellipsis;
min-width: 0;
color: #000000;
font-weight: bold;
}
.right {
white-space: nowrap;
margin-left: auto;
margin-right: 20px;
background-color: #BCAAA4;
color: #616161;
}
#keyframes change {
from { width: 500px;}
to { width: 230px; }
}
<div class="container--text">
<div class="left">Leeeeeeeeeeeft Text</div>
<div class="right">Rigggggggggggggggght Text</div>
</div>
Related
Why does block with text shift to the bottom? I know how to fix this issue (need to add "overflow: hidden" to the box), but I don't understand why it shift to the bottom, text inside the box is short, margins in browser-inspector are same as margins of example without text.
Example of the problem
HTML:
<div class="with-text">
<div class="box1">
SIMPLE TEXT
</div>
<div class="box2">
</div>
</div>
<div class="without-text">
<div class="box1">
</div>
<div class="box2">
</div>
</div>
CSS:
html, body {
font-size: 10px;
margin: 0;
height: 100%;
}
.box1 {
display: inline-block;
margin: 5px;
width: 50px;
height: 50px;
background: blue;
/* Fix the problem */
/* overflow: hidden; */
color: white;
}
.box2 {
display: inline-block;
margin: 5px;
width: 50px;
height: 50px;
background: red;
}
.with-text:before {
display: block;
content: "with-text";
text-transform: uppercase;
margin: 1rem;
}
.with-text {
box-sizing: border-box;
height: 50%;
border: 1px solid;
}
.without-text:before {
display: block;
content: "without text";
text-transform: uppercase;
margin: 1rem;
}
.without-text {
box-sizing: border-box;
height: 50%;
border: 2px solid black;
}
The problem is that by default vertical alignment of inline elements – baseline,
The text inside element affects it and pushes div to the bottom.
Use vertical-align: top to solve issue.
You can try to add vertical-align:
.box1 {
display: inline-block;
margin: 5px;
width: 50px;
height: 50px;
background: blue;
/* overflow: hidden; */
color: white;
vertical-align:top;
}
Problem:
Hover cursor over the X and wait until the div is fully collapsed.
Move away from the X
Observe how div jumps to the bottom and straight back up.
Question:
How can I make the div expand without the font wrapping during the animation. ( I'm using a delayed font-size now, which seems to be problematic ).
Constrains:
These constrains are in effect due to the broader design of this isolated snippet.
Can not disable wrapping on outer div ( except for during the animation ).
Can not add a fixed width or height to the inner div.
Can not use JS
More context:
I'm using white-space:nowrap for the hover state so the text doesn't wrap while the div collapses. I then use a delayed font-size transition to prevent the text from wrapping while the div expands again ( since it's not possible to animate white-space or display ).
It seems like somehow the font-size of 0 get's lost for a fraction of a second at the beginning of the animation or something. Not sure exactly why it's jumping in the beginning.
.outer {
width: 300px;
overflow: hidden;
border: 1px solid red;
transition: width 2s;
}
.button {
padding: 0px 10px;
display:inline-block;
}
.outer:hover {
width: 30px;
white-space: nowrap;
}
.outer .inner {
font-size: 15px;
display:inline-block;
transition: font-size 0s 2s;
}
.outer:hover .inner {
font-size: 0px;
}
<div class="outer">
<div class="button">
X
</div>
<div class="inner">
This is the variable content of the box
</div>
</div>
You can:
add line-height: 22px; to .outer .inner; and
add height: 22px; to .outer.
.outer {
width: 300px;
height: 22px;
overflow: hidden;
border: 1px solid red;
transition: width 2s;
}
.button {
padding: 0px 10px;
display:inline-block;
}
.outer:hover {
width: 30px;
white-space: nowrap;
}
.outer .inner {
font-size: 15px;
line-height: 22px;
display:inline-block;
transition: font-size 0s 2s;
}
.outer:hover .inner {
font-size: 0px;
}
<div class="outer">
<div class="button">
X
</div>
<div class="inner">
This is the variable content of the box
</div>
</div>
.outer {
width: 300px;
overflow: hidden;
border: 1px solid red;
transition: width 2s;
}
.button {
padding: 0px 10px;
display: inline-block;
float: left;
line-height: 1;
}
.outer:hover {
width: 30px;
white-space: nowrap;
}
.outer .inner p {
font-size: 15px;
display: inline-block;
float: left;
transition: all ease-in-out 2s;
line-height: 1;
margin: 0;
}
.outer:hover .inner p {
font-size: 0px;
transition: all ease-in-out 1s;
}
<div class="outer">
<div class="button">
X
</div>
<div class="inner">
<p>This is the variable content of the box</p>
</div>
</div>
target the p, change the transition to all.
This is one of the problems you get when you change an object's size on hovering over itself. The trick to solving this is to use a parent container to hover on, which will always cover the width of the element, causing a slight ghosting effect, but compared to the visual effects your original solution had, this is much cleaner.
Your list of constraints isn't easy to work with, and the only way I can see this being solved under these circumstances is by making button and element that doesn't interfere with the document flow inside your container, so that nothing will wrap. Here are a few different attempts, one of which hopefully suiting your requirements:
solution fitting all contraints, using white-space
.outer-wrapper {
width: 350px;
}
.outer {
width: 350px;
overflow: hidden;
border: 1px solid red;
transition: width 2s;
}
.button {
width: 0;
height: 0;
}
.button:after {
content: 'X';
padding: 0px 10px;
display: inline-block;
}
.outer-wrapper:hover .outer {
width: 30px;
}
.outer .inner {
font-size: 15px;
display: inline-block;
margin-left: 2em;
transition: font-size 0s 2s;
white-space: nowrap;
}
.outer-wrapper:hover .outer .inner {
font-size: 0px;
}
<div class="outer-wrapper">
<div class="outer">
<div class="button"></div>
<div class="inner">
This is the variable content of the box
</div>
</div>
</div>
solution fitting all contraints, changing the markup to use pre
This solution introduces a pre element, which will prevent wrapping on it's own because it inherits a white-space:pre declaration from it's default style.
.outer-wrapper {
width: 350px;
}
.outer {
width: 350px;
overflow: hidden;
border: 1px solid red;
transition: width 2s;
}
.button {
width: 0;
height: 0;
}
.button:after {
content: 'X';
padding: 0px 10px;
display: inline-block;
}
.outer-wrapper:hover .outer {
width: 30px;
}
.outer .inner {
font-size: 15px;
display: inline-block;
margin-left: 2em;
transition: font-size 0s 2s;
}
.outer-wrapper:hover .outer .inner {
font-size: 0px;
}
pre {
font-family: inherit;
margin: 0;
}
<div class="outer-wrapper">
<div class="outer">
<div class="button"></div>
<div class="inner">
<pre>This is the variable content of the box</pre>
</div>
</div>
</div>
hacking your way out
You need to prevent the inner div's contents from wrapping, and if you don't want to do this via white-space, the only option left is to replace all whitespaces in it with non-breaking spaces to make sure the element can't wrap anymore:
<div class="inner">
This is the variable content of the box
</div>
I am creating a web page with 2 <div>s side by side. Each <div> will have 2 sections.
I want to center them (bring them to the middle of the <div>). I am trying to make this <div> responsive. In the website, 2 <div>s will be in one line, while in mobile one <div> will appear on one line and the other <div> will appear on a second line. I am trying to center the image and text of each section.
How can I accomplish that?
.wrapper {
width: 100%;
overflow: hidden;
}
.wrapper div {
min-height: 45px;
padding: 1px;
}
#one {
background-color: gray;
float: left;
width: 50%;
}
#two {
background-color: red;
overflow: hidden;
min-height: 45px;
}
#media screen and (max-width: 400px) {
#one {
float: none;
margin-right: 0;
width: auto;
border: 0;
}
}
<div class="wrapper">
<div id="one">
<img src="http://livebodybuilding.com/images/fast-delivery.png" height="26" width="55" style="float:left; margin-top: 6px;" />
<p style=" font-size:13px; color:#fff; line-height:1.5; font-family: 'Montserrat',sans-serif;"><strong> FREE DELIVERY </strong>ORDERS OVER $100</p>
</div>
<div id="two">
<img src="http://livebodybuilding.com/images/free-gift.png" height="26" width="31" style="float:left; margin-top: 6px;" />
<p style="font-size:13px; color:#fff; line-height:1.5; font-family: 'Montserrat',sans-serif;"><strong> FREE GIFT</strong> ORDERS OVER $100</p>
</div>
</div>
My fiddle: https://jsfiddle.net/4okxw32v/
First of all, the use of floats in layout design is discouraged. It is generally not a good way of doing things, and usually if you're having a layout issue it comes down to a float problem. Instead you should use the display: inline-block setting. When using inline-block there are a couple of things to take into consideration.
Any white space between elements will be shown. To combat this you can set font-size: 0 on the wrapper and then set font-size: 1rem on the children. This will set the font size in the content to the same size as that of the html selector.
You can prevent line-breaking if you set white-space: nowrap on the parent and then set white-space: initial on the children.
Next instead of adding an image and floating it inside the child you can use the css pseudo element ::before (or css2 :before) on the text container inside the element.
Finally to center the contents use text-align: center on the parent
*, *::before, *::after {
box-sizing: border-box;
}
html,
body {
padding: 0px;
margin: 0px;
}
.wrapper {
font-size: 0;
}
.wrapper div {
font-size: 1rem;
min-height: 45px;
padding: 1px;
text-align: center;
font-size: 13px;
color: #fff;
line-height: 1.5;
font-family: 'Montserrat', sans-serif;
overflow: hidden;
display: inline-block;
width: 50%;
}
#one {
background-color: gray;
}
#one p:before {
content: "";
display: inline-block;
width: 4em;
height: 2em;
background-image: url(http://livebodybuilding.com/images/fast-delivery.png);
background-size: cover;
vertical-align: middle;
margin-right: 5px;
}
#two {
background-color: red;
overflow: hidden;
min-height: 45px;
}
#two p:before {
content: "";
display: inline-block;
width: 2.5em;
height: 2em;
background-image: url(http://livebodybuilding.com/images/free-gift.png);
background-size: cover;
vertical-align: middle;
margin-right: 5px;
}
#media screen and (max-width: 620px) {
.wrapper div {
width: 100%;
}
}
<div class="wrapper">
<div id="one">
<p><strong>FREE DELIVERY</strong> ORDERS OVER $100</p>
</div>
<div id="two">
<p><strong>FREE GIFT</strong> ORDERS OVER $100</p>
</div>
</div>
For some reason I can't get the Text to hide while it transitions off the screen.
Example, I have a rectangle hidden off screen, but even after the page should end (sides of the page) the rectangle is still visible which is very odd. I've solved this issue before but I forgot.
Code:
<!DOCTYPE html>
<html>
<header>
<title>RNS|Blog</title>
</header>
<head>
</head>
<body>
<style>
#tuti {
margin-left: 1000px;
margin-right: 0;
}
#tuti:hover {
width: 600px;
padding: 0px;
}
#tuti a {
float: left;
overflow: hidden;
padding-left: 45px;
white-space: nowrap;
font-size: 1.5em;
}
#tuti {
width: 30px;
height: 75px;
background-color: #655655;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
opacity: 0.5;
margin: 0;
padding: 0;
border: 0;
color: white;
font-weight: 300;
margin-top: 30px;
}
.right {
float: right;
}
}
</style>
<h1 class="right", id="tuti"><a>really nice server I blog</a></h1>
</body>
<footer>
</footer>
</html>
JSFiddle: https://jsfiddle.net/eobwtvxL/
The main reason is that the text within the a tag has width and the h1 tag should be set to overflow:hidden. Also, setting position:absolute on the h1 will take it out of document flow and allow you to place it anywhere without affecting adjacent elements. Here is the cleaned up CSS:
#tuti {
overflow:hidden;
position:absolute;
right:30px;
top:30px;
width: 30px;
height: 75px;
background-color: #655655;
-webkit-transition: width 2s;
/* For Safari 3.1 to 6.0 */
transition: width 2s;
opacity: 0.5;
margin: 0;
padding: 0;
border: 0;
color: white;
font-weight: 300;
}
#tuti:hover {
width: 600px;
padding: 0px;
}
#tuti a {
position:absolute;
overflow: hidden;
padding-left: 45px;
white-space: nowrap;
font-size: 1.5em;
}
Cleaned up fiddle:
https://jsfiddle.net/eobwtvxL/1/
You also need to fix this:
<h1 class="right", id="tuti">
No comma:
<h1 class="right" id="tuti">
Make sure to assign overflow:hidden; to any element that contains the pullout bar. In your jsfiddle add this #tuti {overflow:hidden;} and you will see it will work.
I am attempting to display 2 divs on the same line using css while keeping a horizontal scroll on the last div. So far I have not been able to make this work. I have a jsfiddle, http://jsfiddle.net/fortesl/h54t1t63/3/ , and code shown below:
HTML:
<div class="title-menu">
<div class="title">
A long unbreakable name
</div>
</div>
<div class="toolbar-scroll">
<ul>
<l1>item1</l1>
<l1>item2</l1>
<l1>item3</l1>
<l1>item4</l1>
<l1>item5</l1>
<l1>item6</l1>
<l1>item7</l1>
<l1>item8</l1>
<l1>item9</l1>
<l1>item10</l1>
<l1>item11</l1>
<l1>item12</l1>
<l1>item13</l1>
<l1>item14</l1>
<l1>item15</l1>
</ul>
</div>
CSS:
ul {;
list-style-type: none;
}
li {
display: inline;
}
.title-menu {
display: inline-block;
z-index: 1004;
max-width: 540px;
max-heigth: 40px;
}
.title {
display: inline-block;
font-size: 21pt;
text-shadow: 0 0 1px rgba(40, 40, 41, 0.3);
letter-spacing: 2px;
height: 47px;
overflow: hidden;
white-space: nowrap;
}
.toolbar-scroll {
overflow: scroll;
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
}
I am able to display the divs on the same line by setting 'display: inline-block' on the last div, but doing so disables the scroll bar. I need the scroll bar to work.
Thank you.
Consider the display: table-cell;, it is really pretty handy.
http://jsfiddle.net/h54t1t63/4/
body {
margin-top: 100px;
}
ul {;
list-style-type: none;
}
li {
display: inline;
}
.container { display:table; }
.title-menu {
display:table-cell;
z-index: 1004;
max-width: 540px;
max-heigth: 40px;
}
.title {
display:table-cell;
font-size: 21pt;
text-shadow: 0 0 1px rgba(40, 40, 41, 0.3);
letter-spacing: 2px;
height: 47px;
overflow: hidden;
white-space: nowrap;
}
.toolbar-scroll {
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
height: 3em;
text-align: bottom;
width: 100px;
}
<div class='container'>
<div class="title-menu">
<div class="title">
A long unbreakable name
</div>
</div>
<div class="toolbar-scroll">
<ul>
<l1>item1</l1>
<l1>item2</l1>
<l1>item3</l1>
<l1>item4</l1>
<l1>item5</l1>
<l1>item6</l1>
<l1>item7</l1>
<l1>item8</l1>
<l1>item9</l1>
<l1>item10</l1>
<l1>item11</l1>
<l1>item12</l1>
<l1>item13</l1>
<l1>item14</l1>
<l1>item15</l1>
</ul>
</div></div>
The easiest way is to wrap them into a wrapper div and make it display:table-row while the two divs you want in a single line will have display:table-cell
http://jsfiddle.net/1z5xtd8x/