I'm trying to get two divs to float to opposite sides of the page, with text flowing between them. The top of the second (left-aligned) div should be even with the bottom of the first (right-aligned) div. The code below works fine in FF, Chrome, Opera, etc. fine, but they do not clear properly in IE. Both divs appear at the top of the text.
If I move the left-aligned div low enough within the text, it works fine in IE, but that's not really a sustainable solution.
I've found multiple pages on IE CSS float bugs, but I haven't found anything speaking directly to this.
CSS
div {
width: 200px;
margin-top: 10px;
border-style: solid;
border-width: 1px;
position: relative;
}
.wrapper {
width: 600px;
border-color: #FF0000;
}
.right {
float: right;
border-color: #00FF00;
}
.left {
float: left;
clear: both;
border-color: #0000FF;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="float.css" />
</head>
<body>
<div class="wrapper">
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla pretium tempor leo. Vivamus mi risus, dapibus ac,
consectetur quis, pellentesque eget, sem.
</div>
<div class="left">
Proin malesuada. Ut vel lorem. Cras rhoncus nisl accumsan
turpis tristique consequat. Sed lacinia ligula at nibh.
Morbi in quam. Morbi commodo nibh.
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla pretium tempor leo. Vivamus mi risus,
dapibus ac, consectetur quis, pellentesque eget, sem.
Maecenas est dui, imperdiet nec, fermentum ut,
pretium a, orci. Quisque hendrerit interdum orci.
Nulla sit amet risus non enim ultrices bibendum.
Aenean arcu purus, rhoncus at, vestibulum vel,
volutpat et, nunc. Integer eget risus eget purus viverra
congue.</p>
<p>Nullam vel libero ut purus semper ullamcorper.
Pellentesque mattis tincidunt odio. Nullam pulvinar
orci at dolor. Sed volutpat eros ac elit.
Praesent porttitor libero sed felis. Vivamus lobortis
pellentesque diam.
Proin laoreet massa ac metus. Integer faucibus lorem
molestie nibh. Integer id massa. Integer ligula ipsum,
pellentesque id, interdum at, pretium eget, orci.
Proin malesuada. Ut vel lorem.</p>
</div>
</body>
</html>
IE7 and IE6 have a variety of problems with elements that have both float and clear on them. In IE7, using clear on an element with float only clears the float below other floats floated in the same direction.
A modified version of the easyclearing fix may do the trick, but don't get your hopes up. See this page for details: New clearing method needed for IE7?.
Bottom line is that you're probably not going to get this to work in IE6/7 without cheating: moving the div down in the text, embedding the divs in paragraphs, etc.
I'm fairly sure this is one of those rare bugs in ie6 that doesn't have a pure CSS solution.
Try using the ie7 javascript - it may fix the problem for you: http://code.google.com/p/ie7-js/
Related
I have an element on which I use a pseudo-element (::after) to style an overlay. For technical reasons I cannot/don't want to use another element (e.g. div) to add the overlay. The pseudo-element is absolutely positioned and appears in front off the actual element. I was surprised to see that the text inside the div is still selectable, "through" the pseudo-element. I've played around with z-index and pointer-events, without success. See this fiddle for an (external) example.
Why is this happening? Why can the text still be selected with the mouse? Is there any other solution apart for user-select?
div {
position: relative;
}
div::after {
position: absolute;
content: '';
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.4;
background-color: black;
}
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sollicitudin dui nec neque rutrum, eu auctor nulla accumsan. Quisque non eleifend nibh. Fusce aliquet imperdiet odio vitae pretium. Nam tincidunt mattis ante, nec consectetur diam maximus
vel. Fusce at lectus porttitor, feugiat purus sed, porta felis. Morbi tempus ante a orci finibus rhoncus. Nullam a porta enim. Sed id eros convallis, consectetur turpis a, gravida nunc. Nullam sed dui interdum diam placerat suscipit sit amet nec mi.
Maecenas ultricies metus massa, id vestibulum nisi posuere facilisis. Aliquam erat volutpat. Quisque blandit condimentum augue. Nullam pulvinar turpis libero, id luctus dolor ultricies quis.</p>
</div>
As for your question:
Why is this happening?
It's seems to due to the fact that generated content itself is not selectable. see How can I make generated content selectable?)
Try selecting the text in the following snippet:
div:before {
content: 'generated content - before... ';
}
div:after {
content: '...generated content - after';
}
<div>Only content of div is selectable</div>
So apparently, selection is about selecting only elements which appear in the DOM and according to the CSS 2.1 spec:
Neither pseudo-elements nor pseudo-classes appear in the document
source or document tree.
So when selecting on the overlay - the overlay is ignored, and instead the text in the div is selected
That being said, the spec here seems to say that generated content should be selectable
Generated content should be searchable, selectable, and available to
assistive technologies
...but to my knowledge that bit of the spec has not been implemented in any browser.
If you don't want to use user-select: none an alternative can be to set as transparent the ::selection.
p::selection {
background-color: transparent;
}
This doesn't just hide the selection but also make it impossible to highlight. It is compatible with most of the browser except mobile ones and Firefox (you have to use ::-moz-selection).
div::after {
position: absolute;
content: '';
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.4;
background-color: black;
}
p::selection {
background-color: transparent;
}
p::-moz-selection {
background-color: transparent;
}
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sollicitudin dui nec neque rutrum, eu auctor nulla accumsan. Quisque non eleifend nibh. Fusce aliquet imperdiet odio vitae pretium. Nam tincidunt mattis ante, nec consectetur diam maximus
vel. Fusce at lectus porttitor, feugiat purus sed, porta felis. Morbi tempus ante a orci finibus rhoncus. Nullam a porta enim. Sed id eros convallis, consectetur turpis a, gravida nunc. Nullam sed dui interdum diam placerat suscipit sit amet nec mi.
Maecenas ultricies metus massa, id vestibulum nisi posuere facilisis. Aliquam erat volutpat. Quisque blandit condimentum augue. Nullam pulvinar turpis libero, id luctus dolor ultricies quis.</p>
</div>
How can I hide the overflow of this image without removing it from the flow? If I made it a background image or positioned it absolutely, the text would flow right through it, and I don't want that. Applying overflow:hidden to the parent only expands the height of it to contain the whole image. What I want is:
The image to float right
The text to wrap around the image
The height of the section to be determined by the height of the text only
The image to be cropped if necessary
https://jsfiddle.net/krishunt/e7mzo54c/
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
body {
font-family: helvetica;
color: #333333;
}
section {
background-color: #E3E2DE;
padding: 20px 30px 30px 30px;
max-width: 1200px;
}
.pull-right {
float: right;
margin-left: 20px;
}
</style>
</head>
<body>
<section>
<img class="pull-right" src="http://thomasprintworks.com/temp/copier.png" />
<h2>Title of Section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id.</p>
</section>
</body>
Add overflow:hidden to the <section>, this should work!
I need some help with hiding my horizontal scrollbar and still able to scroll. I have used webkit but does not work in IE and firefox. I have seen a lot of help with vertical scrollbar, but does not work with horizontal. Any help?
Update:
I have created a JSFiddle to show my problem. I want to hide the horizontal scrollbar and still able to scroll without using
::-webkit-scrollbar {
display: none;
}
http://jsfiddle.net/o1xoh9w8/1/
Here is how you do it, I have tested this in Chrome, IE, Firefox, Opera, Safari(Windows) and Edge
<h1>You can scroll with mouse wheel</h1>
<div id="box">
<div id="content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
h1{font-weight:bold;font-size:2em;} /* ignore only for header */
/* *********************** */
div#box{
height:200px;
width:300px;
overflow:hidden;
border:1px solid black;
padding: 10px;
}
div#content{
height:200px;
width:326px;
/*
* Uncomment to see scrollbar
width:300px;
*/
overflow:auto;
}
Here is a JSFiddle: http://jsfiddle.net/JoshMesser/VUSuZ/
Credits go to creator of the JsFiddle
EDIT:
For vertical it is just a matter of changing the height. What you are doing is you are just pushing the scroll bar outside of what user can see, so to them its not there, while in reality it is there hidden behind elements. Here is a JS Fiddle based on my last one. You will see I just forced p to be in single line to get horizontal scrolling and then increased the height to hide the scroll-able bar.
http://jsfiddle.net/VUSuZ/575/
I used a fixed height approach.
Note: this approach can help only in specific cases.
#container1{
height: 50px;
/* Just for presentation. Can be removed */
border: 1px solid red;
/* Hides content outside this container */
overflow: hidden;
}
#container2{
/* Height is significantly greater than the height of container#1 to hide
any possible scroll */
height: 100px;
overflow: auto;
white-space: nowrap;
}
<div id="container1">
<div id="container2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam hendrerit, ante laoreet mattis blandit, arcu nisi blandit felis, et molestie justo lacus et sem. Nunc tempor tellus sit amet eleifend tristique. Integer eget condimentum lectus, nec viverra risus. Nullam leo lectus, placerat vitae porta eget, auctor et nisi. Suspendisse feugiat in lacus accumsan tincidunt. Fusce pulvinar accumsan sem sit amet finibus. Curabitur volutpat mi vitae eros mattis congue. In ut sem eu tellus egestas lobortis vitae eu felis. Maecenas sodales, nisl eu bibendum vulputate, neque leo finibus odio, sit amet bibendum libero dolor sed diam. In molestie magna vitae dui vulputate, eu consequat dui ullamcorper. In hac habitasse platea dictumst. Vestibulum pulvinar, mi quis mollis pulvinar, metus justo aliquet arcu, vel venenatis ipsum dolor at sapien. Sed ac odio bibendum, feugiat nibh at, viverra mi. Morbi sem nisi, ultricies non nulla pretium, gravida malesuada neque.
</div>
</div>
(My case is horizontal scrollable buttons container for mobile screens - the buttons are stuck to the above block (+ margin) and have fixed height)
I think you do not want to use
::-webkit-scrollbar {
display: none;
}
Because it will hide all the scroll bars.
A better way to hide the scroll bar but still enable scrolling in a particular container will be to follow the following example:
HTML
<div class="container">
<table>
<tbody>
<tr>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>
</tbody>
</table>
</div>
CSS
.container {
overflow-x: auto;
white-space: nowrap;
}
.container::-webkit-scrollbar {
display: none;
}
Is it posible to make text left aligned on a slanted line? it's alignement should follow the slanted slanted image with required support for IE9+?
My example code :
img {
display: block;
float: left;
transform: rotate(-5deg);
margin: 0 15px;
}
<div>
<img src="http://placehold.it/150x250&text=img" alt="image" />
<p>Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu,luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, paragraph.</p>
</div>
Using LESS
You guys made me think a bit more outside of the box, so I came out with my own ugly solution.
My idea is to add a bunch of extra square elements and calculate its size:
.loop(#i) when (#i > 0){
.loop((#i - 1));
.space#{i}{
width: floor(#i*#hSize/(1/tan(5deg)));
}
}
#hSize: 15px;
.space {
float: left;
clear: left;
width: #hSize;
height: #hSize;
}
HTML:
<p>
<span class="space space1"></span>
<span class="space space2"></span>
<!-- (...) -->
<span class="space space11"></span>
Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, paragraph.
</p>
Proof of concept: http://codepen.io/Tymek/pen/jEypOX?editors=110
#chipChocolate.py, it was just a matter of principle for me NOT to use JavaScript for this. If anyone wants to write JS/jQuery code based on my solution, you're welcome. Please share it here afterwards.
WARNING: The shape-outside property should not be used in live projects1. This answer is here just to show how the desired output can
be achieved with this property.
Here is an example using the shape-outside property (modern webkit browsers only) :
DEMO
img {
display: block;
float: left;
transform: rotate(-5deg);
margin: 0 20px;
-webkit-shape-outside: polygon(0 3%, 85% -3%, 100% 97%, 15% 103%);
shape-outside: polygon(0 3%, 85% -3%, 100% 97%, 15% 103%);
}
<div>
<img src="http://placehold.it/150x250&text=img" alt="image" />
<p>Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu,
luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in,
paragraph.</p>
</div>
1The CSS Shapes Module Level 1 actually (mai 2016) has the status of "Candidate Recommendation". As this means it is a work in progress, it may change at any moment and therefore should not be used other than for testing.
The same layout could be achieved with the shape-inside property and specify a containing box for the text but no browser I know of supports this property today.
For a cross browser approach please see Tymek's answer.
img {
display: block;
float: left;
transform: rotate(-5deg);
margin: 0 15px;
}
p {
transform: skew(6deg);
font-style: italic;
}
<div>
<img src="http://placehold.it/150x250&text=img" alt="image" />
<p>Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu,
luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in,
paragraph.</p>
</div>
I can't give you a code example, this is more complicated than a skew transform.
You must parse the text and the related DOM contained in it and look for each new lines of text (not br or \n but each first character of every rendered line).
With this information you can add a padding-left calculated from the images position and dimension.
so here is the problem i'm trying to solve, i want to use a background image that is 500px wide for my divs that has a drop shadow on the right edge however i want the text to stop and wrap after 475px and i still want the entire image to show up to include the dropshadow. is there anyway to accomplish this?
html 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>Untitled Document</title>
<link href="tech/sandbox2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page1top">top</div>
<div id="page1mid">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales, sapien vel porttitor eleifend, dui ante rutrum ligula, sed volutpat urna sapien vitae nisl. Vestibulum iaculis ligula elit, in dapibus urna. Aenean ullamcorper varius porttitor. Etiam facilisis ipsum vitae nulla gravida convallis sollicitudin nibh gravida. Fusce in turpis magna, at tempus lorem. Nulla sed mi libero. Aenean vulputate ultricies enim, sit amet vulputate arcu condimentum sed. Duis arcu metus, lobortis nec commodo non, suscipit semper lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sit amet condimentum elit. Nullam interdum elit sapien. Curabitur lorem ligula, aliquam quis rhoncus ac, egestas vitae tellus. Phasellus quis massa quis eros gravida mollis posuere nec mi.</div>
<div id="page1btm">this is the bottom</div>
</body>
</html>
css code:
#charset "UTF-8";
/* CSS Document */
#page1top{
position:relative;
background:url(../media/page1top.png) no-repeat;
width:500px;
}
#page1mid{
position:relative;
background:url(../media/page1mid.png) repeat;
overflow:visible;
width:500px;
height:auto;
padding:30;
margin:30;
top:-10;
}
#page1btm{
position:relative;
width:500px;
background:url(../media/page1btm.png) no-repeat;
}
Use nested <div> tags. While #Robusto's suggestion is not incorrect, it is not semantically desirable. It mixes a design element with a style descriptor. Your block elements should determine such design spacing, and then use your element styles to control the margin/padding of the text itself.
CSS:
#page1top{
position:relative;
background:url(../media/page1top.png) no-repeat;
width:500px;
}
#page1mid{
position:relative;
background:url(../media/page1mid.png) repeat;
overflow:visible;
width:500px;
height:auto;
padding:30;
margin:30;
top:-10;
}
#page1btm{
position:relative;
width:500px;
background:url(../media/page1btm.png) no-repeat;
}
.content_container{
width: 475px;
overflow: inherit;
}
HTML:
<div id="page1top">top</div>
<div id="page1mid">
<div class="content_container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales, sapien vel porttitor eleifend, dui ante rutrum ligula, sed volutpat urna sapien vitae nisl. Vestibulum iaculis ligula elit, in dapibus urna. Aenean ullamcorper varius porttitor. Etiam facilisis ipsum vitae nulla gravida convallis sollicitudin nibh gravida. Fusce in turpis magna, at tempus lorem. Nulla sed mi libero. Aenean vulputate ultricies enim, sit amet vulputate arcu condimentum sed. Duis arcu metus, lobortis nec commodo non, suscipit semper lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sit amet condimentum elit. Nullam interdum elit sapien. Curabitur lorem ligula, aliquam quis rhoncus ac, egestas vitae tellus. Phasellus quis massa quis eros gravida mollis posuere nec mi.</p>
</div>
</div>
<div id="page1btm">this is the bottom</div>
Keep the div at 500px wide and put the text in a p tag inside it, setting the p tag to 475px in width.
<div class="shadow-div" style="width:500px">
<p style="width:475px">
Text here blah blah blah.
</p>
</div>
If you declare units on your padding, this would probably happen for you automatically. Change padding: 30; to padding: 30px;. If you need more padding, just adjust the number. If you don't want the padding to be even on each side, write it like this: padding: 10px 25px 10px 10px;. The measurements travel clockwise so it goes top, right, bottom, left;
Can you modify your HTML?
<div class="fancybackground"><div class="text">something</div></div>
CSS:
.fancybackground { background: url(...) }
.text { margin-right: 25px; }