This seems like a simple question, but I couldn't find anything here/with search engines.
Let's first define what I mean by "same": I mean that if I put a ruler (the plastic one) next to the screen, the box would always, in different zoom levels, be the same width in centimeters (whatever that would be).
Let's also say that I'm talking about desktop browsers, since I don't want to complicate things by taking mobile into account. Also the browser should be wide enough to let there be some extra space for zooming.
Here is the box:
https://jsfiddle.net/a4be6ov5/
<div></div>
div {
border: solid 1px #000;
width: 800px;
height: 200px;
margin: auto;
}
Now, if you zoom in/out, the box width will change. The browser's Developer Tools will always show that the width is 200px, because the way this zoom thing works. But what I would actually want, is that I would want it to match the initial width compared to that ruler of ours.
I can partly do that with viewport units, but I couldn't figure out to do it automatically by calculating something. I could only do it by manually defining all the steps at which to change the box width. This turns out to be cumbersome and there are too many steps to do it at. For example I could do this:
#media screen and (min-width: 1500px) {
div {
width: 53vw
}
}
... not very easy.
How to do this automatically for all the screen widths and zoom levels?
What about having a slider on your page which alters the font size of your body element (or selected elements)?
document.querySelector('input').addEventListener("input", evt => {
document.querySelector('.body').style.fontSize = evt.target.value + 'px'
})
.a, .b {
background-color: cyan;
width: 250px;
height: 250px;
padding: 1em;
overflow: auto;
display: inline-block;
box-sizing: border-box;
}
.a {
background-color: cyan;
}
.b {
background-color: lime;
}
<p>
Smaller <input type="range" min="10" max="22" value="16"> Larger
</p>
<div class="body">
<div class="a">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel aliquet mauris. Donec ipsum orci, ornare et tellus at, pretium aliquet nibh. Praesent quis tincidunt tortor. Integer ac varius nisi. Integer tempus varius justo. Quisque eget elementum sapien. Mauris id blandit arcu. Mauris dui erat, ultrices vitae ligula vitae, auctor cursus lacus.
</div>
<div class="b">
Cras venenatis, nunc in tempus dictum, justo augue imperdiet nisl, id rutrum eros quam sed arcu. Maecenas fringilla diam in erat venenatis, sed sagittis elit tincidunt. Vivamus vel varius ex, id scelerisque ante. Donec ultricies, urna at aliquet gravida, urna erat porta nibh, vel semper magna urna eu dolor. Nullam condimentum ex ligula, a fringilla tortor eleifend in. Vestibulum congue eget lectus vel congue. Praesent eget malesuada est. Nulla nec semper nunc. Mauris id nulla molestie, varius turpis ut, pulvinar tortor.
</div>
</div>
Imagine a very common <header><article><footer> layout, where the header and footer are fixed heights and the article gets as tall as needed (the page scrolls vertically to accommodate). That's like most web pages.
What I'm trying to get is a layout just like that, but on its side so the article gets as wide as needed, and the page scrolls horizontally:
My initial attempts used flexbox:
Here is my first attempt on jsFiddle.
Relevant CSS:
body {
display: flex;
position: absolute;
height: 100%;
}
header {
background: green;
width: 400px;
flex: none;
}
article {
background: #CCC;
-webkit-columns: 235px auto;
columns: 235px auto;
-webkit-column-gap: 0;
column-gap: 0;
}
footer {
background: yellow;
width: 450px;
flex: none;
}
But I'm moving away from that as I try other things, like in this fiddle, which is a little closer. The problem with this attempt is that the article width is constrained to 100% of the viewport width, even though the text flows over to the right! (My article uses CSS columns which is absolutely important to my layout.)
My requirements are:
Header, Article, Footer to be 100% height (done)
Header to be 400px wide (done) and to left of content (done)
Footer to be 450px wide (done) and to right of the article (how?)
Article to be as wide as it needs to be without overlapping footer (how?)
So, I need help with the bolded goals. What can I do to keep the article from overlapping the footer to its right? Are there other ways to lay out this page so that the article width expands as the content does?
Should work in Chrome, Firefox, and Safari (IE and Opera a plus, but not necessary)
Preferably no JavaScript (or CSS features likely to be dropped from the spec)
Simple, clean CSS is ideal
I've been working on this all afternoon and without JS it seems pretty impossible. I've also fiddled with #Grily's solution and I think I nailed it in Chrome at least.
Solution 1 Works on Firefox, Chrome and IE
However I got this to work, sort of. It's not completely to spec.
HTML
<div id="DIV-1">Header </div>
.. in the Fiddle there's a lot of "Lorum ipsum here"
<div id="DIV-3">Footer </div>
CSS
#media only screen
and (orientation : landscape) {
body {
position: absolute;
display: block;
box-sizing: border-box;
white-space: normal;
-webkit-columns: 235px auto;
-moz-columns: 235px auto;
columns: 235px auto;
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
height: 100%;
float: left;
width: calc(100% + 450px);
min-width: -webkit-min-content;
padding-left: 400px;
}
#DIV-1{
position: absolute;
left: 0px;
box-sizing: border-box;
background-color: #2693FF;
height: 100%;
width: 400px;
float: left;
}
#DIV-3 {
position: relative;
float: right;
left: 205px;
box-sizing: border-box;
background-color: #FF7373;
height: 100%;
width: 450px;
-webkit-column-span: all;
-moz-column-span: all;
column-span: all;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
}
I've put the content container the columns directly into the body. (Can still be a div).
width: calc(100% + 450px);
min-width: -webkit-min-content;
This bit actually (by magic) forces the browser to recognize that the body has a width that is broader than the viewport. The positioning of the header is simple. absolute and add padding to the body and it's in place. The content now flows nicely to the right. Exception is the footer. I got it in the right position on it's own by using column-span: all. Firefox is going it's own way with this and actually renders it correctly. Chrome and IE render the column inline and only the width of the column. That's the drawback of this approach.
I hope you can do something with it or somebody else could improve this so it actually appends the footer at the end of the page without shrinking it to the column's width.
The Fiddle: http://jsfiddle.net/5dtq47m3/
Solution 2 - Works on Chrome
Edited the work of Grily.
HTML
<header>
<h1>Article Title (width 400)</h1>
</header>
<article>
........
</article>
<footer>Footer should be 450px wide and appear to the right of everything else.</footer>
CSS
* {
padding: 0;
margin: 0;
}
body {
display: flex;
position: absolute;
height: 100%;
}
header {
background: green;
width: 400px;
flex: none;
float: left;
}
article {
background: #CCC;
-webkit-columns: 235px auto;
columns: 235px auto;
-webkit-column-gap: 0;
column-gap: 0;
color: rgba(0, 0, 0, .75);
flex:none; /*added*/
width: calc(100% + 10px); /*added*/
max-width: -webkit-max-content; /*added*/
}
article p {
padding: .2em 15px;
text-indent: 1em;
hyphens: auto;
}
footer {
background: yellow;
width: 450px;
flex: none;
float: right; /*added*/
}
http://jsfiddle.net/w4wzf9n6/8/
I have the flex basics here: http://jsfiddle.net/hexalys/w4wzf9n6/16/ which is the cleanest theoretical css.
This places the footer to the right of the article and the article doesn't overlap with the footer. Best visible in Webkit/Blink with calculation issues on the text content width interpreted by Flex.
In an ideal world, Flexbox would know what to do with the columns and calculate the auto width of the article flex item. But because 1. This isn't specced yet; 2. Flex still has existing issues to be resolved; And 3. CSS Columns are still quite buggy and unstable. Webkit and Firefox handle his both differently and wrong. For Webkit a flex auto width is that of the <p> element on one line, and for FF/IE it is the size of one column only. So it's quite a dead end, and need solving by the W3C specs before this would work. I tried to wrap article, but it doesn't seem to help that cause.
Meanwhile if you know the constraint of the viewport height and the amount of text on the server side, you could use a JS fallback to give the article element a flex width before DOMContentLoaded. (See my later comment for a partial Webkit/Blink polyfill)
Update: The multi-column issue is a know problem back from 2007. This case was added as reference on the CSS Working Group wiki page listing current multicolumn issues
Here's a solution that works on webkit browsers, Firefox, and IE:
// JS to work around the CSS column bug where the width
// is not properly calculated by the browser. We have a
// float:right marker at the end of the article. Set the
// width of the article to be where the marker is.
function resize()
{
var article = document.querySelector("article"),
marker = document.querySelector("endmarker");
article.style.width = (marker.offsetLeft) + "px";
}
window.addEventListener("resize", resize);
resize();
* { padding: 0; margin: 0; }
holder {
position: absolute;
top: 0; left: 0;
height: 100%;
background: #fed;
white-space: nowrap;
}
header,
article,
footer {
position: relative;
display: inline-block;
height: 100%;
vertical-align: top;
white-space: normal;
}
header {
background: green;
width: 400px;
}
endmarker {
position: relative;
display: block;
float: right;
width: 10px;
height: 10px;
background: red;
}
article {
background: #CCC;
-webkit-columns: 235px auto;
-moz-columns: 235px auto;
columns: 235px auto;
-webkit-column-fill: auto;
-moz-column-fill: auto;
column-fill: auto;
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
}
article p {
padding: .2em 15px;
text-indent: 1em;
hyphens: auto;
}
footer {
background: yellow;
width: 450px;
}
<holder>
<header>
<h1>Article Title (width 400)</h1>
</header>
<article>
<p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo venenatis efficitur. Nam vel ultricies urna, non auctor lorem. Suspendisse sodales, nunc eu pharetra ornare, elit quam scelerisque ex, id congue orci lectus eget turpis. Ut consequat nisi et erat efficitur faucibus. Maecenas laoreet magna nec odio porta, et consequat leo rhoncus. In imperdiet pellentesque justo eu pellentesque. Curabitur ut ante tristique, placerat est porta, porttitor ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed scelerisque est vitae orci elementum, et vehicula quam lacinia. Vivamus vestibulum metus quis dui dictum vehicula. Mauris et tempor libero.</p>
<p>Sed lorem quam, feugiat sit amet vehicula non, ultricies quis quam. Ut lobortis leo ac ex facilisis, vel elementum ante feugiat. Quisque efficitur tellus sed sodales dictum. Mauris sed justo dictum, finibus velit id, pulvinar mi. Phasellus mi augue, finibus ut vestibulum et, volutpat id sapien. Sed feugiat eleifend augue, ut commodo nulla bibendum ac. Nullam quis posuere lectus. Curabitur dictum quam id massa finibus blandit. Nam malesuada metus ut massa ullamcorper luctus. Curabitur vitae dictum orci, a finibus sapien. Maecenas eget nisl tempus, pharetra enim eget, tempor urna. Suspendisse viverra felis bibendum neque rhoncus, id eleifend tortor sodales. Suspendisse sed magna pulvinar, laoreet turpis nec, ultrices enim. Vivamus at auctor arcu. Nunc vitae suscipit tellus. Etiam ut accumsan arcu.</p>
<p>Morbi faucibus, mauris sed blandit ultrices, turpis turpis dapibus quam, quis consectetur erat nibh cursus magna. Donec quis ullamcorper quam, a facilisis leo. Phasellus ut mauris eget risus ultrices lobortis. Pellentesque semper ante eu vehicula pharetra. Vestibulum congue orci non felis vehicula volutpat. Praesent vel euismod ligula. Sed vitae placerat ipsum, a hendrerit felis. Mauris vitae fermentum nunc, non tincidunt magna. Fusce nibh ex, porta sed ante ut, dapibus maximus urna. Nulla tristique magna ipsum, at sodales ipsum feugiat a. Mauris convallis mi vel arcu vehicula elementum. Aliquam aliquet hendrerit lectus, congue auctor ipsum sodales vitae. Phasellus congue, ex non viverra cursus, nunc est fermentum dui, ac tincidunt turpis mauris a tellus. Curabitur sollicitudin condimentum mauris consectetur tincidunt. Morbi vulputate ac augue ut maximus.</p>
<p>Nulla in auctor ligula. In euismod volutpat ex a eleifend. Sed eu elit et nulla faucibus fringilla. Sed posuere metus in elit gravida pharetra. Vivamus a ultricies ipsum. Mauris mollis est nisi, a convallis est iaculis id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam tincidunt blandit metus nec sagittis. Sed faucibus non urna in ullamcorper. Sed feugiat, tellus ut feugiat mollis, ligula neque molestie augue, vitae mattis ligula eros eget augue. Curabitur finibus sodales metus ac finibus. Sed id mollis ante. Phasellus vitae purus vel risus pulvinar aliquet. Vestibulum vitae elementum felis.</p>
<p>Nam ipsum ipsum, consequat in dictum vitae, malesuada eget est. Phasellus elementum lacinia maximus. Maecenas dictum neque ligula, et congue mauris venenatis eu. Pellentesque pretium tortor nec ligula rutrum, a aliquet eros aliquam. Etiam euismod varius ipsum, id molestie massa. Quisque elementum lacus at ipsum egestas facilisis. Maecenas arcu risus, euismod ac lacus ac, euismod dictum nunc. Aenean non felis aliquet mi tincidunt bibendum. Curabitur ultricies ullamcorper gravida. In pretium nibh non eleifend egestas. Cum sociis natoquenatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin auctor lacus erat, sit amet vestibulum lorem mattis in. Aenean dapibus at risus ac lacinia. Vivamus fringilla nulla diam, vel facilisis magna mollis maximus. Sed quis dolor tempor magna pharetra scelerisque. Nam velit felis, mollis sit amet risus et, imperdiet interdum nibh.</p>
<p>END OF ARTICLE</p>
<endmarker></endmarker>
</article>
<footer>Footer should be 450px wide and appear to the right of everything else.</footer>
</holder>
http://jsfiddle.net/jmhh56g2/2/
All browsers have a bug with column layout and how they calculate the width of the element with columns. So unfortunately, a tiny bit of JS is needed to set the width. I know the requirement said "preferably no javascript", but this is fairly minimal and it works on all browsers that support CSS columns.
Quick overview:
Put the entire content in an absolutely positioned div (<holder>) that is 100% height. This pulls the content out of the main body flow and prevents the body and viewport width from doing crazy things.
Set white-space: nowrap on <holder> and normal for all other elements. This forces the header,article, and footer to align horizontally, while allowing the text inside them to flow normally.
Set all elements to be position: relative (needed for offsetWidth)
Create a little marker element at the article that is float:right. This is used to calculate the correct width.
A tiny bit of js to watch the window resize event and recalculate the proper width for the article.
Flexbox does indeed work for this, but you need to add a few more things.
Add the following CSS:
article {
display: flex;
}
To make each paragraph inside the article tag the same width, add:
article p {
flex: 1;
}
A quick fix for the width (and height) of the footer, add:
footer {
display: table;
height: 100%;
}
Edit:
Been playing around with it a little, but didn't figure it out yet.
I'll just leave the code here, but it's incorrect.
html {
height: 100vh;
}
body {
display: -webkit-box;
height: 100%;
}
header {
background: green;
width: 400px;
flex: none;
}
article {
background: #CCC;
-webkit-columns: 235px auto;
columns: 235px auto;
-webkit-column-gap: 0;
column-gap: 0;
color: rgba(0, 0, 0, .75);
height: 100%;
}
footer {
background: yellow;
width: 450px;
display: table;
height: 100%;
}
The simple answer is to set the overflow-x and overflow-y on the body, and then display: inline-block the elements inside. Here's the code:
body {
height: 500px; /* just for demo */
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
}
header,
article,
footer,
.box {
display: inline-block;
height: 500px; /* just for demo */
}
header,
footer {
width: 200px;
background: #666;
}
.box {
width: 300px; /* just for demo */
background: #ccc;
}
<header>header</header>
<article>
<div class="box">stuff</div>
<div class="box">stuff</div>
<div class="box">stuff</div>
<div class="box">stuff</div>
<div class="box">stuff</div>
<div class="box">stuff</div>
<div class="box">stuff</div>
</article>
<footer>footer</footer>
Here is a demo
There is a lot to be said for flex. I suggest bookmarking this link: CSS-TRICKS A Complete guide to FlexBox
Regarding the columns - column width is a minimum width, not a forced value so you will never see a partial column within <article> tags
Css Changes as noted and fiddle following:
article {
background: #CCC;
-webkit-columns: 235px auto;
columns: 235px auto;
-webkit-column-gap: 0;
column-gap: 0;
color: rgba(0, 0, 0, .75);
/* Added */
overflow:hidden;
overflow-x: scroll;
}
footer {
background: yellow;
/* Changed */
min-width: 450px;
display: block;
}
EDIT: I updated my fiddle; There are some limitations being imposed by Fiddle in that the results are displayed in an iframe that limit the width and height to 100% of the results display quadrant so you don't really get to see true browser results.
The solution in this edited fiddle does not use Flex, but a combination of inline-blocks with some white-space management. This is as close as I could come with the time I had. Hope it helps.
Updated: FIDDLE
Possible solution.
The CSS:
<style type="text/css">
* {
margin:0;
padding:0;
}
html {
height:100%;
}
body {
display:table;
height:100%;
width:100%;
}
header {
background:green;
display:table-cell;
vertical-align:top;
width:400px;
}
article {
background:#CCC;
color:rgba(0, 0, 0, .75);
display:table-cell;
}
article div {
-moz-column-gap:0;
-moz-columns:235px auto;
-webkit-column-gap:0;
-webkit-columns:235px auto;
column-gap:0;
columns:235px auto;
height:100%;
max-height:1vh;
min-height:100%;
overflow-x:scroll;
}
article p {
hyphens:auto;
padding:.2em 15px;
text-indent:1em;
}
footer {
background:yellow;
display:table-cell;
vertical-align:top;
width:450px;
}
</style>
The HTML:
<header>
<h1>Article Title (width 400)</h1>
</header>
<article>
<div>
<p>Article Text</p>
</div>
</article>
<footer>
Footer should be 450px wide and appear to the right of everything else.
</footer>
Man I thought I had it... It works if the window is a particular height. If you change the size of the output pane, the content doesn't fit evenly. Works the same in both Firefox and Chrome, wanted to put it out there to see if it helps someone get closer to a solution.
http://jsfiddle.net/ryanwheale/bbhmkLw5/
HTML:
<article>
<header></header>
<section></section>
<footer></footer>
</article>
CSS:
html, body, article, header, section, footer {
height: 100%;
margin: 0;
}
html, body {
background: red;
width: calc(100% + 850px);
}
article {
white-space: nowrap;
background: blue;
}
article > * {
white-space: normal;
display: inline-block;
vertical-align: top;
}
header {
background: green;
width: 400px;
}
section {
background: grey;
-webkit-columns: 2000 235px;
-moz-columns: 2000 235px;
columns: 2000 235px;
-moz-column-fill: auto;
}
footer {
background: yellow;
width: 450px;
}
Check this out!
Some JavaScript code is needed to calculate dynamic width, otherwise overall structure is simple and will work with almost all major browser (didn't checked JS, but that will be easy change, "in case"!).
You can also check on JSFiddle here.
var header = document.getElementsByTagName('header')[0].offsetWidth;
var article = document.getElementsByTagName('article')[0].children[0].offsetWidth * document.getElementsByTagName('article')[0].children.length;
var footer = document.getElementsByTagName('footer')[0].offsetWidth;
document.getElementsByTagName('html')[0].style.width = header + article + footer + 'px';
html,body,header,article,article p,footer{
margin:0px;
padding:0px;
height:100%;
}
html{ width: 100%; }
body{ width: auto; }
header, footer{
width: 200px;
float: left;
}
header{ background-color: green; }
footer{ background-color:yellow; }
article{
display:block;
width: auto;
float: left;
}
article p{
border:1px solid red;
width: 200px;
float: left;
display:inline-block;
}
<header>
<h1>Article Title</h1>
</header>
<article>
<p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b></p>
<p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b></p>
<p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b></p>
<p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b></p>
<p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b></p>
<p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b></p>
<p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b></p>
<p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b></p>
<p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b></p>
</article>
<footer>
Footer should be 450px wide and appear to the right of everything else.
</footer>
You should use table css then it's easy - otherwise it's pain in the butt
Here is a working example: http://jsfiddle.net/y60zy7fp/1/
The main difference is removing flex and then wrapping everything in 1 .layout and 1 more div for table and table-row, and first element in div in .layout will become column this is css:
.layout {
display: table;
}
.layout > div {
display: table-row;
}
.layout > div > * {
display: table-cell;
}
update:
The article needs to have set width for the scroll to become horizontal.
In my example it's 200%.
example: http://jsfiddle.net/n3okxq94/7/
Why it has to have width? Because the width of a paragraph is the size of the container. And you're asking the container to set the width according to paragraph which has width: auto
You can add white-space: nowrap on article but that makes all text one line http://jsfiddle.net/n3okxq94/10/
finished? http://jsfiddle.net/n3okxq94/8/
You could put inside of the article something like at least one <p style="width: 1000px;">and that way you could have width per-article
How about this simple sultion below using very simple CSS and HTML?
html, body {width:100%; height:100%; min-height:100%; margin:0; padding:0;}
article {width:100%; height:100%; min-height:100%;}
header {width:400px; float:left; background:red; height:100%; min-height:100%;}
section {width:auto; display:block; background:blue; height:100%; min-height:100%; padding-right:450px;}
footer {width:450px; position:absolute; top:0; right:0; background:green; height:100%; min-height:100%;}
<article>
<header>content</header>
<section>content</section>
<footer>content</footer>
</article>
Hi Matt just try it me be it help full sorry for i can't make the live demo.
First download this jQuery library http://manos.malihu.gr/jquery-custom-content-scroller/ and css and js file in your code as lik.
<link rel="stylesheet" href="../jquery.mCustomScrollbar.css">
<style>
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
width:auto;
display:block;
white-space:nowrap;
}
header, article, footer {
float: left;
height:100%;
vertical-align:top;
white-space:normal;
}
header {
background: green;
width: 250px;
padding: 0px 15px;
}
article {
background: #CCC;
color: rgba(0, 0, 0, .75);
width: 100%;
padding-right: 20px;
}
article p {
padding: .2em 15px;
text-indent: 1em;
hyphens: auto;
}
footer {
background: yellow;
width: 250px;
padding: 0px 15px;
}
.showcase #content-6.horizontal-images.content{
padding: 10px 0 5px 0;
background-color: #444;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAG0lEQVQIW2NkYGA4A8QmQAwGjDAGNgGwSgwVAFVOAgV/1mwxAAAAAElFTkSuQmCC");
}
.showcase #content-6.horizontal-images.content .mCSB_scrollTools{
margin-left: 10px;
margin-right: 10px;
}
</style>
<body>
<header>
<h1>Article Title (width 400)</h1>
</header>
<article>
<p><b>Article should stretch as wide as it needs to be. Horizontal scrolling only. Preferably, columns aren't sized according to viewport width. Seeing partial column helps the user know they can scroll left.</b>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo venenatis efficitur. Nam vel ultricies urna, non auctor lorem. Suspendisse sodales, nunc eu pharetra ornare, elit quam scelerisque ex, id congue orci lectus eget turpis. Ut consequat nisi et erat efficitur faucibus. Maecenas laoreet magna nec odio porta, et consequat leo rhoncus. In imperdiet pellentesque justo eu pellentesque. Curabitur ut ante tristique, placerat est porta, porttitor ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed scelerisque est vitae orci elementum, et vehicula quam lacinia. Vivamus vestibulum metus quis dui dictum vehicula. Mauris et tempor libero.</p>
<p>Sed lorem quam, feugiat sit amet vehicula non, ultricies quis quam. Ut lobortis leo ac ex facilisis, vel elementum ante feugiat. Quisque efficitur tellus sed sodales dictum. Mauris sed justo dictum, finibus velit id, pulvinar mi. Phasellus mi augue, finibus ut vestibulum et, volutpat id sapien. Sed feugiat eleifend augue, ut commodo nulla bibendum ac. Nullam quis posuere lectus. Curabitur dictum quam id massa finibus blandit. Nam malesuada metus ut massa ullamcorper luctus. Curabitur vitae dictum orci, a finibus sapien. Maecenas eget nisl tempus, pharetra enim eget, tempor urna. Suspendisse viverra felis bibendum neque rhoncus, id eleifend tortor sodales. Suspendisse sed magna pulvinar, laoreet turpis nec, ultrices enim. Vivamus at auctor arcu. Nunc vitae suscipit tellus. Etiam ut accumsan arcu.</p>
<p>Morbi faucibus, mauris sed blandit ultrices, turpis turpis dapibus quam, quis consectetur erat nibh cursus magna. Donec quis ullamcorper quam, a facilisis leo. Phasellus ut mauris eget risus ultrices lobortis. Pellentesque semper ante eu vehicula pharetra. Vestibulum congue orci non felis vehicula volutpat. Praesent vel euismod ligula. Sed vitae placerat ipsum, a hendrerit felis. Mauris vitae fermentum nunc, non tincidunt magna. Fusce nibh ex, porta sed ante ut, dapibus maximus urna. Nulla tristique magna ipsum, at sodales ipsum feugiat a. Mauris convallis mi vel arcu vehicula elementum. Aliquam aliquet hendrerit lectus, congue auctor ipsum sodales vitae. Phasellus congue, ex non viverra cursus, nunc est fermentum dui, ac tincidunt turpis mauris a tellus. Curabitur sollicitudin condimentum mauris consectetur tincidunt. Morbi vulputate ac augue ut maximus.</p>
<p>Nulla in auctor ligula. In euismod volutpat ex a eleifend. Sed eu elit et nulla faucibus fringilla. Sed posuere metus in elit gravida pharetra. Vivamus a ultricies ipsum. Mauris mollis est nisi, a convallis est iaculis id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam tincidunt blandit metus nec sagittis. Sed faucibus non urna in ullamcorper. Sed feugiat, tellus ut feugiat mollis, ligula neque molestie augue, vitae mattis ligula eros eget augue. Curabitur finibus sodales metus ac finibus. Sed id mollis ante. Phasellus vitae purus vel risus pulvinar aliquet. Vestibulum vitae elementum felis.</p>
<p>Nam ipsum ipsum, consequat in dictum vitae, malesuada eget est. Phasellus elementum lacinia maximus. Maecenas dictum neque ligula, et congue mauris venenatis eu. Pellentesque pretium tortor nec ligula rutrum, a aliquet eros aliquam. Etiam euismod varius ipsum, id molestie massa. Quisque elementum lacus at ipsum egestas facilisis. Maecenas arcu risus, euismod ac lacus ac, euismod dictum nunc. Aenean non felis aliquet mi tincidunt bibendum. Curabitur ultricies ullamcorper gravida. In pretium nibh non eleifend egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin auctor lacus erat, sit amet vestibulum lorem mattis in. Aenean dapibus at risus ac lacinia. Vivamus fringilla nulla diam, vel facilisis magna mollis maximus. Sed quis dolor tempor magna pharetra scelerisque. Nam velit felis, mollis sit amet risus et, imperdiet interdum nibh.</p>
</article>
<footer>Footer should be 450px wide and appear to the right of everything else.</footer>
<!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- custom scrollbar plugin -->
<script src="../jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function ($) {
$(window).load(function () {
$.mCustomScrollbar.defaults.theme = "light-2"; //set "light-2" as the default theme
$("article").mCustomScrollbar({
axis: "x",
advanced: {autoExpandHorizontalScroll: true}
});
jQuery('article').css({'max-width': jQuery(window).width() - 581});
});
})(jQuery);
</script>
</body>
I have a fixed width parent div within which I am floating right an image with the tags:
<div style="width: 200px;" class="buggybox imgr" id="g0">
<img class="imgposr" src="../images/irrigation/hip4microwave2.png" alt="Microwave" width="200" height="133">
</div>
with the expectation that the text will wrap around the image.
Unfortunately, IE7 floats the image outside the RHS boundary of the parent div (see http://horticulture127.massey.ac.nz/ie7view.png) whereas FF and Safari display the float and wrapped text within the parent div's boundary (the black vertical lines are the LHS/RHS boundaries of the parent div.
How do I fix this CSS fault? There's just so much info available about IE6/7 problems with right floats that I'm totally overwhelmed and can't see the solution.
.imgr{
float: right;
margin: 4px 0 4px 10px;
padding: 4px;
clear: right;
}
* html .buggybox {height: 1%;}
(imgposr is not a css item - it's a selector for some jquery)
It seems like something is setting the width of your 'buggybox' to 1px for some reason - that is the only way I was able to get a result that resembles what you are describing.
If at all possible, could you try to post a more complete bit of code that has the problem in it? Try to make the code as short as possible, removing everything irrelevant. I have the following code setup, which I think does what you want.
When I add a width of 1 px to the .imgr div, I get the same result as in the picture you've supplied (in both Firefox and IE), which is why I suspect that is where your problem is.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#parent {
width: 600px;
border: 1px solid black;
}
.imgr{
float: right;
margin: 4px 0 4px 10px;
padding: 4px;
clear: right;
}
</style>
</head>
<body>
<div id="parent">
<div class="buggybox imgr" id="g0">
<img class="imgposr" src="../images/irrigation/hip4microwave2.png" alt="Microwave" width="200" height="133">
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec sapien libero, eget interdum lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi rutrum interdum dui ac ultrices. Donec pulvinar feugiat nibh, sit amet rhoncus sapien consectetur quis. In orci ante, bibendum sit amet euismod eu, tristique ac erat. Donec in enim nisl. Etiam vestibulum scelerisque purus, et fringilla nibh malesuada sit amet. Praesent magna mi, egestas quis commodo a, vulputate ut sem. Nullam auctor vulputate justo, vel pharetra lectus pulvinar eget. Curabitur dignissim lectus nec ligula rutrum et pellentesque metus auctor. Sed metus diam, aliquet non malesuada vitae, tincidunt sit amet augue. Aliquam luctus posuere eros, non adipiscing ante varius sed.
</div>
</body>
</html>
Hope this helps!
You need to add position:relative; to the parent element.
You could try the following:
.imgr {
overflow:auto;
}