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;
...
}
Related
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
trying to create a new layout but have run into an issue.
Currently, i have a fixed sidebar to the left and then the content floated right.
The side bar has a width of 18%, and then the other content 82% width.
This works fine, but it looks ugly and is unstable at larger screen sizes.
I wish to however to make a change, and make the sidebar a fixed width. This poses a problem then on the other content which i want to take up the rest of the room.
How can i have the content to the right, to still take up the rest of the room whilst keeping a fixed sidebar?
Hope this makes some sort of sense!
Here is a js fiddle of the problem i face:
http://jsfiddle.net/Uyv6w/
And what i current do:
http://jsfiddle.net/Uyv6w/1/
Layout is like so:
<div id="container">
<div id="sidebar"></div>
<div id="content">
<div id="inner"></div>
</div
</div>
I guess I'm not exactly sure what you're looking for - but I tried with this FIDDLE.
I floated the major divs left, then just gave a min-width and max-width to the container.
Could you provide some more details?
CSS
html, body {
width: 100%;
height: 100%;
background-color: #333;
}
#container {
height: 100%;
min-width: 600px;
max-width: 1200px;
}
#sidebar {
float: left;
height: 100%;
width: 100px;
background-color: #9b59b6;
}
#content {
float: left;
width: 82%;
background-color: red;
overflow: hidden;}
#inner {
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: gray;
height: 1000px;
padding: 10px;
}
img {
display: block;
width: 300px;
margin: 20px 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 recently tried out the div with different shape like triangle trapezoid etc.
HTML:
<div class="triangle">HI nice to meet you guys</div>
CSS
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
}
Previously, the content appears properly when the div is a square (height and width are 100px).
When I style the div to look like a triangle, then the content oveflows.
How can I make this one as proportional in order to appear properly inside the div.
See fiddle: http://jsfiddle.net/7qbGX/2/
Any suggestion would be great.
try this: LINK
.triangle{
width: 0px;
height: 0px;
border-style: inset;
border-width: 0 100px 173.2px 100px;
border-color: transparent transparent #007bff transparent;
float: left;
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
.triangle p {
text-align: center;
top: 80px;
left: -47px;
position: relative;
width: 93px;
height: 93px;
margin: 0px;
}
Your Height and width is 0. You won't fit any text into it. It will either overflow or you can set overflow to "hidden", but than you will not see anything cos the div have the size 0.
your div is invisible to see in your actual div try to give background-color to that div.
[see demo]http://jsfiddle.net/salwenikhil0724/7qbGX/6/
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
background-color:red;
}
.triangle p {
text-align: center;
top: 40px;
left: -47px;
position: relative;
width: 93px;
height: 93px;
margin: 0px;
}
This is for displayed text properly, you need to mentioned width property as follows:-
<div style="width: 10em; word-wrap: break-word;">
Some longer than expected text with antidisestablishmentarianism
</div>
for Horizontal scroll you can put overflow-x:hidden its up to you dear.
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.