I've got an HTML element that extends beyond the browser window to the right, and I want some spacing between it and the document edge.
The obvious (to me) approach would be to add padding to the body so there is some space around everything in the document. But, that doesn't seem to work for things that extend beyond the browser width. Adding a margin-right to the element doesn't work either.
This jsfiddle should illustrate the problem pretty clearly:
https://jsfiddle.net/sccottt/qjajhL05/2/
I feel like I'm spacing on something obvious here.
EDIT: Add width to the body
https://jsfiddle.net/swordys/2cwhudxr/8
<p>
Scroll that way →
</p>
<div id="wide-thing">
I want padding on this side →
</div>
CSS
body {
padding: 25px;
width: 1500px;
}
#wide-thing {
background-color: #cf0;
height: 100px;
width: 100%;
text-align: right;
}
Found a neat working solution in this answer: https://stackoverflow.com/a/22302368/749635
This code allows the body element to expand to fit whatever wide elements are inside it:
body {
float: left;
min-width: 100%;
}
Related
I've been working on my website again, but have come across this very bizarre issue. Most of the chartcontainer's adjust to the width of the web page. However, the top 2 are being overridden by what looks like the element.style attribute as shown here:
This means that when the web page is first loaded: http://newton-poppleford-weather.co.uk/trends.htm, the width of the top 2 charts are wider than what the page allows for (100%).
I've tried to code style specific HTML after the 'div id="containerx"' to try and override it but that doesn't work. For example:
<div id="chartcontainer1" style="width: 100% !important">
I'm not sure how/if I can edit the element.style code as after researching it seems that this is set in stone.
Thanks for your help.
William
Add css this way
#chartcontainer1 {width:100% !important;}
The main reason for the horizontal scroll is that you have a 100% wide content and additional padding on left and right here:
#content {
width: 100%;
padding-left: 10px;
padding-right: 10px;
padding-top: 120px;
}
Change it and leave out the left and right padding to:
#content {
width: 100%;
padding-top: 120px;
}
Background:
I'm trying to visualize the structure for my future pages and containers in the full screen.
Current JSFiddle:
Available here.
<div class="top">top</div>
<div class="middleleft">left</div>
<div class="center">center</div>
<div class="middleright">right</div>
<div class="bottom">bottom</div>
.top
{
background-color: yellow;
height: 20%;
}
.middleleft
{
float: left;
background-color: blue;
width: 20%;
}
.center
{
float: left;
background-color: white;
width: 60%;
margin: auto;
height: 60%;
}
.middleright
{
float:left;
background-color: red;
width: 20%;
}
.bottom
{
height: 20%;
background-color: green;
}
Problem:
For some reason, even with height defined on the CSS, it does not fill the entire screen to the bottom, linking only enough background color height and width until the text ends.
Need:
What code change is needed to fill the screen to the dimensions it has (like the 60% width on the center div), without having to write characters to the bottom to fill out the div on the screen?
Code type restrictions:
I do not wish to use JavaScript or JQuery in the solution, only CSS and HTML.
Many Thanks
JSFIDDLE CODE
I added this:
html, body {height:100%;}
Then I set your center div to height 100% (and made it pink so it can be seen more easily).
EDIT: I left your side divs alone as I'm not sure what you want to do with those, but I hope this helps.
Wrap the top/center/bottom content into one class allowing the left/right divs to merely sit outside of the wrapper.
This can be achieved, but I think you need to ask yourself why you want to do this. Today, with mobile there is no standard screen size, so a full screen for one screen is not going to be a full screen for another.
Instead, why not try adding some real content to your proposed structure and see how it stacks up then?
Or, if it's purely for mockup purposes, then maybe use some graphics software where it's much easier and quicker to move things around.
I have the whole page set to gray as the background color, but would like only the content area to be set to a different color. According to my CSS, this should be happening but it isn't. Why not?
html,
body {
background-color: #FAFAFA;
}
#page-wrapper {
margin: 0 auto;
padding: 0;
width: 1024px;
}
#content {
background-color: blue;
}
OK, well, I thought there might be an obvious answer, because this is a severly slimmed-down version of my code. Yes it has content and there are things in the page-wrapper.
The jsfiddle link is here: http://jsfiddle.net/2pzo80Lu/
Also, if anyone has critiques of the code otherwise, it would be much appreciated.
You need to add overflow:auto to your rules for #content because the children are floated. Floating them essentailly removes them from the normal flow and collapses the parent since it behaves as if there's no content. Adding the overflow rule restores the behavior you seek.
#content {
background-color: blue;
overflow:auto;
}
jsFiddle example
your elements inside #content div is floated right and left so the div has no height ( 0px ) , you can solve this in css by adding the following code
#content {
background-color: blue;
overflow:auto;
}
or in html by adding the following code before the close of the element of #content
<div style="clear:both;"></div>
this will clear any floating and you code should work very will. good luck
They say, that a single picture can explain more than a tousand words, so here's my "more": http://www.imagebanana.com/view/hcqsz5fs/cols.png
My goal is to have the columns as shown on the image, with them together having 100% body width.
And my fiddle is here: http://jsfiddle.net/c2JH3/ (note that this is just a mockup of my current work).
How can I achieve this?
A Quick Note
In your comments, you are saying that you can't use a background image because the height is variable.
The way to fix this is using multiple images, and tell them to repeat or not to repeat on different parts of the page. But I'll go over this after I answer your question directly.
Short Answer
To get 100% body width, you'll want to use percentages (%) on for your width rules. Like this:
#left {
width: 60%;
}
#right {
width: 40%;
}
Fixing Some Problems
One problem you are bound to encounter when you have content that passes the bottom of the screen. In this case, you need to tell the divs to stay side by side.
This should do the trick:
#left {
position: absolute;
top: 0;
left: 0;
width: 60%;
}
#right {
position: absolute;
top: 0;
right: 0;
width: 40%;
}
Back to the Note
Believe me, you don't want to be using percentages on your widths. It makes sizing and scaling extremely hard to design nicely, and changes that you try to make in the future probably won't work without a complete redesign of your css.
Like I was saying before, you want to use multiple images. You'll have background image on the body tag that - going by the design you provided - has the gray-to-orange fade in it. The css would look like this:
body {
background-image: url('path/to/header.jpg') no-repeat;
}
You would then have a wrapper div like the one you already have, that holds the content and such. Inside the wrapper you have:
A header (the logo and navbar), which would have no background (so you can see the body background).
A featured section which holds that really big image in the middle. You can use negative margins to get it centered.
A subnav section for those images in the middle. This would have it's own background image that has a matching part of the background of the body so that it appears to flow in as the image does.
A content section that holds all of the content of the page. This would have an image repeating vertically to look continuous.
#content {
background-image: url('path/to/slice.jpg') repeat-y;
}
A subfooter section that has the curved part of the page (that gray-to-orange curve at the bottom).
And finally a footer section that has all the stuff on the very bottom.
You can use the same structure on the inner pages, you would just use different images and spacing to change the look of the page.
To Sum Up
You will never, ever need to have a 100% width for your wrapping div. (I say this to generalize, there are certain styles that use this, but they aren't the same kind of design).
What you should always try to do first is create images for the body, header, content, and footer sections that create the look you want.
Then have your wrap be a set width in pixels that will stay in the center of the page, while the margins increase and reveal more of the background image.
Have fun and good luck with your design!
I don't know how to use fiddle. But this worked out fine for me.
I just used the background colors and borders to properly show the differences
<!doctype html>
<html>
<head>
<title>xxx</title>
<style>
body{
margin: 0;
}
#wrap {
width: 100%;
}
#left {
width: 600px;
float: right;
border: 1px solid #000000;
}
#right {
width: 350px;
border: 1px solid #000000;
}
#container_left {
width: 55%;
float: left;
background: red;
}
#container_right {
width: 45%;
float: right;
background: blue;
}
</style>
</head>
<body>
<div id="wrap">
<div id="container_left">
<div id="left">
<p>Content</p>
</div>
</div>
<div id="container_right">
<aside id="right">
<p>Sidebar</p>
</aside>
</div>
</div>
</body>
Cheers!
Thank you all for your answers and ideas. They were helpful and I did learn something new (my biggest 'thank you' goes to #Jon for a really great, great post). But, since I can't solve this neither with percents nor backgrounds (since my design is a little more complicated that the one provided), I made my way with jQuery. To sum up, here's my mockup fiddle.
Note: sometimes you'll need to change left 125 to 126, just to make sure both ends meet.
I am using the following bits of code to keep my menu items fixed while allowing for the scrolling of content because it seems to be the most stable method across all browsers.
body { overflow: hidden; }
div.content { height: 100%; overflow: auto; }
My problem is simple, and yet I can not seem to figure it out, the content inside the tag butts up against the scrollbar for the div area and it makes reading much more difficult. How can I get a margin between them (apart from floating a transparent image to the right to create space, there HAS to be a better way)?
div.content { height: 100%; overflow: auto; margin:0 15px }
I might have misunderstood you though, post some HTML if I have.