Looks OK to me in Chrome, Version 55.0.2883.87 m (latest)
See attachment.
Thanks, but no, your image shows the DIV doing the *wrong* thing. It's supposed to have a left border with radius corners, lined up vertically with the text above and below. The DIV is a container, _it's_ the thing that should align. Not the text inside it, which is what's happening. It... uh, I have an idea. Back in a minute.
Edit: OK, now I really think it's a bug. Your example makes 3 browsers.
.hilite-aside {
background-color: #f5f5f5;
border: 2px solid #e5e5e5;
border-radius: 15pt;
padding: 10pt 15pt 10pt 15pt;
margin: 15pt 0 15pt 200px; <--- changed the left margin to 200px. See attached pic of result.
}
The pic is 200px wide also. Now the radius div edge appears, exactly on the pic edge. So... what's happening is that with a float:left image, a div is extending its left margin to the left edge of the viewport, NOT the right-hand edge of the image, as it should.
I just can't believe such a basic bug could still exist, in multiple browsers. Must be something I don't get, surely?
Add display: table;
attribute to the dodgy div perhaps? :)
Ah ha! Thanks.
.hilite-aside {
background-color: #eee;
border: 2px solid #aaa;
border-radius: 15pt;
padding: 10pt 15pt 10pt 15pt;
margin: 15pt 0 15pt 100px;
display: table; <--- added this.
}
And it works, though now the 4th value in the margin: attribute does really weird things.
Now to go read up on _why_ it works. I have never used 'display' before, don't know what it does. Curious to see if there's any 'explanation' for why the plain code fails without that.
I usually prefer bruteforce way by having tree of div's inside, so if you need to move whole block, you can adjust all related at once. Surely real web-designers will cringe though. :blah:
Sometimes you have to. For instance if the stuff beside a floated image also contains more floats... time for lots of div's.
For my own site's html I don't much care if stuff breaks for a few browsers. But this thing is for a commercial product, and has to not break.