What causes overflow on my page? - html

I'm working on my first project, which is supposed to become a blog one day. I'm currently trying to design the homepage, and, until a certain point, everything was pretty fine. But then something happened and an overflow appeared. I don't know what causes it. I'm using box-sizing: border-box just to be sure there are no hidden borders or margins or padding causing this problem, but it's still there.
By the way, my aim is to make the page responsive, that's why I'm trying to use scalable width and height as much as possible. Maybe that's where the problem lies?
width: calc(100vw); max-width: 4000px;
height: calc(5vh); max-height: 112.5px;
Here's the fiddle: https://jsfiddle.net/u7vqz0cq/
Any ideas?

Sole reason of overflow here is use of 100vw. As soon as you set the width of some block tag, it will have a overflow. Similar is the case with 100vh. It makes the tag overflow vertically.
And using calc(100vw) is also pointless, instead you can use 100% if required like this.
#header {
width: 100%;
max-width: inherit;
height: calc(5vh); max-height: 112.5px;
}
Here is the updated jsfiddle.
https://jsfiddle.net/u7vqz0cq/1/

Related

How to make a div to fit all available width hidden with scroll?

I've asked this question before. Here is an original post.
We've found a solution but I would like to ask is there any chance to solve this in another way?
Original fiddle link with that issue.
Could someone explain why element with display:block; or even with dipslay:flex; or any other display type (except table) does not take the width, hidden under scroll?
It's a bit confusing me.
When using width 100% it will want to stretch to the size of its container, if you have more content than space, try adding overflow: scroll; it will add a scrollbar and attempt to keep the width you set it at stable.
.pane .body {
width: 100%;
overflow: scroll;
}

Can't get overflow-y: scroll to work

I'm trying to create a vertical timeline but I can't seem to get the overflow-y: scroll to work. Here is a link to the website:
http://fosterinnovationculture.com/infographic/index.html
The parent div has an overflow: hidden but the child div has overflow-y. It works properly if I remove the parent div but I need it inside of the div so that list.js plugin works properly.
I see your code have
html, body {
overflow: hidden;
}
// it mean only full screen and all overflow is hidden.
So in .scroll you need set max-height. I suggest a solution
.scroll {
max-height: 90vh;
}
You fixed the height of body to 100vh and set it's overflow property's value to hidden;
So not matter whatever the height of body's child is, it will not scroll;
If you change body's overflow property to auto, scroll will work;
At the same time you may change the position of top_nav to fixed, in order to keep the search bar at the top all time time.
It seems like you are repeating the same question. Here is you asking about the same problem (though I will admit the question is different because it has changed). Here is my answer to that question.
Before giving an answer, I will say that the most important thing I tell myself when coding CSS is: if I start having to hack then I am making it too complicated.
With that said, start by removing every instance of overflow: hidden; in your code.
Then get this in there:
.top-nav {
height: 70px; /* you already specify this on your site */
}
.scroll {
position: absolute;
top: 70px;
bottom: 0px;
left: 0px;
right: 0px;
overflow-y: scroll;
}
In cases like this, you should try to realize that your question regards a design that is common and someone else must have asked your question before. If you cannot find an answer to such a question, it may be good to rethink your search keywords.
Here is a Stack Overflow question that answers your underlying "how-to" design question.

CSS Class will not gain height

I have tried multiple options and narrowed it down to a specific class but I cannot seem to figure it out.
Im trying to get "#content-wrapper" to increase height but it seems to be stuck at the browsers height.
This has been pissing me off for the past 3 hours.
#content-wrapper {
width: 100%;
max-width: 1000px;
height: 100%;
min-height: 100%;
margin: auto;
position: relative;
}
JSFiddle Link: http://jsfiddle.net/8hn7uLqr/
If anyone can help me please I will be very grateful, I hope everyone is having a good Christmas Eve!
Delete height:100% in the css for the #wrapper and #content-wrapper. It this case it means the height of your browser without scrolling. Give the height a number of pixels or let the height depend on the content within with height:auto.
So if I understand you correctly, you're not sure why your content shows a height of 703px when it's actually in the 9000's. There are 2 issues here.
is the use of height: 100%. Many people think that means 100% of the content but it's actually 100% of the current screen size unless you set html to be height: 100% as well. You can use min-height: 100% which will allow it to extend past the screen height.
The biggest issue you are having is because of the constant use of position: absolute. I'm not sure if you are aware but using absolute positioning removes the element from the flow of the document. Meaning it no longer adheres to it's parents constrains.
After I removed the multiple position: absolute and the height: 100% you can see form the following screenshot the height is adjusted to the content:
So really you need alot of CSS overhaul to set this up without absolute: position

Image isnt resizing for ipad screen/iphone mode

can anyone find the solution to my problem? I've beed tweaking my CSS sheets and it doesnt seem like its changing anything. I'm using the same rules for the "4sites" image as to my "About" img.
Heres a link to the site, you can see all of my css sheets from there too.
https://dl.dropboxusercontent.com/u/146014194/483F_ss14/Pro01/hwk/pro01_content_structure_presentation_B02_responsive_4sites_FINAL.html
I know you can create everything in just one CSS sheet, but my professor asked us to make it like the way it is..
I added a div tag around the img thinking that I could control it better.. But it doesnt seem like its the case!
Mucho Thanks!
You're trying to keep the height of image as 100%. If this is a responsive design then, the width has to be 100% and height to be kept as auto
CSS:
#Mybio #Mepic img {
clear: none;
float: left;
height: auto;
width: 100%;
margin-bottom: 100px;
margin-top: 55px;
}
Now the question is, the image is taking the whole width of the screen, well, that's normal. You have to restrict the parent div(id as #Mepic) and handle it with media queries for different screen sizes. Also I saw float issues on you're site. Use Clear:both to get rid of them.

make website adapt to all display size - HTML

I'm writing a website with HTML and CSS. My problem is that when I for example run my website in my browser, I adjust all the margins with percent. But then when I run my browser in fullscreen or if I adjust the size of the window the websites different parts fall apart and doesn't fit together as they should. Why doesn't the percent unit fix that problem since it's relative to the size of the window?
CSS:
#aboutMeDiv
{
background-image: url('noisyBlue.png');
position: absolute;
width: 100%;
height: 118px;
margin-top: 13.6em;
margin-left: -0.7%;
opacity: 0.5;
transition: opacity 0.3s;
}
How can I make it "the same way" even if the window changes?
Thanks!
A more precise answer cannot be given without seeing your code, but this issue can probably be solved by adding a min-width and max-width to your container element.
For example, if the structure seems to fall apart when the width is less than 700px and when it is greater than 1500px, you could use this:
.container {
max-width: 1500px;
min-width: 700px;
}
Of course, this might inhibit responsive design -- especially for mobile browsers. It may be a good idea to check out some already-made CSS frameworks like Twitter Bootstrap and Gumby Framework.
Edit following addition of code to the question:
How can I make it "the same way" even if the window changes? Thanks!
If you want #aboutMeDiv to be "the same way" even if the window size changes, you should use concrete numbers instead of percentages of the div size; i.e. change width: 100%; to a something like width: 700px;. Then, as noted above, you can use a min-width to make sure the screen shows all the content within the div.