index.html
<div name="MainContent" id="MainContent" class="MainContent">
</div>
index.sass
body, html
border: none;
outline: none;
background-color: #FFF;
color: #000;
margin: 0 0 0 0
#MainContent
border: none;
outline: none;
position: relative;
background-color: #000;
color: #FFF;
margin: -250px 0 0 100px;
float: left;
width: 2000px;
min-width: 2000px;
max-width: 2000px;
height: 500px;
min-height: 500px;
max-height: 500px;
top: 50%;
Horizontal scrolling is working, however, only by using the bar at the bottom of the page. If i attempt to use the scroll wheel the page will not scroll. Any ideas as to why that is and how to make that work?
To remove your body scroll property, add overflow:hidden to your html or body styles.
body,html {
overflow:hidden;
}
To make your div scrollable, set its width to 100%, and enable horizontal scrolling by adding overflow-x:auto. Now the width of the div will be 100% to the body , and if the content inside the div has higher width, then the scroll will get enabled.
#MainContent {
width:100%; /* you can even set a static width here, which could be less than the body width*/
overflow-x:auto;
}
NB: Please REMOVE the min-width:2000px and max-width:2000px from the #MainContent style
Related
I am trying to format my webpage so i can have a border-left and border-right. I want to have the border take up 100% of the page height even if the content on the page does not.
I have been able to achieve this but, if content on the page exceeds 100% of the page height and the user must scroll, then the border does not fill the extra height on the page.
How can I fix this with CSS?
I am using Ruby on Rails, and I am adding my CSS to the application.html.erb file like so:
<body>
<div=borders>
<%= yield %>
</div>
</body>
<style>
.borders {
padding-top: 2%;
padding-left: 5%;
padding-right: 5%;
padding-bottom: 5%;
height: 100%;
border-left: 120px solid #808080;
border-right: 120px solid #808080;
}
</style>
This is an example from one of the pages on my site of what it looks like currently:
If i remove the height: 100%; then the border will only fill as far as the page on the content goes. So if only 10% of the page is used then that is as far as the border goes. Like so:
The real issue here is overflow. When content is bigger than 100% of viewport, the borders will not continue because they are "capped" at 100%.
You could either use overflow: auto or replace height: 100% in .borders { ... } to min-height: 100%;
Of course for percentage height to work, you must have HTML and Body with 100% height defined (html, body { height: 100%; }).
Working Example:
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
.borders {
padding-top: 2%;
padding-left: 5%;
padding-right: 5%;
padding-bottom: 5%;
min-height: 100%;
border-left: 120px solid #808080;
border-right: 120px solid #808080;
}
.borders div {
border: 1px dashed red;
height: 10000px;
}
<div class="borders">
<div>long text</div>
</div>
try this
<body style="height: 100%">
<div class="border">
</div>
</body>
With CSS3 :
.border{
...
height : 100vh;
...
}
How to style this div both with a min-width and width
css
#diva {
position: relative;
margin: 0 auto;
min-width: 75px;
width: auto;
height: 50px;
padding: 4px;
color: white;
background-color: red;
}
html
<div id="diva">
hello
</div>
When i set width to auto, this div occupies the full page width.
display:inline-block;
Just add display:inline-block; to the styles for the div. That should work :)
http://jsfiddle.net/432kxywu/
I have a div that is added dynamically using JS that includes an overlay and a contained element that should scroll with the page as necessary (I don't want any scrolling to happen within that div, which resizes to fit the content). The overlay is set to width=100% and height=100% to cover the entire page. However, when the contained div ends up being taller than the viewport, this causes the overlay to stop short after the height of the viewport.
That explanation kind of sucks so probably easier to see what I mean, so here's a simplified fiddle:
http://jsfiddle.net/72SU5/
Here's the CSS I'm using:
#overlay {
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
position: absolute;
top: 0;
z-index: 20;
}
#overlay > div {
width: 100px;
border: 1px solid #ccc;
padding: 20px;
padding-bottom: 40px;
background: #eee;
margin: 50px auto;
}
My question is how I might have the overlay extend to 100% of the new height once the hidden content is shown. I'm fine using JS/jQuery to accomplish this.
Or, if there's a better pure-CSS approach that requires refactoring, I'm open to that as well. The only requirement is that the overlaying content scrolls with the page if the content causes it to extend beyond the viewport.
Add the following property to your #overlay CSS class:
overflow:auto;
Fiddle
You could also remove the height property from the #overlay class.
http://jsfiddle.net/72SU5/6/
#overlay {
width: 100%;
height: auto;
background-color: rgba(0,0,0,0.5);
position: absolute;
top: 0;
z-index: 20;
}
#overlay > div {
width: 100px;
border: 1px solid #ccc;
padding: 20px;
padding-bottom: 40px;
background: #eee;
margin: 50px auto;
}
I have a page with 2 floating div: one for the page content and another for a widget sidebar. The page content max-width is set to 70% and the width of the sidebar is a fixed value of 275px +padding. When I'm resizing down my page (playing with the browser window size), everything looks right, until the sidebar takes more than 30% of space and goes under the left div.
When resizing the browser window, is it possible to have the right div keep its 275px width and make it squash the left div so it goes from a max-width of 70% down to 5% if necessary?
Here's my testing website if you want to see what I'm talking about exactly: http://mywptestsite.is-great.org/page-height-and-sidebar/
#primary {
float: left;
clear: none;
max-width: 70%;
margin-right: 22px;
}
.sidebar .entry-header,
.sidebar .entry-content,
.sidebar .entry-summary,
.sidebar .entry-meta {
width: 100%;
padding: 0 20px 0 50px;
}
.site-main #tertiary {
float: right;
clear: none;
width: 256px;
position: static;
height: auto;
}
.site-main .widget-area {
padding: 30px 20px 0 0;
float: none;
width: 100%;
}
I would use display: table and table-cell for that.
JSFiddle: http://jsfiddle.net/maximgladkov/M3wP8/
HTML
<div id="container">
<div id="content">
Content
</div>
<div id="sidebar">
Sidebar
</div>
</div>
CSS
#container {
display: table;
width: 70%;
margin: 0 auto;
}
#content, #sidebar {
display: table-cell;
}
#content {
max-width: 70%;
border: 1px solid blue;
}
#sidebar {
width: 254px;
border: 1px solid red;
}
I have a real simple page that has a header, footer, body, and left and right nav's.
All of them together make a nice rectangular page thats 100% of the width.
All made using div's in a css sheet.
I have 20 image thumbnails in the body and when the page is resized they push my footer out of place.
To fix this i would like to add a scrollbar to the body div.
I have already done this with overflow-y: auto;
However,
Adding the scrollbar seems to add some space to the right side of the body, forcing it to be placed underneath the left and right nav's blowing everything up. Please Help.
#headerElement {
width: 100%;
height: 50px;
border: 2px solid #000000;
background-color: #F8AA3C;
}
#bodyElement {
margin-left: 10%;
width: 80%;
color: blue;
height: 400px;
background-color: #F8883C;
border: 2px dashed #F8AA3C;
overflow-y: auto;
}
#leftNavigationElement {
float: left;
width: 10%;
height: 400px;
border: 2px dashed #FF0000;
background-color: #8F883C;
}
#rightNavigationElement {
float: right;
width: 10%;
height: 400px;
border: 2px dashed #0000FF;
background-color: #F888FC;
}
#footerElement {
clear: both;
border: 2px dashed #00FFFF;
height: 50px;
width: 100%;
}
Because the scroll bar is not inside the width of the div but still takes up space, you need to give it some space or negative margins. I would guess a width of 18 pixels for IE, and since you cannot set that in IE, that will have to be your default.
::-webkit-scrollbar { width: 18px; margin-right:-18px; }
::-moz-scrollbar { width: 18px; margin-right:-18px;}
::-o-scrollbar { width: 18px; margin-right:-18px;}
You'll need to either restructure the page so it flows better or force the scrollbar with {overflow-y: scroll} and adjust widths accordingly so the layout doesn't break.