I have an inline-block element containing a floating element, and some text that is to flow around it:
<div style="background: yellow; display: inline-block">
<div style="float: left; width: 128px; height: 128px; background: cyan">Float</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br><br>
Vivamus blandit porta rhoncus.<br><br>
Integer egestas, lectus ac finibus sagittis, nisl diam scelerisque risus, id malesuada odio tortor in elit.<br><br>
Sed pellentesque ligula enim, at porta nibh viverra quis.<br><br>
Integer egestas, lectus ac finibus sagittis, nisl diam scelerisque risus, id malesuada odio tortor in elit.
</div>
On Internet Explorer, this renders as expected:
Firefox and Chrome render the same HTML differently:
Notice how in the Firefox rendering, the width of the inline-block is such that it precisely fits the text without the float. This causes lines that do not fit once the float is added in to break unnecessarily.
It would appear that Firefox and Chrome render this construction by first (1) computing the preferred width of the inline-block as if the float weren't there, (2) adding the float, and (3) laying out the flowing text around the float while using the width computed in (1) as the width of the inline-block.
The behavior I want here is the behavior implemented by Internet Explorer. Is there any way to achieve the same effect in other browsers such as Firefox and Chrome?
I think you should give a specific font-size to the text or else it will take default size as set in the browser which may be different. Also give some width to the wrapper element so that the text flow get same amount of space for all the cases.
Related
I'm trying to figure out this layout issue, and I'm not entirely certain it's possible, but I thought someone here might have an idea.
<div class="outer" style="width:500px;">
<div class="rightFloat" style="float:right; width:max-content; height: 50px; background-color: transparent;">
<P>
This is content that should be right float.
</P>
</div>
<div class="Content" style="background-color:#eeeeac;">
<div class="conditionalDiv" style="background-color: #eeacee; border: 2px solid black">
This is conditional content that should not push the right float content down. The pink background should not be under the float content.
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor pharetra quam id ullamcorper. Donec venenatis felis eu pulvinar porta. In non facilisis leo. Nulla ut lorem at enim tincidunt viverra. Vivamus id tempus eros. Fusce ultrices lectus sed ante hendrerit, et auctor tortor consectetur. Nam egestas sem tempor urna convallis, non maximus libero condimentum. Nullam non egestas neque.</p>
</div>
</div>
What I would like to do is to have the conditionalDiv (pink, conditional content that may or may not be present) only take up the space leading up to the rightFloat div. The rightFloat div should remain a consistent size (it's currently defined as width:max-content; I'd prefer not setting a fixed size if it can be avoided). In the referenced code, a working solution would have the border and background of the conditionalDiv not overlapping the space under the rightFloat div. (Float background should be white, with no border.)
The goal is that if the conditionalDiv is present, it's displayed beside the rightFloat div, and the main content continues below. Otherwise, if the conditional (pink) div is not present, the yellow content wraps around the rightFloat div.
I've tried a variety of ordering changes. I did a short test with flexbox, but I'm not sure a flexbox would work well in the conditional div situation.
Is there something I'm missing that would give me the behaviour I'm looking for?
For the purposes of this question:
dimension = `height` or `width`.
FC = Flex-container.
FI = Flex-item.
Scenario 1
It seems, in both Chrome & Safari, when an img's 'container' is specified in 1 dimension, the other dimension'll try to become a size so that the 'container' retains the aspect ratio:
Here's a demonstration of this concept:
img {
object-fit: cover;
width: 200px;
}
<img src="https://cdn.britannica.com/20/154120-050-78DE15C0/lemur.jpg"/>
Scenario 2
However, Safari's ability to do this seems to break when the img is a FI.
#fc {
display: flex;
}
img {
object-fit: cover;
width: 200px;
}
p {
margin: 0;
}
<div id="fc">
<img src="https://cdn.britannica.com/20/154120-050-78DE15C0/lemur.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis congue iaculis arcu sit amet aliquam. Quisque at auctor diam. Proin quis sem sed magna feugiat euismod non non ante. Sed at orci ac felis molestie pretium eget at nisl. Nam nec quam sit amet arcu molestie molestie. Maecenas sed eros non sem interdum egestas vitae eu sem. Quisque quis auctor sapien. Fusce risus odio, semper sed mattis quis, fringilla id arcu. Proin tempus finibus neque id ultrices. Nunc condimentum posuere ex, ut aliquam purus tempus quis.
</p>
</div>
Presuming my understanding of what's gone on above is correct...
Is there a work-around? (i.e. a solution that works for Safari?). If not, I should be able to write up the original problem and perhaps you can suggest another way to achieve my goal (my goal's basically to have an img side-by-side to a block of text - and if the vw gets small, and the text height shoots down and gets longer, I want the imgs 'container''s height to similarly increase and match the text's height / height of the FC (when there's only 1 flex-line).
P.S. There's some other Safari troubleshooting I have to do on my website. It seems to concern imgs. If anyone was aware of any resource they could pass on that notes some of the ways in which we're confined to write code (in order to take into account Safari - particularly imgs) that'd be appreciated.
Blink, Firefox, and WebKit contributors worked together the last few months on improving flex item images.
Chrome 90+ and Firefox 89+ have very few known incompatibilities (sometimes when images have % width; compare the code snippet below in Chrome vs Firefox).
Safari Tech Preview 123 made a lot of progress compared to the previous Safari stable release but still has a few more known issues.
If you have a flexbox with image items that renders differently across browsers, please let us know. Don't worry about duplicate issues, but shorten the demonstration cases if you can. If you think the buggy browser is
Safari: add a comment with example on this bug
Chrome or Firefox: add a comment with example on this issue
If your comment is not acknowledged after 2-3 days, respond with a link and I'll triage.
<div style="display: flex; width: 100px;">
<img src="//placekitten.com/100" style="width:100%;">
<div style="width:100px; background: orange"></div>
</div>
I am not new to HTML or CSS (but I can't claim to be an expert either) and for the life of me what seems to be a simple "Float" in a div tag has completely perplexed me.
I assumed a simple:
<div style="float: left;"><img src="....>Text Text text<br>Text Text Text</div>
Would place my image on the left and by default start wrapping my text on the right starting at the top right of the image but instead the wording is starting at the lower right of the image and wrapping underneath. Given this is my first post I am unable to insert screenshots but I can send them along if needed.
I have done the code in the following manner given I have a stylesheet but I tried applying the style in the HTML as well (as per the above example) with the same result:
CSS
.img-float-left{float:left;}
HTML
<div class="img-float-left"><img src="....>Text Text text<br>Text Text Text</div>
What the heck am I doing wrong? I also tried applying this class to the IMG tag but it produced the same result whereby the text is sitting under the image. I have searched high and low but can't seem to find the answer however I know I'm probably overlooking something simple.
You're correct to try to float the image instead of the parent div.
Put the img-float-left class on the img instead.
The img tag also isn't closed, and the src attribute is missing a closing quote, but that may just be a copy/paste error. Would help to see your actual code.
Using just float: left on the img works fine given this example.
JSFiddle
Depending on how you are using the div in your layout, you need to float the img within the floated div and keep the content of the div within the same block formatting context by using overflow: auto.
The result is that the div forms a self-contained block that contains the image and the
text, and the div, can then be floated left or right as needed in the layout.
div {
float: left;
overflow: auto;
border: 1px dotted blue;
width: 50%;
}
div img {
float: left;
padding: 0 10px 10px 0;
}
<div><img src="http://placehold.it/100x100">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis velit ut neque tempor quis cursus tortor suscipit. Curabitur rutrum magna vitae arcu pharetra eget cursus ante accumsan. Nunc commodo malesuada adipiscing. Pellentesque consequat laoreet sagittis. Sed sit amet erat augue. Morbi consectetur, elit quis iaculis cursus, mauris nulla hendrerit augue, ut faucibus elit sapien vitae justo. In a ipsum malesuada nulla rutrum luctus. Donec a enim sapien. Sed ultrices ligula ac neque vulputate luctus. Suspendisse pretium pretium felis, in aliquet risus fringilla at. Nunc cursus sagittis commodo.</div>
first of all you are floating the <div> tag and it place the container of image( witch is div on the left side,not the image)
instead of floats you can use align for <img> tag. here is how to use it.and here is a fiddle that I create for you.
<div class='image-left'>
<img src='http://placehold.it/100x100'/>
text text text text text text text text text text text text ......
</div>
css:
.image-left img {
vertical-align:top
}
I have a fixed-height div containing a child textarea, also with a fixed height.
In chrome, if both the div and the textarea have the same height, the div will have a scrollbar (if set to overflow:auto ). That doesn't happen in firefox, and it doesn't happen either if you nest two div elements.
Here is a simple example:
<div style="height:100px; margin:0; padding:0; overflow:auto">
<textarea style="height:100px; margin:0;padding:0;border:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut augue metus, pulvinar in accumsan ut, malesuada quis sapien. Curabitur eleifend massa ac arcu congue, eu aliquet enim porta. Integer tristique tristique placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum, arcu eget pulvinar sodales, quam metus pharetra felis, vel commodo enim eros a eros. Maecenas placerat ullamcorper odio, et viverra tellus tempor non. Proin iaculis non eros id convallis. Nullam tellus mauris, congue ut laoreet sit amet, mollis tempus lacus. Duis lacinia commodo convallis. Suspendisse mollis lectus a tristique mattis. Nullam gravida dictum purus a sagittis. Cras in sapien nec nulla porta consequat.
</textarea>
</div>
In a fiddle: http://jsfiddle.net/MBn7Y/
If you replace the textarea element by a div with the same content and properties, the issue isn't present.
I would like to know why this is happening. Setting the overflow to hidden removes the div's scrollbar, but my particular case is a bit more complex, and hiding the overflow doesn't look very good.
My version of firefox is 24.0 and chrome is 29.0.1547.76, both running on linux mint 13. I have the same issue on chromium 28.0.1500.71
Thanks in advance to anyone with an explanation!
Edit:
Here is a screencap of the fiddle: http://i.imgur.com/CcW2pAK.png
I wish to remove the far right scrollbar, not the textarea's. It is indeed normal for the textarea to get a scrollbar since the text is long. What I don't understand is why does the parent div get a scrollbar too ?
The problem also only happens with inline style, if you set the size with classes the issue isn't happening. (example: http://jsfiddle.net/KPjak/ )
In my case, the height is set by javascript and is variable, so a class isn't a solution.
I would say it has something to do with a bottom margin or padding with the textarea that's being applied outside of the css. As to why this happens--no clue, ask your father.
It seems to be a 5% margin or padding. See my fiddle. http://jsfiddle.net/MBn7Y/6/
I widdled the height down by % until it didn't show the scrolls in the parent, came to 95%;
Last version shows margin-bottom: -5%; and works while matching full height of parent elements.
**CSS**
textarea {
margin-bottom: -5% !important;
}
Ok, I found the cause of all of this. There is a bug reported in webkit here: https://bugs.webkit.org/show_bug.cgi?id=32731
The explanation can be found here:
In regards to CSS, an <textarea> is a replaced element. The HTML specification doesn't define where the baseline of a <textarea> is. So different browsers set it to different positions. For Gecko, the <textarea> baseline is set on the baseline of the first line of the textarea's first line, on another browser it may be set on the bottom of the <textarea> box. Don't use vertical-align: baseline on it, as the behavior will be unpredictable.
A solution can be to set the textarea to display:block found here
Or to set the parent's line-height to 0 found here
Thanks a lot to everyone helping me find the answer to this!
You can target the removal of a scrollbar by using the following snippet of CSS:
element::-webkit-scrollbar {
display: none;
}
I duplicated this within the following fiddle (had to replace some of the inline styles with classes): http://jsfiddle.net/MathiasaurusRex/MBn7Y/3/
I have the following scenario:
a two column layout made up of divs A and B (in that order) wrapped with a wrapper div centered at the page. I want B to stretch horizontally to 100% - length_of_A (length of A changes depending on its content), and also for both divs to stretch vertically to fill the height. If A is longer than B then B will stretch, otherwise- A will stretch.
I tried experimenting with width and height and position and overflow values, but couldn't make it work. How do I achieve something like this?
Unfortunally there is no cross-browser solution I know to do that using divs, but you could do that using tables like follows:
<table style="width: 100%; border-collapse: collapse;"><tr>
<td id="A"> <h1 style="white-space: nowrap;">...content...</h1> </td>
<td id="B"> ...content... </td>
</tr></table>
You should apply the "white-space: nowrap;" to all those elements that should rule the A column width.
This should do the trick in all common browsers.
Working demo (uses JavaScript): http://vidasp.net/tinydemos/layout-demo-2.html
However, you cannot set padding to the DIVs that represent the columns.
Also, for some reason setting exact widths doesn't work in IE - that's why I had to leave out 1px on the right.
I had same problem with my page but with 3 divs. My solutions was to use javascript code to get width and height of the page offsetHeight and offsetWidth.
For example use code bellow to get half of some element's width.
var midpoint = document.getElementById("MyElementId").offsetWidth/2; .
I think this is the simplest solution, only the left column may have a bug in IE6 if the content of the right column is longer. And also when the content of the left column is longer than the right column, the text wont fit. But you can fix this with a background image so you wont see that the text doesn't fit the div.
<style type="text/css">
* {
margin:0;
padding:0
}
#page {
background:red;
}
#left {
width:320px;
float:left
}
#right {
background:blue;
position:relative;
overflow:hidden
}
</style>
<div id="page">
<div id="left">
<ul><li>Lorem ipsum</li><li>Dolor sit amet</li><li>Consectetur adipiscing elit</li><li>Lorem ipsum</li><li>Dolor sit amet</li><li>Consectetur adipiscing elit</li><li>Lorem ipsum</li><li>Dolor sit amet</li><li>Consectetur adipiscing elit</li></ul>
</div>
<div id="right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, turpis nec mattis rhoncus, diam arcu dignissim turpis, vel interdum libero mi vitae lorem. Mauris placerat cursus odio at imperdiet. Integer pulvinar ante quis justo mattis mattis. Maecenas interdum mollis lacinia. Cras odio erat, pellentesque eu condimentum ut, ultricies vel neque. Morbi tristique diam elit, eget sagittis est. Nullam vestibulum elit sit amet odio dictum sodales. Duis elementum mollis elementum. Nulla purus elit, suscipit auctor sagittis eget, pretium vitae est. Suspendisse potenti. Integer sit amet ipsum sem. Vestibulum quis auctor leo. Suspendisse at elementum diam.</p>
</div>
</div>
(Tested in Safari 5, IE6, IE7 and IE8.)