I am having trouble aligning 3 divs next to each other. I have never had this this issue before, but now I am making a template where the background has a 100% width (never ends) for each element of the webpage.
The element I want to align 3 divs horizontally is not working for me. I can get two divs next to each other, but when I try to align the 3rd div, the 3rd div will align, but the entire element gets messed up somehow.
Your help is greatly appreciated!
Here is the full code. I took out other website elements to simplify the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test Website</title>
<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
strong {
font-weight:bold;color:#0289ce;
}
em {
font-style:oblique;
}
p {
margin:15px 0;
}
.aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
h1 {font-size:180%;}
h2 {font-size:150%;}
h3 {font-size:125%;}
h4 {font-size:100%;}
h5 {font-size:90%;}
h6 {font-size:80%;}
a:link {color:#0289ce;}
a:hover {color:#f64274;}
/*End RESET - Begin Full Width CSS*/
body {
background:#FFFFBF;
color:#2D1F16;
font:13px Helvetica, Arial, sans-serif
}
.wrap {
position:relative;
margin:0 auto;
width:900px;
background-color: #EC3515;
}
.wrapHeader {
position:relative;
margin:0 auto;
width:900px;
background-color: #9FF;
}
.wrapSlider {
position:relative;
width:900px;
margin-right: auto;
margin-left: auto;
top: 67px;
right: 32px;
}
.wrapPackages {
position:relative;
width:900px;
margin-right: auto;
margin-left: auto;
}
.multipleDivs {
height: auto;
width: 100%;
background-color: #CFF;
clear: both;
position: relative;
}
.wrapInfo {
position:relative;
width:900px;
margin-right: auto;
margin-left: auto;
background-color: #A6FFFF;
height: auto;
clear: both;
}
#infoContent1 {
background-color: #666;
height: auto;
width: 300px;
float: left;
position: relative;
}
#infoContent2 {
background-color: #999;
height: auto;
width: 300px;
float: left;
position: relative;
}
#infoContent3 {
background-color: #CCC;
height: auto;
width: 300px;
}
.wrapContent {
position:relative;
width:100%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#header, #footer {
width:100%;
float:left;
padding:15px 0;
}
#header {
background-color: #FFF;
}
#header .logo {
float:left;
width:400px;
}
#header p {
float:right;
width:400px;
margin:0;
}
#content {
padding:15px 0;
clear:both;
background-color: #F9C;
}
.imageSlider {
height: 570px;
width: 100%;
color: #FFF;
background-repeat: no-repeat;
background-position: center;
background-image: url(../images/bgSlider2.jpg);
}
.package {
height: auto;
width: 100%;
background-color: #CCC;
background-repeat: no-repeat;
background-position: center center;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#footer {
background:#EC3515;
text-align:center;
}
#footer a {
color:#fff;
}
</style>
</head>
<body>
<div id="header">
<div class="wrapHeader">
<div class="logo">
<img src="images/#.png" width="250" height="62" />
</div>
<p>Sample text</p>
</div>
</div>
<div class="wrapContent">
<div id="content">
<div class="multipleDivs">
<div class="wrapInfo">
<div id="infoContent1">
<p>Div 1</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="infoContent2">
<p>Div 2</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="infoContent3">
<p>Div 3</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="package">
<div class="wrapPackages">
<img src="images/sampleImage.jpg" width="900" height="475" border="0" /></div>
</div>
<p> </p>
<p> </p>
</div>
</div>
<div id="footer">
<div class="wrap">
<p>© 2013 - Sample Text</p>
</div>
</div>
</body>
</html>
You need float left only once.
http://jsfiddle.net/NvbnY/2/
div {
float:left;
}
You had 3 different floats that are causing your issue:
Remove all of this:
.aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
Alternately give all of the divs you want to be effected the same class name and add the css to that element:
<div class="floaters">1</div>
<div class="floaters">2</div>
<div class="floaters">3</div>
and
.floaters {
float:left;
}
In action - http://jsbin.com/iqegob/1/edit
You could also add float:left; to #infoContent3
give all of the divs you want to be effected the same class name and add the css to that element:
<div class="floaters">1</div> <div class="floaters">2</div> <div
class="floaters">3</div>
and
.floaters {
float:left;
}
Add overflow:hidden; in #infoContent3
Output --
Related
Text
Hi there,
first I have to say: I´m a beginner, so I hope you are patient with me!:-)
I created a navigation via a list. By adding a "padding" for "a" I determined also the height of its ancestor elements ("ul" and "nav"). I did that because afterwards I wanted the whole areas to get black with a transition.
Now, when I want to scale it to 1.2, the "a"-clicking-area appears bigger than the ancestor arease of "ul" and "nav".
Any ideas how I can limit it to the height of the link area?
image
Link to picture of Problem
CSS and html code
<!-- language: lang-css -->
* {
margin: 0;
box-sizing: border-box;
}
html {
font-size: 100%;
padding: 0;
font-family: helvetica;
}
body {
color: #000;
font-size: 1em;
text-align: left;
padding: 0;
background-color: #fff;
}
article, aside, details, figcaption, figure, footer, header, main, nav, section, summary {
display: block;
}
strong, b {
font-weight: bold;
}
em, i {
font-style: *italic*;
}
small {
font-size: 0.8rem;
}
main h1,
main p {
margin-bottom: 1rem;
}
main h1 {
font-size: 2em;
font-weight: **bold**;
}
main p {
line-height: 1.5em;
}
main :last-child {
margin-bottom: 0;
}
nav ul {
list-style-type: none;
padding: 0;
}
header {
height: 30rem;
background-image: url(../images/whatsapp.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: right bottom;
position: relative;
}
header a {
color: white;
}
/*Breakpoint 1*/
#media (max-width: 1024px) {
header {
height: 20rem;
}
}
header #title {
font-size: 7.5rem;
font-weight: **bold**;
white-space: nowrap;
text-decoration: none;
word-spacing: -0.05em;
position: absolute;
top: 0.5rem;
left: calc(50% - 30rem);
opacity: 0.75;
}
/*Breakpoint 1*/
#media (max-width: 1024px) {
header #title {
font-size: 5rem;
font-weight: **bold**;
white-space: nowrap;
text-decoration: none;
word-spacing: -0.05em;
position: absolute;
top: 0.5rem;
left: calc(60% - 30rem);
opacity: 0.75;
}
}
header #title::before {
content: url(../images/sun.svg);
display: inline-block;
vertical-align: middle;
width: 30%;
font-size: inherit;
margin-top: 1rem;
margin-right: 2rem;
margin-left: 1rem;
}
/*Breakpoint 2*/
#media (max-width: 768px) {
header #title, header #title::before {
transform: rotate(-90deg);
top: calc(30rem - 100%);
left: -6rem;
}
header #title {
font-size: 2.8rem;
}
header #title::before {
width: 20%;
margin-right: 0rem;
margin-left: 2.5rem;
margin-bottom: 1rem;
}
}
nav {
width: 100%;
background-color:rgba(255, 255, 255, 0.3);
position: absolute;
top: 321px;
}
nav ul {
max-width: 1025px;
display: flex;
justify-content: space-around;
margin: auto;
}
nav ul li {
font-size: 1.4rem;
font-weight: **bold**;
white-space: nowrap;
}
nav ul li a {
padding: 4rem 2rem;
text-decoration: none;
display: block;
text-align: center;
}
nav ul li a:hover {
background-color: rgba(0, 0, 0, 0.3);
transform: scale(1.2);
transition: background-color 0.3s ease-in;
transition: transform 0.1s ease-in;
padding: 4rem 2rem;
}
#media (max-width: 1024px) {
nav {
box-sizing: border-box;
width: 180px;
height: inherit;
position: unset;
top: 0;
right: 0;
}
nav ul {
width: 100%;
flex-direction: column;
}
nav ul li a {
padding: 1.03rem;
text-align: left;
}
}
main {
max-width: 1025px;
box-sizing: border-box;
margin: auto;
padding: 2rem;
}
p {
text-align: justify;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
```
html code
```
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Whatsapp</title>
<link href="styles/styles_neu.css" rel="stylesheet" media="screen" />
</head>
<body>
<header>
Whatsapp
<nav>
<ul>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
</ul>
</nav>
</header>
<main>
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
</body>
</html>
<!-- end snippet -->
I've got a jsfiddle here: https://jsfiddle.net/Lh7qbye2/7/
And a test web page here: https://shetline.com/test/test01.html
The question is this: Why doesn't the content of the inner <div> prevent the outer <div> from shrinking to less than the width of the inner <div> when you resize the containing window to a narrow size?
Updates based on the answer I got for the problem:
https://jsfiddle.net/Lh7qbye2/8/
https://shetline.com/test/test02.html
I can solve the problem for Chrome or Safari by using:
width: fit-content;
...on the outer <div>, but this doesn't solve the problem for Firefox or Edge. Further, MDN marks fit-content as an experimental API:
This is an experimental API that should not be used in production code.
word-break: break-all on the outer <div> kinda, sorta, helps, but messes up all word wrap. If I try to compensate by setting normal breaking on the <p> and <button> tags, the help provided by the outer break-all disappears.
One thing that really confuses me is that I know I've seen situations like this with no spill-over problem at all, and I didn't have to go out of my way to get the behavior I'd expect. What am I missing that's wrong in this simplified example?
body {
margin: 4em;
}
.demo {
background-color: #BFC;
box-sizing: border-box;
margin: 0;
padding: 1em;
position: relative;
/* width: fit-content; // With this it works for Chrome or Safari, but not for Firefox or Edge. */
/* word-break: break-all; // For some reason this sort of helps too, but of course messes up all word wrapping. */
/* If I try to apply "word-break: normal" to <p> and <button> tags to compensate, the inner <div> leaks out again. */
}
.demo p:first-child {
margin-top: 0;
}
.other-stuff {
align-items: center;
background-color: #AEB;
display: flex;
}
button {
margin-right: 1em;
}
.square {
display: inline-block;
background-color: #699;
height: 80px;
margin-right: 1em;
min-width: 80px;
width: 80px;
}
.circle {
border-radius: 50px;
display: inline-block;
background-color: #969;
height: 100px;
margin-right: 1em;
min-width: 100px;
width: 100px;
}
<div class="demo">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="other-stuff">
<button>One button</button>
<div class="square"></div>
<button>Another button</button>
<div class="circle"></div>
<button>Don't click!</button>
</div>
</div>
What you want can be done using a combination of inline-block and min-width:100%. A block element has its width defined based on its parent element (containing block) while inline-block will have its width defined by its content.
Adding the min-width:100% will make it behave as block element. it's not mandatory in this case since you already have a lot of content so you are sure to cover all the width:
body {
margin: 4em;
}
.demo {
background-color: #BFC;
box-sizing: border-box;
margin: 0;
padding: 1em;
position: relative;
display:inline-block;
min-width:100%;
}
.demo p:first-child {
margin-top: 0;
}
.other-stuff {
align-items: center;
display: flex;
}
button {
margin-right: 1em;
}
.square {
display: inline-block;
background-color: #699;
height: 80px;
margin-right: 1em;
min-width: 80px;
width: 80px;
}
.circle {
border-radius: 50px;
display: inline-block;
background-color: #969;
height: 100px;
margin-right: 1em;
min-width: 100px;
width: 100px;
}
<div class="demo">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="other-stuff">
<button>One button</button>
<div class="square"></div>
<button>Another button</button>
<div class="circle"></div>
<button>Don't click!</button>
</div>
</div>
Reduce the text on the top and min-width:100% will become mandatory to have full width behavior.
Run the snippet on full page
body {
margin: 4em;
}
.demo {
background-color: #BFC;
box-sizing: border-box;
margin: 0;
padding: 1em;
position: relative;
display:inline-block;
}
.demo p:first-child {
margin-top: 0;
}
.other-stuff {
align-items: center;
display: flex;
}
button {
margin-right: 1em;
}
.square {
display: inline-block;
background-color: #699;
height: 80px;
margin-right: 1em;
min-width: 80px;
width: 80px;
}
.circle {
border-radius: 50px;
display: inline-block;
background-color: #969;
height: 100px;
margin-right: 1em;
min-width: 100px;
width: 100px;
}
<div class="demo">
<p>Lorem ipsum </p>
<div class="other-stuff">
<button>One button</button>
<div class="square"></div>
<button>Another button</button>
<div class="circle"></div>
<button>Don't click!</button>
</div>
</div>
<div class="demo" style="min-width:100%;">
<p>Lorem ipsum </p>
<div class="other-stuff">
<button>One button</button>
<div class="square"></div>
<button>Another button</button>
<div class="circle"></div>
<button>Don't click!</button>
</div>
</div>
From the specification:
Block-level, non-replaced elements in normal flow
The following constraints must hold among the used values of the other properties:
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
Note how the content play no role in defining the width.
'Inline-block', non-replaced elements in normal flow
If 'width' is 'auto', the used value is the shrink-to-fit width
Calculation of the shrink-to-fit width is similar to calculating the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. Thirdly, find the available width: in this case, this is the width of the containing block minus the used values of 'margin-left', 'border-left-width', 'padding-left', 'padding-right', 'border-right-width', 'margin-right', and the widths of any relevant scroll bars
the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width)
Note how the content is used to define the width.
The same apply to any kind of display value (grid, flex, table, etc) and the trick is to replace it with the inline-* equivalent (inline-grid, inline-flex, inline-table, etc)
You need to use flex-wrap: wrap; to break the contents to the next line.
In saying that, since you are using fixed width for buttons, this is your best option in smaller screens.
body {
margin: 4em;
}
.demo {
background-color: #BFC;
box-sizing: border-box;
margin: 0;
padding: 1em;
position: relative;
}
.demo p:first-child {
margin-top: 0;
}
.other-stuff {
align-items: center;
display: flex;
flex-wrap: wrap;
}
button {
margin-right: 1em;
}
.square {
display: inline-block;
background-color: #699;
height: 80px;
margin-right: 1em;
min-width: 80px;
width: 80px;
}
.circle {
border-radius: 50px;
display: inline-block;
background-color: #969;
height: 100px;
margin-right: 1em;
min-width: 100px;
width: 100px;
}
<div class="demo">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="other-stuff">
<button>One button</button>
<div class="square"></div>
<button>Another button</button>
<div class="circle"></div>
<button>Don't click!</button>
</div>
I want a list of items that have a cross icon in the middle on the right hand side. To do this I used an anchor with some padding, floated right, and relatively positioned. The icon is a known width and height.
The items also have some text that should also be centered vertically. The additional problem is that this text has an arbitrary length and I do not want any overflow or wrapping. The text must not overlap the icon and must be allowed to go up to its edge.
The final piece of the puzzle is that the width of each item must grow to the size of its parent. The height should remain fixed.
Here is an example (https://jsfiddle.net/bj6806u6/3/)
div {
background-color: red;
padding-right: 50px;
display: inline-block;
width: 80%;
vertical-align: middle;
height: 50px;
}
p {
background-color: yellow;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
max-width: 100%;
}
a {
background-color: green;
float: right;
position: relative;
padding: 10px;
top: 6px;
right: -44px;
}
<div><p>This is a short paragraph.</p><a>X</a></div>
<br /><br />
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><a>X</a></div>
Removing the -44px; and it is a bit more obvious what the problem is although I still have no idea how to solve it. Surely this must be possible, it seems like such a trivial problem.
So my question: How to keep the cross from moving down? I want it to always look like the first div.
You could do it with positioning instead of floating. The outer div gets relative positioning and then the x gets absolute positioning. It's positioned down from the top 50% of the height of the container and then negative margined back up half of the height of the x to place it in the middle.
div {
background-color: red;
padding-right: 50px;
display: inline-block;
height: 50px;
position: relative;
max-width: 100%;
box-sizing: border-box;
}
p {
background-color: yellow;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
a {
background-color: green;
position: absolute;
padding: 10px;
top: 50%;
right: 4px;
margin-top: -19px;
}
<div><p>This is a short paragraph.</p><a>X</a></div>
<br /><br />
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><a>X</a></div>
Does this help?
div {
background-color: red;
padding-right: 50px;
display: inline-block;
width: 80%;
vertical-align: middle;
height: 50px;
position: relative;
}
p {
background-color: yellow;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
max-width: 100%;
}
a {
background-color: green;
float: right;
position: absolute;
padding: 10px;
top: 6px;
right: 10px;
}
I positioned the div relative and then made the icon an absolute float from the right of that. Now sure if this is what you mean...
https://jsfiddle.net/bj6806u6/7/
Look at the code, you don't need to set padding-right on div and right on a (1 & 3), set max-width of p to full width subtract 50px (2) to take space for the cross.
div {
background-color: red;
/* padding-right: 50px; */ /* 1 */
display: inline-block;
width: 80%;
vertical-align: middle;
height: 50px;
}
p {
background-color: yellow;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
max-width: calc(100% - 50px); /* 2 */
}
a {
background-color: green;
float: right;
position: relative;
padding: 10px;
top: 6px;
/* right: -44px; */ /* 3 */
}
<div>
<p>
This is a short paragraph.
</p>
<a>X</a>
</div>
<br />
<br />
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a>X</a>
</div>
Nothing much need to change add div position relative, change a tag position absolute and right -44px to 5px. Live FIddle
div {
background-color: red;
padding-right: 50px;
display: inline-block;
width: 80%;
vertical-align: middle;
height: 50px;
position: relative; /*add position relative */
}
p {
background-color: yellow;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
max-width: 100%;
}
a {
background-color: green;
float: right;
position: absolute; /*Change relatie to absolute */
padding: 10px;
top: 6px;
right: 5px;/*Change -44 to 5px*/
}
<div>
<p>
This is a short paragraph.
</p>
<a>X</a>
</div>
<br />
<br />
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a>X</a>
</div>
I have keep the width fixed and expanded the text on hover.Is this the solution your looking for?
div {
background-color: red;
padding-right: 50px;
display: inline-block;
width: 80%;
vertical-align: middle;
height:auto;
}
p {
background-color: yellow;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
max-width: 100%;
}
.wrapR
{
max-width:80%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.wrapR:hover {
background-color: yellow;
overflow: visible;
}
a {
background-color: green;
float: right;
position: relative;
padding: 10px;
top: 6px;
right: -44px;
}
If the width of "X" is known or fixed, then you can limit the maximum width of adjacent text to make sure "X" is not moved or overlapped.
div {
background-color: red;
padding-right: 50px;
display: inline-block;
width: 80%;
vertical-align: middle;
height: 50px;
}
p {
background-color: yellow;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
max-width: calc(100% - 30px);
}
a {
background-color: green;
float: right;
position: relative;
padding: 10px;
top: 6px;
right: -44px;
width:10px;
}
Here is my CSS and HTML code.
.column {
float: left;
width: 252px;
padding-left: 1px;
padding-bottom: 34px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul,
ol {
list-style-type: none;
}
.items li {
border-bottom: 1px solid red;
padding: 7px 16px 4px;
white-space: nowrap;
}
.items li.item--highlighted {
background: #f0ce78;
}
.items li .item__title {
font-size: 14px;
font-weight: normal;
text-transform: none;
font-family: "Roboto", sans-serif;
}
.items li .item__meta__separator {
display: inline-block;
margin: 0 5px;
}
.items li .red {
color: #ed1b2e;
}
.items li .info-bubble.info-bubble-bottom.info-bubble-bottom-left {
left: 70px;
}
.meta {
color: #9D9D9D;
font-size: 11px;
}
<div id="salesInvoice4Columns" class="column column-4" style="width:px;">
<ol class="items">
<li id="saleInvoiceLink0">
<h3 class="item__title">AUTO</h3>
<div class="meta">
<a id="saleInvoiceDocumentNumberLink" class="sidebarExternalLink" href="#">622790_150510_05101756067567567567565758DI</a> <span class="item__meta__separator">|</span>
27.08 09:16
</div>
</li>
<li id="saleInvoiceLink1">
<h3 class="item__title">AUTO</h3>
<div class="meta">
<a id="saleInvoiceDocumentNumberLink" class="sidebarExternalLink" href="#">201523443434343434072QU</a> <span class="item__meta__separator">|</span>
26.08 15:48
</div>
</li>
</ol>
</div>
The problem is that I want all the text which is after red bottom line replaced with ... or fade out. Something that will look nice. Can somebody suggest me how to make this? I have provided fiddle also. link
You can use text-overflow with css and a max-width to control it.
http://fiddle.jshell.net/bqhmkfux/2/
You need to add this class in the css:
.sidebarExternalLink {
max-width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: inline-block;
}
text-overflow: ellipsis; in combination with overflow: hidden is how you get the three dots ....
The other effect could be achieved with adding a gradient mask using a CSS pseudo element at the bottom of where the text is being displayed.
I've put together an example using a scrollable div with a linear gradient to white for you;
body {
background: white;
}
.wrap {
position: relative;
}
.txt {
height: 200px;
overflow: auto;
}
.txt:after {
position: absolute;
display: block;
bottom: 0;
left: 0;
right: 0;
height: 75px;
background: linear-gradient(transparent, white);
content: '';
}
<div class="wrap">
<div class="txt">
<p>Elit irure consectetur officia laboris nulla sit laborum irure consectetur qui nisi id duis est. Cupidatat est cupidatat consequat quis ad non laboris duis ut laboris adipisicing incididunt. Laborum consectetur tempor ipsum ea quis sit laborum ullamco amet id consectetur id exercitation officia. Est dolor elit laborum nulla officia elit do nisi ex occaecat. Veniam mollit ut proident ut quis incididunt amet sunt ullamco velit. Nulla nostrud cillum ea sint sunt. Id Lorem duis nostrud irure quis et fugiat. Cupidatat duis dolore Lorem incididunt tempor ipsum. Nulla adipisicing nisi enim ea do deserunt officia ut labore excepteur aliqua.</p>
<p>Elit irure consectetur officia laboris nulla sit laborum irure consectetur qui nisi id duis est. Cupidatat est cupidatat consequat quis ad non laboris duis ut laboris adipisicing incididunt. Laborum consectetur tempor ipsum ea quis sit laborum ullamco amet id consectetur id exercitation officia. Est dolor elit laborum nulla officia elit do nisi ex occaecat. Veniam mollit ut proident ut quis incididunt amet sunt ullamco velit. Nulla nostrud cillum ea sint sunt. Id Lorem duis nostrud irure quis et fugiat. Cupidatat duis dolore Lorem incididunt tempor ipsum. Nulla adipisicing nisi enim ea do deserunt officia ut labore excepteur aliqua.</p>
<p>Elit irure consectetur officia laboris nulla sit laborum irure consectetur qui nisi id duis est. Cupidatat est cupidatat consequat quis ad non laboris duis ut laboris adipisicing incididunt. Laborum consectetur tempor ipsum ea quis sit laborum ullamco amet id consectetur id exercitation officia. Est dolor elit laborum nulla officia elit do nisi ex occaecat. Veniam mollit ut proident ut quis incididunt amet sunt ullamco velit. Nulla nostrud cillum ea sint sunt. Id Lorem duis nostrud irure quis et fugiat. Cupidatat duis dolore Lorem incididunt tempor ipsum. Nulla adipisicing nisi enim ea do deserunt officia ut labore excepteur aliqua.</p>
</div>
</div>
Hope that helps you out!
This can be achieved by using overflow: hidden; and text-overflow: ellipsis;. The following changes are required:
Add overflow: hidden; to .meta, this tells it to cut off any content that goes outside its bounderies
Add text-overflow: ellipsis; to .meta, this will ensure that the cut off text is replaced with ellipsis
Add margin-right: -32px; to .meta this will offset the amount of padding set on .items li to ensure that the text is cut off at the end of the red line
.column {
float: left;
width: 252px;
padding-left: 1px;
padding-bottom: 34px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul,
ol {
list-style-type: none;
}
.items li {
border-bottom: 1px solid red;
padding: 7px 16px 4px;
white-space: nowrap;
}
.items li.item--highlighted {
background: #f0ce78;
}
.items li .item__title {
font-size: 14px;
font-weight: normal;
text-transform: none;
font-family: "Roboto", sans-serif;
}
.items li .item__meta__separator {
display: inline-block;
margin: 0 5px;
}
.items li .red {
color: #ed1b2e;
}
.items li .info-bubble.info-bubble-bottom.info-bubble-bottom-left {
left: 70px;
}
.meta {
color: #9D9D9D;
font-size: 11px;
margin-right: -32px;
overflow: hidden;
text-overflow: ellipsis;
}
<div id="salesInvoice4Columns" class="column column-4" style="width:px;">
<ol class="items">
<li id="saleInvoiceLink0">
<h3 class="item__title">AUTO</h3>
<div class="meta">
<a id="saleInvoiceDocumentNumberLink" class="sidebarExternalLink" href="#">622790_150510_05101756067567567567565758DI</a> <span class="item__meta__separator">|</span>
27.08 09:16
</div>
</li>
<li id="saleInvoiceLink1">
<h3 class="item__title">AUTO</h3>
<div class="meta">
<a id="saleInvoiceDocumentNumberLink" class="sidebarExternalLink" href="#">201523443434343434072QU</a> <span class="item__meta__separator">|</span>
26.08 15:48
</div>
</li>
</ol>
</div>
want all the text which is after red bottom line replaced with ... or
fade out.
Other answers already describe how to display an ellipsis.
I shall try to demonstrate how you can do a fadeout (the second part of your question). You can add an ::after pseudo-element to your li, and provide it a gradient background. Provide position: relative to the li and position:absolute to the pseudo-element.
Something like this:
.items li { position: relative; }
.items li::after {
content: '';
display: inline-block; position: absolute;
top: 0; left: 100%; height: 100%; width: 100%;
background: -webkit-linear-gradient(right, #fff, rgba(255,255,255,0.5));
}
Example:
.column {
float: left; width: 252px;
padding-left: 1px; padding-bottom: 34px;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
ul, ol { list-style-type: none; }
.items li {
border-bottom: 1px solid red; padding: 7px 16px 4px;
white-space: nowrap;
position: relative;
}
.items li.item--highlighted { background: #f0ce78; }
.items li .item__title {
font-size: 14px; font-weight: normal; font-family: "Roboto", sans-serif;
text-transform: none;
}
.items li .item__meta__separator { display: inline-block; margin: 0 5px; }
.items li .red { color: #ed1b2e; }
.items li .info-bubble.info-bubble-bottom.info-bubble-bottom-left { left: 70px; }
.meta { color: #9D9D9D; font-size: 11px; }
.items li::after {
content: '';
display: inline-block; position: absolute;
top: 0; left: 100%; height: 100%; width: 100%;
background: -webkit-linear-gradient(right, #fff, rgba(255,255,255,0.5));
}
<div id="salesInvoice4Columns" class="column column-4" style="width:px;">
<ol class="items">
<li id="saleInvoiceLink0">
<h3 class="item__title">AUTO</h3>
<div class="meta">
<a id="saleInvoiceDocumentNumberLink" class="sidebarExternalLink" href="#">622790_150510_05101756067567567567565758DI</a> <span class="item__meta__separator">|</span>
27.08 09:16
</div>
</li>
<li id="saleInvoiceLink1">
<h3 class="item__title">AUTO</h3>
<div class="meta">
<a id="saleInvoiceDocumentNumberLink" class="sidebarExternalLink" href="#">201523443434343434072QU</a> <span class="item__meta__separator">|</span>
26.08 15:48
</div>
</li>
</ol>
</div>
But, in order to display the date-time stamp properly, you will have to re-imagine your layout a little bit.
You can try this (using ellipsis)
CSS
.items li {
border-bottom: 1px solid red;
padding: 7px 0px 4px 16px;
}
.meta {
color: #9D9D9D;
font-size: 11px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
DEMO HERE
My content text is displayed under content div. Inside that div I have floated div block which have menu content with links.
Problem is that my content text appears under menu div block and I want to force content text to break arround menu block.
Live example is heee
http://jsfiddle.net/qYcWc/
#content {
display: inline;
float: left;
height: auto;
margin-top: 0;
padding: 5px;
width: 570px;
}
#content .subLinks {
background-color:gray;
border: 1px solid black;
height: auto;
margin-left: 330px;
margin-top: 60px;
padding: 10px;
position: absolute;
width: 220px;
}
<div id="content">
<div class="subLinks">
<ul class="subLinksMenu">
<li><a title="LinkOne" href="/">LinkOne</a></li>
<li><a title="LinkTwo" href="/">LinkTwo</a></li>
</ul>
</div>
<h1>Lorem ipsum dolor sit amet</h1>
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
Pretty pretty messy CSS, will take on point by point, if you don't care to read, here's a demo for you
1) position: absolute; is a culprit here, when you use position: absolute; the div flows out of document flow and hence your div has no idea to wrap around the box.
2) Why use display: inline; and float: left; together?
3) Use of explicit margins, not required!
4) Always wrap text inside an element, say p for semantic meaning, it says yes, the text is a paragraph
Easy Example
I suggest floating your subLinks to the right. This will let the content text wrap around it:
#content .subLinks {
background-color:gray;
border: 1px solid black;
padding: 10px;
margin:0px 0px 15px 15px;
position: relative;
float:right;
}
http://jsfiddle.net/qYcWc/2/
Updated fiddle: http://jsfiddle.net/qYcWc/5/
Try simplifying your solution:
#content {
height: auto;
margin-top: 0;
padding: 5px;
width: 570px;
}
.subLinks {
border: 1px solid black;
height: auto;
padding: 10px;
width: 220px;
float: left;
margin: 0 5px 0 0;
}