Demo
I've got a page with three sections that are 100% width and 100% height of the body with the exception of one section which is 200% the width of the body. On this section I'd like to be able to scroll horizontally to see the rest of the div, but I don't want the rest of the sections to have white space to the right of them as they currently do. If I set body{ overflow-x:hidden;} I can't scroll horizontally on the wider div. Any suggestions?
You need to encase the width:200%; div inside a container that has 100% width, so that it stays within the body, then set the container to overflow-x:auto;
Here is a jsFiddle to show what i mean.
Related
I have a blog with some content in it (divs). When i click a div a lightbox-like article appears. It has a transparent black container and on the middle an article. The container has position absolute , width and height auto top 0 and z-index over all content beneath
Its all ok until i resize the window. The the content of the body, the one underneath the article, goes beneath it. i want to make the container resize and stretch to cover that content too. And also to be able to scroll. Help please.
You can set the height and width of the box using vh and vw units which are set in terms of the height and width of the window. http://www.w3schools.com/cssref/css_units.asp
So basically when I shrink the page to say 1000px wide, enough for the x-axis scrollbar to appear. When I scroll to the right the navbar stops filling the 100% width, rather just the viewable width when you shrink the window.
I have had a fiddle around and cannot work out why it is doing this.
Here is the page:
http://astrodeer.com.au/habbonauts/test/index.php
Any help is appreciated.
100% of the width is 100% of the width of the parent (which is the screen size). You can scroll to the right, because the header is wider than that, but the bar still won't fill that width.
The easiest fix, without modifying the HTML, is adding this style to your CSS. Doing so will make the nav-bar background at least 1180px, which is the same size as the header.
.nav-bar {
min-width: 1180px;
}
Alternatively, you can put the nav-bar inside the header, so it will grow to 100% of the header width.
Add this style, it works fine.
body{ float:left; min-width:100%;}
or
body{ display:inline-block; min-width:100%;}
Body will not automatically stretch to 100%; so we add these.
I have a case in which i have to show the content horizontally with overflow-x:scroll;.
Now in this Fiddle the first block has overflow-y:scroll; which gives a scroll and user is able to scroll the content. Where as in the second block user is not able to scroll the content. I want an output this way in the Image, where user can scroll horizontally and see the content.
You need to define an inner container for your second block and give it a width.
<div class="test2"><div>dfdsfdsfds</div></div>
and
.test2 div {
width: 600px;
}
http://jsfiddle.net/qM45U/8/
The reason for this is that by default, when test reached it's width it will word wrap whereas within the y-axis it will just increase the height of the container (if allowed). You could just set white-space to nowrap but then you'd end up with the longest single line of text in the world :)
Give your second div a child div to wrap the content that has the same height but a bigger width. Then style it:
.test2 div {
width:500px;
height:100px;
}
jsFiddle example
I have my website that is 1000px wide and centered. I have a div, inside the centered 1000px div, that is 500px left and 700px width. The div overflows out of the 1000px div to the right by 200px.
Everything looks great but on smaller monitors the overflowing div creates a scroll bar on the bottom.
Is it possible to mark this overflowing div as something like "do not add to scrollable area"?
I only want the overflowing part of this div to be visible if there is enough room on the screen.
**Added a Picture to help describe the issue.
**Added js fiddle here << had to use bit.ly cause it won't let me post jsfiddle
You should use height and width in percentage. By using this it will work on every resolution and div never get scrolled.
Like
div.body{
width: 100%
margin: 0 auto;
}
Could you let me know what is exactly your HTML DOM structure?
Add this CSS to your overflowing div. Anything that spills out of the div will not show in smaller monitors.
overflow: hidden;
Add overflow:visible; to the div with 1000px width. This will make the portion of the 700px width div to extend to right over the yellow div.
To prevent the scrollbar give overflow:hidden; to the body tag. But if the screen width is less than 1200px, the right portion will get cut. Try this anyway.
I'll try to explain this as best as I can ;)
Basically, I have a sidebar <div id="sidebar"></div> which is floated to the leftside and has fixed position. I planned to have another div just after it that will contain the content, but the problem is that, because sidebar has fixed position the div that I expect to be after it (to the right side) is appearing behind sidebar. This is an issue, because I need to use margin-left: 310px (310px is a width of sidebar) to make another div appear after the sidebar, so instead of occupying 100% width left on the page without a sidebar's 310px it occupies full page and causes align problems.
It's hard to explain, but if you visit my page http://freshbeer.lv/development/en/ you can see white div, it has margin-left: 310px; and width: 100%; inside it there is a grey div with width:700px; and margin: 0 auto;. I expect grey div to be aligned in the middle between 2 images at the background, but as white div is occupying more space than needed it doesn't happen. Could anyone suggest a solution please?
Maybe I am misunderstanding your question, but in #container you can either remove width: 100% or change it to width: auto.
The problem is that it is getting the width of the parent container (which if you go far enough back is taking the width of your browser window) and then adding the margin. So it is 100% + 310px. Hence the reason it is 310px wider than your browser window.
Try this. First, make sure that your side bar is first in your script. Then, do not set the width of your main section. Instead, just say display:block. So something like this:
<html>
<body>
<div style="width:310px; float:left; background:#dddddd; height:500px;"></div>
<div style="margin-left:310px; display:block; background:#ff0000; height:500px;"></div>
</body>
</html>
In the above example, the top div is your side bar, and the second your main body section. I just added the heights so I could see the columns during testing.