Continue div element past horizontal overflow - html

A JSFiddle of it: http://jsfiddle.net/24tL8mkq/3/
I want the red highlighting to continue all the way across the box.
Right now, it's set-up such that:
<div style='width: 500px; overflow: auto; border: 1px solid black; padding-top:-5px;'>
<pre id='pre_1'>
<!-- code box -->
</pre>
</div>
with the relevant css (this is the CSS that I want to extend across the entire div, through the overflow) being:
.bad {
background-color: palevioletred;
width: 100%;
}
I get that I can't use width: 100% as that'll only extend to the right most side of the overflow always, but I can't set a static width as I don't know what the size of the box could be.
I'd really prefer to keep this a HTML/CSS solution if possible just to make this as portable as possible.

Interesting problem. The following works for me in the latest Firefox, Chrome and IE11, though I'd consider this somewhat "experimental" - definitely should be further tested if you need to support a broader range of browsers.
http://jsfiddle.net/24tL8mkq/5/
pre {
display: table;
}
pre > div { display: flex; }
I wish I could tell you why this works, but I don't know. I wasn't able to find another combination that works, however. My guess: setting the pre to display: table makes it so the width will go wider than 100% (500px), as tables will do (when their children are wider than the table). Setting flex on the div children is filling the available space since all the children should be equal width.

Related

Vertically aligning content to middle when outer containers are height: 100%

So I am vertically aligning content to middle with ghost element method:
html {height: 100% } body {min-width: 100% }
.block {
text-align: center;
height: 600px;
}
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
.centered {
display: inline-block;
vertical-align: middle;
}
It's a straightforward method, I get the content in the middle but I really dont want any fixed heights, I want it to be dynamical. Though I added height: 600px in code sample, because it gets it to seemingly work but not dynamically.
When I add a fixed height I get what is on the left side of the picture but I also want it to be like right side when the viewport height is smaller so it would cut the top and bottom empty spaces, which can't be done with fixed height.
So any other methods or solutions that work good are appreciated!
Also IE8 support would be also nice.
Update: https://jsfiddle.net/duthzvyo/
Make it so when you squish the viewport height that no scrollbar happens the grey box so to speak squishes as well.
If you want to use purely CSS (i.e. not scripting the width dynamically with JavaScript in your current setup) then I'd recommend using the newer flex-box model, which is a lot more powerful.
See some tutorials on flex-box.
Other solutions (potentially advanced because they require JavaScript coding, but easier in concept if you know how to code in JavaScript) include Famo.us and (work in progress) infamous.
Also check out the following, based on Cassowary Constraint Solvers:
https://gridstylesheets.org/
https://github.com/IjzerenHein/autolayout.js
These last two libraries make it really really easy to center elements (among other things) within dynamic layouts, where you define your layout rules in a declarative manner similar to CSS, but they're much better than traditional CSS in my humble opinion.
I'd recommend checking those tools out. :)

The expanding <div> conundrum

I am just learning HTML and CSS (JavaScript will be next.) I am developing a website on which I have two boxes (defined as <div>s) side by side. They have different horizontal sizes, but each has "height: 1000px".
The large one sits right of the narrow one, and is defined by
<section style = "width:900px; height: 1000px; margin 10px; padding: 20px; background: #BBD1FF; display: inline-block; vertical-align:top;">
I added text within the confines of both boxes, and everything was fine. Then I added more text in the rightmost box, and the box seems to have expanded it's vertical dimension. The original and the new text in the box don't come close to filling the box, so what is going on here? I can't find any property of <div> which seems to relate to this.
Okay so i've taken a guess to what I think your trying to do. Basically, add max-width to your divs to prevent them from expanding. Here's a JSFiddle with something simple what I think your looking to do.
.div-one--left {
height: 1000px;
max-width: 50%;
min-width: 50%;
background: blue;
float: left;
display: block;
}
Also, when dealing with widths. Its good practise to always use percentages. You can't build responsively if your using pixels as widths (but thats off topic slightly).
http://jsfiddle.net/63617aLj/

How to make inline expanding header with ellipsis overflow

I've got the following layout:
<article>
<h3><a>...</a></h3>
<h3><a>...</a></h3>
</article>
The first header has dynamic content, the second has a fixed width set.
I'd like the headers to be inline, and when the content of the first one grows, for it to stretch until the sum of both headers' widths is 100%, and then for overflow text to be ellipsis.
I've been running into the problem of once I make the first div inline or float, its width no longer stays contained by the parent, making text overflow everywhere, or with overflow set to hidden, I can't get the second header to be positioned on the same line with it.
P.S.: Unfortunately this will need to support as many old browsers as possible, back to I.E. 6 would be the best (/barf) but whichever solution reaches as far back as possible will be the most valuable. Thanks you!
If I understood the question right, it's easily achievable with flexible boxes:
article {
display: inline-flex;
width: 100%;
}
article > h3:nth-child(1) {
flex: 1;
}
article > h3:nth-child(2) {
flex: 0 0 150px;
}
a {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
JSBin.
If I'm understanding the issue properly, the following JSFiddle may have the solution:
http://jsfiddle.net/modenadude/QntUm/2/
The code:
keeps the two <h2>s inline
if the width of the first <h2> gets wider than the width of the second <h2> + <article>'s width, it adds the ellipses to the first <h2>
I set max-width on the <h2>s (to 50%) just in case, and added outline to show the widths clearly.
I used jQuery to figure out the widths of the <h2>s onload, but the same can be done with pure JS by using getElementByID (I can set that up too if you'd like). And of course it was designed to be used on only two <h2>s and one <article> so simple editing could make it more expandable.

Div within a Div

I've got this problem, I've placed a div within a div, I've positioned the "title" to be height 50, and then "navbar" below it, so I've put height 100% though the thing is, its not staying within the div, its actually straying away from and out of the div and making a scrollbar appear.
I would love "site" to hog the walls and then all the other div fit in that div.
<div id="site">
<div id="title">TitleBar</div>
<div id="navbar">NavBar</div>
<div id="frame">FrameBar</div>
</div>
body{
margin: 0;
}
#site{
position:absolute;
width: 100%;
height: 100%;
*border: 1px solid #333;
}
#title{
border: 1px solid #333;
height: 50;
}
#navbar{
border: 1px solid #c38a8a;
width: 200;
height: 100%;
}
I've found an image that shows something similar.
http://img176.imageshack.us/img176/4637/picture1zb1.png
that's because 100% height actually means "use the same height as the container".
But I didn't quite get all your requirements for this layout, if your navbar is a navigation bar, it should be designed in a way that allows scrollbars to appear when the content is too big.
But I think you're going for the wrong structure to accomplish this, is there any actual reason you want a wrapper div? I've created a fiddle on this, check if this is closer to what you wanted: http://jsfiddle.net/6g6HV/2/
This other one is yours, in case you wanna play with it: http://jsfiddle.net/yq8PS/3/
Edit: Adding the javascript solution to the answer http://jsfiddle.net/6g6HV/9
You can make divisions in HTML appear side by side to each other by adding a float property to the css.
#navbar{
border: 1px solid #c38a8a;
width: 200px;
height: 100%;
float: left;
}
Additionally, always add the 'px' unit after a size. Modern browsers assume you mean px, but older ones might not.
There isn't a good way to prevent the overlapping when you have a sidebar that is a set pixel width. To achieve the liquid width (or fluid width) style, you would have to add negative 200px margin on the left to the #frame (to counter sidebar). Then, add another divsion inside the #frame to do the styling for that portion. This is how I have achieved the look on my web site, and it's also the solution used in the previous default Drupal theme (Garland).
#frame{
margin-left: -200px;
}
IN this context, 100% for the Navbar doesn't mean the remaining height but 100% of the visible heigth of the parent; so if the parent has a height of 400px then Navbar will also have an height of 400px. If you add to this size the height of the title bar, you get a total value greater than the size of the parent; therefore the appearance of the scolling bar.
While there is usually no problem with the width to make it appears to fill the whole length of a screen, it's very difficult in HTML & CSS to do the same with the height as they have not been designed for this sort of thing; especially with an imbricated structure (div inside div).
Some people will use Javascript to get the size of the screen (browser) and compute the size of their objects accordingly but I don't know if you can do the same with a pure HTML/CSS solution; especially if you want to have your solution compatible accross many browsers.
For more info, take a look at http://www.tutwow.com/htmlcss/quick-tip-css-100-height/

How to achieve vertical centering with optional extra element and adjacent matching column, in pure CSS, no tables?

I've a problem laying out an e-commerce page with very strict layout requirements. We want to show a product image alongside a product description, with some optional extra information about the product below the image. The width is constrained by our overall page layout, while height can be variable. The answer seems to be "you can't do this with pure CSS".
Here's a mock up:
The marked widths are 372+12+178=562 leaving 8px in borders. The image and description areas have 2px borders, making a total of 8px horizontal pixels, and 562+8=570.
I've got the vertical centering of the image mostly sorted, what breaks the design is the optional 'extra info' panel. The site is generated by PHP, which optionally includes the <div> for that extra info if the data is available for the product. I'd be happy to always include the 'extra info' element and style it to be invisible if it's empty, if it helps solve the design problem.
Requirements:
Product image can be any aspect ratio. Some are thin and tall, some wide and short, some square.
Product image should fill its area horizontally and naturally size itself vertically by its aspect ratio.
Product image should be vertically centered in its area (blue). When extra info is not visible, image would be vertically centered alongside the Description area. When extra info is visible, image should be vertically centered in the remaining space.
Extra info can be any amount of text and aligned to bottom of product image area. So, cannot have fixed height.
Product Description can be any amount of text.
The 'image and extra info' column should vertically match the size of the 'description' column and vice versa.
Description and Extra Info boxes employ CSS gradient backgrounds and borders. All these divs must actually size themselves accordingly, I cannot get away with 'faux columns' as described here http://www.alistapart.com/articles/fauxcolumns/.
Do not want to use Javascript to align elements. Yes, I'm sure we're all jQuery masters and it's a wonderful tool, but it shouldn't be required for this layout.
My design so far employs pure CSS and no tables, using the table-cell style to center the image, but there is some fudgery to do with min-height that breaks when different size images are used. A jsfiddle: http://jsfiddle.net/GJVbX/
That fiddle is easily broken by e.g. tripling the Product Description text content, or adding "width: 370px; height: 400px;" to the so it's not a nice height.
An example of my design that works well:
However, it's not hard to find an image size that breaks it:
Note how the tall product image makes the image div extend vertically and the Description column cannot keep up.
I've been on #css IRC channel on Freenode and was told that this is possible using pure CSS, using tables for this layout task is a sign I don't understand CSS layout and should hire a professional, and that to achieve the vertical centering I should use "display: table-cell". However, extremely helpful as they were, the discussion was too complex to continue on IRC. I understand that <table> brings with it all sorts of horrible layout mechanics that is simply broken for accurate page layout, however, I can't think of a better solution, mostly because of my requirement to keep the columns the same height.
Would appreciate constructive criticism, alternative solutions, or even just confirmation of my plight :)
EDIT - here is the HTML and CSS content from the jsfiddle given above, for those who prefer this content contained within the stackoverflow question. This is extracted from the live site, cleaned a little for indentation, with a dummy product image (produced by the thumbnailer script employed in the live site) and dummy text.
HTML:
<div class="productInfo">
<div class="productTopWrapper">
<div class="productImgWrapper"><div class="wraptocenter"><span></span><img src="http://nickfenwick.com/hood.jpg"></div></div><div class="extraInfoWrapper gradientBackground"><div class="extraInfoInner">Extra info goes here.</div>
</div>
<div class="productDescription gradientBackground"><div class="productDescriptionInner">
Product Description goes here.<br/>
Product Description goes here.<br/>
Product Description goes here.<br/>
Product Description goes here.<br/>
Product Description goes here.<br/>
Yet the gradient ends too soon because this div doesn't fill its space vertically!
</div>
</div>
</div>
</div>
CSS:
DIV.productInfo {
max-width: 570px;
font-family: Verdana,Geneva,'DejaVu Sans',sans-serif;
font-size: 12px; /* Just for this fiddle */
}
.productInfo .productTopWrapper {
overflow: hidden;
margin-bottom: 12px;
position: relative;
}
.productInfo .productImgWrapper {
width: 372px;
min-height: 353px;
float: left;
border: 2px solid #cbcbcb;
text-align: center;
}
/* BEGIN css wrap from http://www.brunildo.org/test/img_center.html */
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 372px;
height: 309px;
}
.wraptocenter * {
vertical-align: middle;
}
/*\*//*/
.wraptocenter {
display: block;
}
.wraptocenter span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
*:first-child+html {} * html .wraptocenter span {
display: inline-block;
height: 100%;
}
/* END css wrap */
.productInfo .extraInfoWrapper {
position: absolute;
left: 0;
bottom: 0;
width: 376px;
}
.productInfo .extraInfoInner {
padding: 5px;
border: 2px solid #cbcbcb;
text-align: center;
}
.productInfo .gradientBackground {
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0d1d3', endColorstr='#fefefe'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#d0d1d3), to(#fefefe)); /* for webkit browsers */
background: -moz-linear-gradient(top, #d0d1d3, #fefefe); /* for firefox 3.6+ */
background: -ms-repeating-linear-gradient(top, #d0d1d3, #fefefe);
background: repeating-linear-gradient(top, #d0d1d3, #fefefe);
}.productInfo .productDescription {
width: 178px;
min-height: 353px;
margin-left: 388px;
border: 2px solid #cbcbcb;
}
.productInfo .productDescriptionInner {
padding: 5px;
font-size: 1.2em;
line-height: 1.2em;
}
Unfortunately, which versions of IE you are required to support affects more than just CSS3 eye-candy. display: table-cell, for example, isn't avilable in IE7. And a myriad of other things present in other browsers are missing or buggy in IE7 and IE8. IE9 is a considerable improvement however.
To be honest, even if you were restricting yourself to latest version of all browsers, this layout would still be difficult in pure CSS, whatever people on IRC may claim. When new layout managers such as Flexible Box and Grid Layout are ubiquitously available, it will be easy, but we are a few years off from that, I'm afraid.
Anyway, here is my attempt at your required layout:
http://jsfiddle.net/amtiskaw/tNywn/
It requires IE8 and above, as it uses display: table-cell to vertically centre the product image. It also has a quirk where the content of the extra-info box will never overlap vertically with the content of the product-info box, although their borders will look correct.
The stretched borders and gradients are achieved by using additional elements which are sized to vertically fill the product container element using absolute positioning, then placed behind the content using negative z-indexes.
Personally, I'd me more inclined in this case to use tables or a bit of jQuery to get the sizing right, rather than this kind of CSS hackery. If you use a table, you can give it an attribute role="presentation" to indicate to screen readers and other semantic tools that it is being used for layout purposes, rather than to express tabular data. This pattern was approved by the W3C.
You can do this with a tall height set with a negative margin. (your height minus the minimum height of your div, in this case 353px) The only problem is that the border bottom will disappear into the parent's overflow (which should stay hidden). Not sure how important the border is to you or even if that's what you were looking for, but perhaps it might point you in the right direction?
.productInfo .productDescription {
width: 178px;
min-height: 353px;
margin-left: 388px;
border: 2px solid #cbcbcb;
height: 1000px;
margin-bottom: -647px;
}
I remember having this problem some time ago and ended up resorting to JS to resolve it. Unforunately the constraints you have are making it very difficult to come up with a working example with pure CSS. The problem as I see it is that as soon as the image increases in size the containing div no longer has a specific width or height and with CSS alone you can't make the calculations needed to expand the description div to the correct height. Browsers won't do this automatically if the element that's size changes is not the direct parent, leaving children of the parent at the heights they were pre-height / width change.
Yes tables will solve the problem with a fixed row height but as you say, they come at a price that I try to stick clear of as much as possible.
I'm presuming you've considered using JS / Jquery to solve this problem already.
Jquery example
$(function()
{
var height = $('.productImgWrapper').innerHeight();
$('.productDescription').css('height', height);
});
Note that .innerHeight() includes padding but not the border or margin. To include the border use .outerHeight().
I know it's not ideal but I can't see any other way of solving your problem. Maybe someone with higher CSS powers than I can come up with a solution.