When I view this page in Chrome, Firefox, or IE11, I notice upon horizontally resizing the window to its minimum width causes an overflow of text out of the white background div at the bottom of the page. The div is set to a height of 100%, so should it not continue to match the height of the page? It may seem the 100% matches the height of the window only, but upon initially loading the page in Chrome I see the white div causes a scroll bar such that there is more white space extended beyond on the height of the window.
I tried putting overflow: auto; in the #main css and the div ended up with a scroll bar. I removed it as it's not a solution I can accept. How can I get the div to accommodate its content automatically?
<html>
<head>
<style>
body, html {
margin: 0;
padding: 0;
}
html {
background: url('http://losingmedotorg.files.wordpress.com/2013/04/two-roads-in-a-wood.jpg') no-repeat center center fixed;
background-size: cover;
}
#main {
margin-left: 20%;
margin-right: 20%;
background-color: white;
height: 100%;
padding: 10%;
}
</style>
</head>
<body>
<div id="main">
<h1>The Road Not Taken</h1>
Two roads diverged in a yellow wood, And sorry I could not travel both And be one traveler, long I stood And looked down one as far as I could To where it bent in the undergrowth; Then took the other, as just as fair And having perhaps the better claim, Because it was grassy and wanted wear; Though as for that the passing there Had worn them really about the same, And both that morning equally lay In leaves no step had trodden black. Oh, I kept the first for another day! Yet knowing how way leads on to way, I doubted if I should ever come back. I shall be telling this with a sigh Somewhere ages and ages hence: Two roads diverged in a wood, and I - I took the one less traveled by, And that has made all the difference.
<p>- Robert Frost</p>
</div>
</body>
</html>
padding will mess up height: 100%. It seems to calculate the height and then add the padding so the resulting height is actually closer to 120%. I tried this code in a local html file and it seems to do the trick.
Try this instead:
<html>
<head>
<style>
body, html {
margin: 0;
padding: 0;
}
html {
background: url('http://losingmedotorg.files.wordpress.com/2013/04/two-roads-in-a-wood.jpg') no-repeat center center fixed;
background-size: cover;
}
#main {
margin-left: 20%;
margin-right: 20%;
background-color: white;
height: 100%;
}
#content {
padding: 10%;
}
</style>
</head>
<body>
<div id="main">
<div id="content">
<h1>The Road Not Taken</h1>
Two roads diverged in a yellow wood, And sorry I could not travel both And be one traveler, long I stood And looked down one as far as I could To where it bent in the undergrowth; Then took the other, as just as fair And having perhaps the better claim, Because it was grassy and wanted wear; Though as for that the passing there Had worn them really about the same, And both that morning equally lay In leaves no step had trodden black. Oh, I kept the first for another day! Yet knowing how way leads on to way, I doubted if I should ever come back. I shall be telling this with a sigh Somewhere ages and ages hence: Two roads diverged in a wood, and I - I took the one less traveled by, And that has made all the difference.
<p>- Robert Frost</p>
</div>
</div>
</body>
</html>
Related
So I've been looking for days and can't find a way to do that.
I made a WordPress site, and my homepage is displaying the most recent posts I've made.
Thing is, the content of a post is written with some specific layout, and it is meant to stay that way. The layout cannot change! I need the text to stay in the exact same place, even if it becomes way smaller and less readable when looking at the site on a smartphone.
Of course, the site is responsive. Only thing I don't want to be responsive is the content of a post.
I've tried a lot of things, but I can't find a way to make it... This page shows exactly what I'm looking for, except that I don't want the post to be re-sizable by the user. I just need it to fit the parent div.
.responsive-wrapper {
border: 3px solid black;
}
.post-content {
position: relative;
width: 100%;
height: 100%;
padding: 10px;
}
.txt-top-right {
display: block;
float: right;
margin-left: auto;
padding-right: 20px;
}
.txt-under-top-right {
clear: both;
}
.txt-center {
text-align: center;
}
.post-content img {
display: block;
max-width: 200px;
float: right;
padding-right: 20px;
}
<div class="responsive-wrapper">
<div class="post-content">
<p class="txt-top-right"><em>Div right-top corner</em></p>
<p class="txt-under-top-right">
Div following the one on right-top corner
</p>
<div class="txt-center">
<h2>h2 in the middle of the page</h2>
<h1>h1 in the middle of the page</h1>
<h3>h3 in the middle of the page</h3>
</div>
<img src="http://cs.pes.edu/wp-content/uploads/2016/06/default.jpg" />
<p>
paragraph<br> on the left side<br> of the page<br> describing<br> a lot of things<br> on a lot of lines
</p>
<p>
Adress<br> City<br> Country
</p>
</div>
</div>
I understand HTML/CSS/JS, but I am struggling with JavaScript... I can insert some <script> tags in my html header with functions in it, but I have hard times understanding what these functions do.
I'd like the layout to stay the exact same way, doesn't matter which device the user is on. For instance, I want the .txt-top-right paragraph to take this amount of space. On a smartphone, the font size shouldn't re-size and fill up more than this amount of space of the container...
This is an example of what is happening right now when re-sizing the window. The layout changes completely !
Thank you for reading, hope it was clear enough :)
I've been doing a bit of work on a page designed specifically for print in HTML/CSS and stumbled into a roadblock trying to create a left border that works across multiple (print) pages at 100% height.
After reading 'How to make page border in print CSS for every single page' and finding that the best answer didn't work, even with position: fixed. I finally gave up and copied that approach but with a suitably low negative value for the bottom property that it's unlikely to ever be surpassed in common usage. Which works for now but isn't particularly nice (you'll need to print preview it):
<html>
<head>
<style>
.page-break {
page-break-after: always;
}
#edge {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: -10000mm;
overflow: visible;
border-left: 5mm solid #0081CC;
}
div {
padding-left: 5mm;
}
</style>
</head>
<body>
<div id="edge"></div>
<div>
Page 1 content
</div>
<div class="page-break"></div>
<div>
Page 2 content
</div>
</body>
</html>
So I'm curious now if there is a cleaner (and more future proof) way of achieving the same result, the closest I got was applying a border-left direct to the body tag which, obviously, works on screen media but for print stops at the end of the content so the last page is cut off.
From research it seems like the cleanest approach by far would have been to use CSS3 Page-Margin Boxes. Sadly they aren't even supported enough to get a page on caniuse.com yet and the Mozilla implementation appears to have gotten stuck in the mud 2 years ago. (https://bugzilla.mozilla.org/show_bug.cgi?id=856371)
Does anyone have any CSS magic up their sleeve that might make this work?
Update
Just to avoid confusion, the issue with the bottom: 0 approach advocated in How to make page border in print CSS for every single page and https://stackoverflow.com/a/34574001/2823496 is illustrated in this image.
The body box retains the dimensions of the content rather than extending to the bottom of the page so the border rather than covering the entirety of the last page will stop when the content does.
Make use of wrapper class. it stick only arond content
.wrapper {
position: absolute;
overflow: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-left: 5px solid red;
}
</style>
</head>
<body>
<div class="wrapper">
Your Content...
</div>
</body>
Implementation:UPADTE
Hope its help
I would just like the edges of my image to stretch the width of the screen. Not looking for it to be a full background.
My website is www.jobspark.ca
<div class="fullWidthSectionBG">
<div class="fullWidthSection">
<div class="myLeftColumn">
<p>
</p>
</div>
<div class="myRightColumn">
<h2>Used By Thousands Of Canadians</h2>
<p>Jobspark.ca is dedicated to providing resources for job seekers and employers throughout British Columbia and Alberta. Many top employers along with small local businesses from across the region post their jobs on Job Spark to find qualified professionals.</p>
<p>Job Spark simplifies your quest for the perfect career with a clean design and real-time postings. Our streamline job board was designed to take the headache out of finding a job.</p>
<p>Your job listings will be seen across multiple venues, receiving thousands of views each month! </p></div>
</div>
</div>
the CSS
.fullWidthSectionBG {
background-image: url('http://static.squarespace.com/static/513d5347e4b0abff73be5264/t/519c45c4e4b084baf13d7e27/1369195972115/rocktruck2.jpg');
background-position:center;
background-repeat: no-repeat;
height:575px;
margin-left: -1600px;
margin-right: -1600px;
}
This answer was close but then the rest of the website that isn't an image extended full screen.
#site > .wrapper {
max-width: 960px;
padding: 0 50px;
margin: 0 auto;
position: relative;
}
change 960px to 100%
& get rid of
margin-left: -1600px;
margin-right: -1600px;
I have been fighting with this issue for a few days now and would be soo happy to figure something out. Might have to zoom out to see the issue.
What about adding
width: 100%;
to your css rules and getting rid of the margins ? like this
Is that your question ?
#site > .wrapper {
max-width: 960px;
padding: 0 50px;
margin: 0 auto;
position: relative;
}
change 960px to 100%
& get rid of
margin-left: -1600px;
margin-right: -1600px;
to achieve this goal i typically define a div element that fits the exact size and position i want my background image to fill.
then use the css attribute for background-size:cover; this Cover attribute scales the image automatically to ensure the entire background area is in fact "covered" by image. see the documentation here
here is a jsfiddle of an example of this method working
it is also worth noting to achieve intermittent full width areas between centered fixed width areas i like to use this method of defining a .wrapper class very similar to yours. then ending that wrapper for the full width area and once again restarting it afterwards
my adjustments to your code as follows:
CSS
.fullWidthSectionBG {
background-image: url('http://static.squarespace.com/static/513d5347e4b0abff73be5264/t/519c45c4e4b084baf13d7e27/1369195972115/rocktruck2.jpg');
background-position: center;
background-repeat: no-repeat;
height:575px;
background-size: cover;
}
HTML
<div class="wrapper">
<!-- HEADER HERE -->
</div>
<div class="fullWidthSectionBG">
<div class="wrapper">
<!-- FULL WIDTH BANNER CONTENT HERE -->
</div>
</div>
<div class="wrapper">
<!-- BODY HERE -->
</div>
try it out let me know how it works - hope this helps!
I would just like the edges of my image to stretch the width of the screen. Not looking for it to be a full background.
My website is www.jobspark.ca
<div class="fullWidthSectionBG">
<div class="fullWidthSection">
<div class="myLeftColumn">
<p>
</p>
</div>
<div class="myRightColumn">
<h2>Used By Thousands Of Canadians</h2>
<p>Jobspark.ca is dedicated to providing resources for job seekers and employers throughout British Columbia and Alberta. Many top employers along with small local businesses from across the region post their jobs on Job Spark to find qualified professionals.</p>
<p>Job Spark simplifies your quest for the perfect career with a clean design and real-time postings. Our streamline job board was designed to take the headache out of finding a job.</p>
<p>Your job listings will be seen across multiple venues, receiving thousands of views each month! </p></div>
</div>
</div>
the CSS
.fullWidthSectionBG {
background-image: url('http://static.squarespace.com/static/513d5347e4b0abff73be5264/t/519c45c4e4b084baf13d7e27/1369195972115/rocktruck2.jpg');
background-position:center;
background-repeat: no-repeat;
height:575px;
margin-left: -1600px;
margin-right: -1600px;
}
This answer was close but then the rest of the website that isn't an image extended full screen.
#site > .wrapper {
max-width: 960px;
padding: 0 50px;
margin: 0 auto;
position: relative;
}
change 960px to 100%
& get rid of
margin-left: -1600px;
margin-right: -1600px;
I have been fighting with this issue for a few days now and would be soo happy to figure something out. Might have to zoom out to see the issue.
What about adding
width: 100%;
to your css rules and getting rid of the margins ? like this
Is that your question ?
#site > .wrapper {
max-width: 960px;
padding: 0 50px;
margin: 0 auto;
position: relative;
}
change 960px to 100%
& get rid of
margin-left: -1600px;
margin-right: -1600px;
to achieve this goal i typically define a div element that fits the exact size and position i want my background image to fill.
then use the css attribute for background-size:cover; this Cover attribute scales the image automatically to ensure the entire background area is in fact "covered" by image. see the documentation here
here is a jsfiddle of an example of this method working
it is also worth noting to achieve intermittent full width areas between centered fixed width areas i like to use this method of defining a .wrapper class very similar to yours. then ending that wrapper for the full width area and once again restarting it afterwards
my adjustments to your code as follows:
CSS
.fullWidthSectionBG {
background-image: url('http://static.squarespace.com/static/513d5347e4b0abff73be5264/t/519c45c4e4b084baf13d7e27/1369195972115/rocktruck2.jpg');
background-position: center;
background-repeat: no-repeat;
height:575px;
background-size: cover;
}
HTML
<div class="wrapper">
<!-- HEADER HERE -->
</div>
<div class="fullWidthSectionBG">
<div class="wrapper">
<!-- FULL WIDTH BANNER CONTENT HERE -->
</div>
</div>
<div class="wrapper">
<!-- BODY HERE -->
</div>
try it out let me know how it works - hope this helps!
How may I display two images on a website with elastic layout, side by side which will autoscale to 50% of parent containter?
I was playing with it last night but didnt went too far.
When I went with divs, they overlaped each other or second image was displayed underneath first.
When I went with table, table become wider than screen resulting in vertical scroll bar.
I dont know in advance what size image is, nor what resolution user is having, idealy I would set this up purely by css, without using javascript.
I had luck on other page with single image autoscaling to fit in container by setting max-width:90% but I can't apply this trick here. Funny thing is, it this scenario max-width is set according to window (parent element), while in examples above max-width is set according to width of image itself.
Sorry for my english, if something is not clear, please ask.
Thanks
I see what you're saying. I had a problem with them being just a little bit too wide, so I took a little off of the margin, since it wouldn't take a fraction in the percent sign. See if this will do the trick:
<html>
<head>
<style>
div {
width: 80%;
background: #acf;
}
div img {
width: 50%;
padding: 0;
margin: 0 -0.2em 0 0;
}
</style>
</head>
<body>
<div>
<img src='a.jpg' />
<img src='b.jpg' />
</div>
</body>
</html>
Edit: Or even better, if all you have are the images in the box, don't let it wrap at all:
<html>
<head>
<style>
div {
width: 80%;
background: #acf;
white-space: nowrap;
overflow: visible;
}
div img {
width: 50%;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div>
<img src='a.jpg' /><img src='b.jpg' />
<!-- Don't put a space between the images. -->
</div>
</body>
</html>