I'm trying to make a centered page with a fixed width containing a single element expanding above these borders (as Design element).
In wide viewports it works as expected, but when the window gets smaller than the width of that element it will cut off the left side but will make the page scroll to view the right protrusion.
Is there a way to have both sides equally cut off in small viewports?
#wrapper {
position: relative;
width: 900px;
overflow: visible;
background: #CCC; /*just for better viewing */
padding: 20px 0; /*just for better viewing */
}
#navigation {
position: relative;
width: 950px;
margin: 0 -25px;
text-indent: 25px;
background: rgba(255, 0, 0, 0.6); /*just for better viewing */
<div id="wrapper">
<div id="navigation">
Some Content
</div>
</div>
For the margin, use a percentage instead of px for mobile devices, so it fits the viewport
#wrapper {
position: relative;
width: 110%; /* Change this percentage for more accurate width */
overflow: visible;
background: #CCC; /*just for better viewing */
padding: 20px 0; /*just for better viewing */
}
#navigation {
position: relative;
width: 950px;
margin: 0 -25px;
text-indent: 25px;
background: rgba(255, 0, 0, 0.6); /*just for better viewing */
}
HTML:
<div id="wrapper">
<div id="navigation">
Some Content
</div>
</div>
Also, change the wrapper width to a percentage, if you want that to fit.
A key here may be to remove the navbar from the wrapper and give it a negative top margin and also change the overflow of your body to hidden such as in this Fiddle
Related
I'm new to CSS.
trying to study some layouts and ran into this issue.
in HTML. I've got
<div id="wrapper">
<aside id="sidebar" class="left">
</aside>
<div class="content">
Lorem ipsum blah blah (cutted: about 100lines)
</div>
<aside id="sidebar" class="right">
</aside>
</div>
I'm trying to prevent the left and right sidebar(aside) from scrolling. No matter how much I scroll the main, it will always stay there; I've set its position to fixed and it looked all fine. the issue is, the main content is overlapping with the right sidebar(aside) when resizing. I've tried position: relative and absolute to the right and changing it to div but nothing happens.
the goal is - when my chrome browser shrinks, it should show the Horizontal/vertical scrollbars without any overlapping of main contents. no matter how long my main content is, the sidebars should always be there! Thank you in advance!
CSS below
body, html {
font-family: Helvetica;
background-color: rgba(0, 0, 0);
}
#sidebar {
position: fixed;
width: 400px;
height: 100%;
margin-top: 120px;
top: 0;
}
.left {
left: 0;
bottom: 0;
background-color: rgb(82, 50, 50);
}
.content {
display: inline-block;
background-color: rgb(255, 255, 255);
margin-top: 120px;
top: 0;
width: 800px;
height:100%;
margin-left: 400px;
margin-right: 400px;
}
.right {
right: 0;
bottom: 0;
background-color: rgb(255, 217, 0);
}
#wrapper {
margin-left:0;
margin-right:0;
max-width: 1600px;
border:1px solid white;
}
You need to give the .content a dynamic width instead of the static one you've set.
Try this
.content {
width: calc(100% - 400px - 400px); /* where 400px and 400px are the width of the sidebars */
}
The problem is you are using position: fixed and you are using px:
An element with position: fixed; is positioned relative to the
viewport, which means it always stays in the same place even if the
page is scrolled. The top, right, bottom, and left properties are used
to position the element.
By using the px, the element size will always be 400px even though the window size is very small. To prevent the content from overlapping to others and keep the same ratio with other elements, you should use % which is the percentage for the container's size and it will keep the same ratio between the aside and div no matter the window size.
Another soluation is to you media screen
The #media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.
Check more here
If you want to prevent aside from scrolling, just use:
aside{
overflow: hideen
}
I have two divs contained within a larger div as follows:
<div class="content-container">
<div id="content">
Bunch of text ... omitted
</div>
<div id="sidebar">
</div>
</div>
The css corresponding to these two are as follows (slightly edited for length):
#content {
margin: 0;
padding: 15px;
width: 720px;
height: 100%;
position: absolute;
left: 0;
border-left: solid;
overflow: auto;
}
#sidebar {
margin: 0;
padding: 15px;
width: 198px;
position: absolute;
right: 0;
height: 100%;
background-color: white;
border-style: solid;
}
.content-container {
position: relative;
width: 978px;
height: 1060px;
}
I have read that the width attribute does not include padding. When I load the page up in Chrome and inspect the elements, content has a width of 705, instead of the expect 720. However, sidebar has the correct width of 198px. Does anyone have an explanation?
Does anyone have an explanation?
It's because of the scrollbar (resulting from overflow: auto).
There are some cross-browser inconsistencies related to the scrollbar and how it is included in the width calculations. In Chrome and Safari, the width of the scrollbar isn't included in the content width, whereas in Firefox and IE, the width of the scrollbar is included in the content width.
In the jsFiddle example that you provided, you will notice that the content width is 717px in Chrome after removing the scrollbar. With the scrollbar, 15px will be subtracted from the content width (resulting in 702px).
try to clear any possible default margin or padding for the parent div:
.content-container {
margin:0px;
padding:0px;
}
I know similar questions have been asked numerous times, but I've tried a number of answers and none seem to work for my situation. I've found a lot of solutions for sticky footers, but that's not exactly what I'm looking for, or maybe I haven't figured out how to use correctly for my situation:
I have fully fixed position navigation (header/sidebars/footer). The content flows on top of the header and footer.
My content wrapper layer is currently a 100% width/ 100% min-height
layer above the navigation layer, and using simple padding on top/bottom and margins on left/right, I'm able to show the navigation elements.
Inside the wrapper layer I have my content div, which has my page
background and a box-shadow. But I can't get the content div to
expand to the full height of the wrapper, because the wrapper height
is based on percentage. So everything works perfectly when I have
content that fills or overflows the window, but when I don't, the content div is too small.
Sticky footer doesn't work in this situation because the sticky footer just covers the content (the content itself is still 100% height). I basically want the content to be min-height 100% - minus the 50px header and 50px footer.
Is there any css solution to this without using a javascript hack or calc()?
I would be willing to have the header + footer not be fix positioned - but I want to keep the box-shadow on the content div (i.e. 50px from top and bottom of the page).
JSFiddle:
https://jsfiddle.net/tyhenry/n9rpbj3m/5/
HTML:
<div id="nav">
<div id="header">
header
</div>
<div id="left-side">
left sidebar
</div>
<div id="right-side">
right sidebar
</div>
<div id="footer">
footer
</div>
</div>
<div id="page-layer">
<div class="page">
content<br>
content<br>
content<br>
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
html, body{
background-color: #eeffff;
text-align: center;
margin: 0;
padding: 0;
height: 100%;
}
#header {
position: fixed;
top:0;
left:0;
width: 100%;
height: 50px;
background-color: #ddd;
}
#left-side {
background-color: #bbb;
position: fixed;
left: 0;
top: 50px;
width: 50px;
height: 100%;
}
#right-side {
background-color: #bbb;
position: fixed;
right: 0;
top: 50px;
width: 50px;
height: 100%;
overflow: hidden;
}
#footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #aaa;
}
#page-layer{
position:relative;
padding: 50px 0 50px 0;
margin: 0 50px 0 50px;
min-height: 100%;
}
.page {
background-color: #fff;
box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.8);
width:100%;
}
If you change the display property to flex it fills the whole (height between header and footer) and adjusts when you resize.
#page-layout {
display: flex;
}
give this you the desirable outcome ? can i use viewport units
add:
.page {
min-height: 100vh; /*min-height not height :)*/
}
Try this updated fiddle https://jsfiddle.net/n9rpbj3m/6/
#page-layer{
position:absolute;
top:50px;
left:50px;
right:50px;
bottom:50px;
}
.page {
position:relative;
background-color: #fff;
box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.8);
height:auto;
min-height: 100%;
width:100%;
}
I'd like to create a DIV as big as the browser window and then show the website using vertical scrolling. The effect I am looking for is similar to the one in THIS PAGE (note the big banner that is always as big as the browser window, and the content at the bottom):
With this HTML in mind:
<div class="banner">
This banner is always big like the browser window
</div>
<div class="content">
Content of the website
</div>
This is one way to do it:
.banner {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: red;
}
.content {
width: 100%;
position: relative;
background-color: green;
}
Problem is, if I use absolute position for this DIV the content of my website start from the top of the page and is hidden by the banner.
Is there any way to implement this without using javascript?
Thanks in advance
Solution : FIDDLE
CSS:
html,body {
height:100%;
margin:0;
padding:0;
}
.banner {
height:100%;
background-color: red;
}
.content {
background-color: green;
}
Explanation :
The point is to get a base that fits the total window size. You can get this base by setting <body> and <html> tags to 100% height (they expand the total width by default). They then expand to 100% height of the parent which is the window.
So you don't need absolute position anymore to size you elements like the winow.
You can use 100% height on the first level children (in your case .banner) to have them fit the total window height. You will not have to set 100% width on most elements as they automaticaly expand the whole width (block elements like divs that are not floated and in relative or static position).
Your page will keep the default positioning and your .content div will start just under the window size .banner
Try this:
<style>
.banner {
background-color: red;
margin: 0px 0px 0px 0px;
padding: 0px;
}
.content {
width: 100%;
margin: 10px 0px 0px 0px;
padding: 0px;
background-color: green;
height: 100%;
}
</style>
I have this container which can scroll the content. I would like the header in this container to always stay in the top.
http://jsfiddle.net/z9ze5/
Container:
.lists {
width: 300px;
height: 250px;
margin: 30px auto;
background: #39C;
overflow: scroll;
position: relative;
}
Header:
.box_header {
width: 100%;
height:30px;
overflow:hidden;
position: absolute;
margin: 0;
background: #DDD;
z-index: 999;
}
If you are willing to alter your mark-up, here is one way of doing it:
<div class="lists">
<header class="box_header">
<h1>HEADER 2</h1>
<div class="setting" id="btn2"></div>
</header>
<section class="content">
<p>Lorem Ipsum ....</p>
</section>
</div>
Wrap your scroll area in a <section> (or other block level element).
For your CSS:
.lists {
width: 300px;
height: 250px;
margin: 30px auto;
background: #39C;
position: relative;
}
section.content {
width: 300px;
height: 220px;
margin: 0 auto;
background: #39C;
position: relative;
top: 30px;
overflow: scroll;
}
Please see fiddle: http://jsfiddle.net/audetwebdesign/nGGXx/
More Advanced Example
If you study the following example:
http://jsfiddle.net/audetwebdesign/fBNTP/
uou can see how your scrolling boxes could be applied in a semi-flexible layout.
I lined up two scrolling boxes side by side and made their width proportionate to the width of the page.
The height is trickier to adjust. I fixed the height of the parent container, see the following rule:
.contentWrapper {
border: 1px solid red;
margin-top: 1.00em;
padding: 30px 0;
overflow: auto;
height: 400px;
}
If you change the height from 400px to some other value, the scrolling boxes will adjust themselves.
Hopefully, these examples will give you and others some more insights into how to build these more advanced layout designs.
If you want a non-css fix, add this listener...
$('.lists').scroll(function() {
$('.box_header', this).css('top', $(this).scrollTop()+'px');
});
and then change .lists css to give relative positioning
.box_header {
width: 100%;
height:30px;
overflow:hidden;
position: relative;
margin: 0;
background: #DDD;
z-index: 999;
}
Any position absolute within a position relative is absolute to the relative container. In order to have a header that stays in position, you'd need to position it above, not within, the scrolling container.
look at adding position: fixed to your header div .box_header. You may have to add padding of the height of the box header div to section.content but as you have that set to 30px that should be fine. IE6 and lower has issues with fixed positioning but hopefully we can live with that now - less people are using that than are still listening to Moby.