My objective is to make a website for my portfolio.
I have a div for the menu that wanted to be on top of another div that works as a container for all of my images. The images have to fill 100% height of the browser.
The problem is, that I wanted my website to scroll horizontally and when I start to add content, as soon as the width goes over the 100% of the browser window the new image goes under the first image making it scroll horizontally.
What can I do to correct this?
CSS
body, html {
height: 100%;
}
#main {
width: 100%;
height: 100%;
background-color: #000;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
#menu {
width: 200px;
height: 500px;
background-color: #fff;
position: absolute;
top: 10px;
left: 10px;
overflow: scroll;
z-index: 2;
}
#img {
height: 100%;
float: left;
overflow: scroll;
}
Remove the width from your #main tag. As soon as an element hits that 100% it's going to move down to the next line.
Related
I have a parent container containing 3 inner divs. I only want the middle inner div to scroll horizontally. Here is my code:
<div class="outer-container">
<div class="top-inner-container">
xoxoxoxoxoxo
</div>
<div class="middle-inner-container">
only this must scroll ===> yeah yeah yeah
</div>
<div class="bottom-inner-container">
oxoxoxoxoxox
</div>
</div>
.outer-container {
height: 470px;
position: relative;
}
.top-inner-container {
position: absolute;
width: 100%;
top: 0px;
left: 0px;
height: 70px;
}
.middle-inner-container {
white-space: nowrap;
width: 1480px;
background-color: grey;
overflow-x: scroll;
position: absolute;
top: 60px;
left: 0px;
height: 340px;
display: flex;
}
.bottom-inner-container {
position: absolute;
// background-color: #fff;
width: 100%;
top: 404px;
left: 0px;
}
I've tried many variations and this is the best I get but here all 3 divs scrolls.
Any idea how to fix this?
Update:
To reiterate. Instead of just having the middle div scroll horizontally all 3 divs scroll. The scroll bar appears on the parent instead of just on the div with class middle-inner-container. The desired result is where only the div with class middle-inner-container scrolls horizontally.
IMPORTANT
Ignore the vertical scroll for now. I just realize with more content the vertical scroll works. I'm not concern with vertical scroll just horizontal scroll. Top and bottom should not scroll horizontally, only the middle div should scroll horizontally. The "xoxoxoxoxo" should always be visible on the screen when scrolling horizontally. Thank you.
Here is a fiddle
You can make the middle container horizontal scroll working by adding white-space: nowrap; to the .middle-inner-container class.
the css looks like so:
.outer-container {
height: 470px;
position: relative;
width: 100%;
.top-inner-container {
width: 100%;
height: 70px;
}
.middle-inner-container {
white-space: nowrap;
background-color: grey;
overflow-x: scroll;
height: 340px;
.block {
display: inline-block;
vertical-align: top;
}
}
.bottom-inner-container {
// background-color: #fff;
width: 100%;
top: 404px;
left: 0px;
}
}
remember to add the class block to each subsection in the middle div.
The last two days I've been reading most questions here and a lot more about 'fill remaining width' and 'escaping overflow: hidden', but I can't get my problem solved. At the moment, I seriously doubt if it is possible at all.
I have a scrolling box with full body width. On top of that I have a absolute positioned header that I need to make the exact same width as the scrollbox. My intention is to make the header 0px or (if needed) 1px in height and let the content overflow.
Here is a fiddle.
The scrollbox has a scrollbar (always visible), the header obviously not. To compensate for that, I float a fake scrollbar to the right inside the header container, and left of that a <div> filling the remaining width (being exactly the innerwidth of the scrollbox).
HTML
//THE SCROLLBOX
<div id="scrollbox">
<div id="center2">
content<br>content<br>...
</div>
</div>
// THE HEADER
<div id="header_box">
<!--- FAKE SCROLLBAR -->
<div id="scroller">
<div></div>
</div>
// REMAINING WIDTH
<div id="container">
<div id="FIRST">
<div id="FIRST_banner"></div>
</div>
</div>
<div id="SECOND">
<div id="SECOND_banner"></div>
</div>
</div>
</div>
CSS
#header_box {
background: yellow;
position: absolute;
left: 0;
top: 0;
right: 0;
height: 25px;
width: 100%;
overflow: visible;
}
#scroller {
float: right;
overflow-x: hidden;
overflow-y: scroll;
height: 50px;
width: auto;
/* visibility: hidden; */
}
#scroller>div {
width: 0px;
height: 101%;
}
#container {
display: inline;
width: auto;
height: 50px;
overflow: visible;
}
#FIRST {
position: relative;
overflow: hidden;
height: 25px;
background: pink;
}
#FIRST_banner {
position: absolute;
top: 0;
left: 50%;
height: 220px;
width: 30px;
background: crimson;
}
#SECOND {
background: darkcyan;
position: relative;
height: 5px;
}
#SECOND_banner {
position: absolute;
top: 0;
left: 50%;
height: 220px;
width: 30px;
background: blue;
}
The problem lies in the div (#FIRST) with remaining width. From all the solutions I've read only the one with
position: relative;
overflow: hidden;
works for me. It gives the exact width, lining up the center of the header and the scrollbox nicely. But I can't break out of the overflow: hidden, so it cuts off the content.
So my second thought was: wrap #FIRST in a #container and let the child determine the width of the parent. After that, I can put another div (#SECOND) inside the container with the width of the parent. It works partially. The #container has the width intended, and the #SECOND div overflows nicely but takes on the width of #header_box, as no width is set on the parent itself.
So, my questions:
Can I somehow break out of the overflow: hidden of the FIRST div? (In that case the container and second div can be removed).
Is there a way to let the SECOND div obey the width of it's parent.
Some totally different solution.
Sadly there is a catch to this all:
css only
no javascript
no flexbox
Thanks voor any toughts.
In the end, it was the good old <table> that saved the day, much simpler than I tought. There still is a fake scrollbar, but the absolute header now aligns perfect with the contents of the scrollable div behind it, and it remains fluid.
See fiddle here
HTML:
<!--- HEADER -->
<div id="THIRD">
<div id="THIRD_A">
<div id="THIRD_B"></div>
<div id="THIRD_C"></div>
<div id="THIRD_D"></div>
</div>
</div>
<!--- FAKE SCROLLBAR -->
<div id="scroller">
<div></div>
</div>
</div>
CSS:
/* The container for the header */
#header_box{
position: absolute;
left: 0;
top: 0;
right: 0;
height: 0px;
width: 100%;
overflow: visible;
display: table;
}
/* Takes on the width of its child: the fake scrollbar */
#scroller {
display: table-cell;
float: right;
overflow-x: hidden;
overflow-y: scroll;
height: 0px;
width: auto;
}
/* This triggers a scrollbar to be shown */
#scroller>div {
width: 0px;
height: 101%;
}
/* The 'remaining width' container (= screenwidth - scrollbar, equals innerwidth of scrollbox) */
#THIRD{
display: table-cell;
width: 100%;
height: 0px;
}
/* Needed to give the children a 'width' reference */
#THIRD_A{
position: relative;
width: 100%;
height: 0px;
}
/* The actual header items */
#THIRD_B {
position: absolute;
top: 0;
left: 50%;
width: 25px;
height: 220px;
background: black;
}
#THIRD_C {
position: absolute;
top: 0;
left: 10%;
width: 125px;
height: 120px;
background: black;
}
#THIRD_D {
position: absolute;
top: 0;
right: 0%;
width: 25px;
height: 220px;
background: black;
}
NOTE:
On most handheld browser, this is 1px off. It seems webkit based browsers display a tablecell of 0px width as 1px width (see this question). The solution is to wrap the table in another div with css:
position absolute;
left: 0;
right: -1px
and setting #scroller>div to a width of 1px.
NOTE 2:
This is also a solution for a fixed div inside a scrollable div. See this fiddle
I have a sidebar on the right that'll pop out from off-screen once triggered. I keep it in the body tag because it needs to always be the same height as the entire page which varies from page-to-page. If I give the body an overflow-x: hidden, it'll hide the contents on smaller browser windows and not allow them to scroll. Is there any way around this?
I need the sidebar to scroll with the page, so I can't use position: fixed
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
}
#sidebar {
position: absolute;
top: 0;
right: -100px;
width: 100px;
height: 100%;
}
<div id="sidebar"></div>
This is just a stripped down example.
One simple answer is to place the sidebar inside a position: absolute container (.hideScroll) which has overflow: hidden.
The new parent is given the entire width and height of the viewport and wont affect body scrolling.
In this example I have used viewport percentage lengths (vh) instead of percentage heights. These units get their height from the viewport and are not relative to any parents.
Example
Hover over the body in the window to trigger the sidebar.
.hideScroll {
overflow: hidden;
position: absolute;
height: 100vh;
left: 0;
top: 0;
width: 100%
}
#sidebar {
position: absolute;
top: 0;
width: 100px;
height: 100vh;
background: #F00;
right: -100px;
transition: right 1s;
}
body {
margin: 0;
/*150 height is for the example to make the body scroll*/
height: 150vh;
}
/*For example to show the sidebar on body hover*/
body:hover #sidebar {
right: 0;
}
<div class="hideScroll">
<div id="sidebar">Content</div>
</div>
Add display: none; to the sidebar:
#sidebar { display: none; position: absolute; top: 0; right: -100px; width: 100px; height: 100%; }
Then when you move it into the main window, set display: block; at the same time.
I've got the following piece of CSS in which i want the navigation and the website to be absolutely positioned so i can slide them back and forth when the menu button i pressed(Like the facebook app for example). To do so i've got a container with an overflow: hidden(To hide the nav bar and slide it in when needed). However; the container loses it's autoheight because of the absolute positioning within i'm afraid.
How can i get the height to be set automatically again as overflow: hidden does without absolute positioning in it.
i've created a fiddle in which the container has a height of 500px. I want to make the height scale automatically though. http://jsfiddle.net/rB7EY/
div {
box-sizing: border-box;
}
.container {
overflow: hidden;
width: 100%;
max-width: 60em;
padding: 0;
margin: 0 auto;
position: relative;
background: grey;
height: 500px;
}
/*CSS for the navigation bar that can be toggled*/
.navigation {
width: 15em;
float: left;
background: blue;
position: absolute;
left: -20px;
}
/*The CSS for the actual content*/
.website {
width: 100%;
float: left;
position: absolute;
left: 0px;
}
.container .website .top_bar {
height: 4em;
background: pink;
padding: 1em;
position: relative;
}
.container .website .top_bar .menu_button {
width: 3.2em;
height: 2.5em;
background: red;
border: 0px;
}
nav.menu {
width: 15em;
position: absolute;
left: 1em;
top: 3em;
background: yellow;
}
If I understand you well, enough you want to scale the container automaticly? Try using a min-height and a max-height
I fixed it by using a div between the container and the navigation and website and gave that a absolute position. With that i've decided to make the container be min-width: 100%
Hey guys I'm building my first website and I cannot figure how to get rid of the extra space on the right which brings up the horizontal scrollbar. The site is http://qtsocial.com/accounts/login/ ... If you can look at the css and give me a clue I would really appreciate it. Thanks!
body {
background: url(http://qtsocial.com/static/images/body-bkg.png) repeat scroll;
margin: 0;
padding: 0;
}
.container {
margin: 0pt auto;
width: 100%;
}
#header {
background: url(http://qtsocial.com/static/images/hdr-bkg.png);
background-repeat: repeat-x;
height: 181px;
position: absolute;
z-index: 100;
top: 0px;
left: 0px;
width: 100%;
margin: 0;
padding: 0;
}
#logo {
background-image: url(http://qtsocial.com/static/images/QTlogo.png);
background-repeat: no-repeat;
height: 88px;
position: absolute;
top: 40px;
left: 25px;
width: 100%;
}
#navigation{
height:40px;
z-index: -1;
}
You have the DIV with id of logo set to 100% width (which is setting it to the page width) then you're indenting it by 25px. Change the width of #logo on line 25 of login.css to be the width of the background image you're using (299px).
Logo is too wide
Inside #logo Change width: 100%; to width: 299px; (the actual width of the image)
Your logo div is whats causing it.
It is 100% of the width, but this does not include the 25px of the left of it, thus it is overflowing 25px to the right of your window.
Change the width of the logo div to the width of your logo image, and it won't overflow to the right.