Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
So I’m trying to redesign my website to keep the header at the top of the screen and let the rest of the page scroll beneath it. I did some research and found a nice JSfiddle that explained what I needed to do: http://jsfiddle.net/austinbv/2KTFG
#header {
position: fixed;
top: 0px;
height: 20px;
width: 100%;
background: green;
}
#body{ margin-top: 30px; height: 3000px; overflow: auto; }
<div id='header'>hello</div>
<div id='body'>skdfl</div>
I added the 2 DIVs to a Dreamweaver template and then the CSS. I then broke my page up into 2 portions and placed each in the corresponding DIV. Now when I view the page in the browser, the bottom div refuses to extend far enough to show the contents within. it stops at the bottom of the screen, not the bottom of the contents. See the example at http://www.rcda.org:81/index2.html
I researched the net and found people saying that the contents of the DIV are somehow floated and above the div causing the div to not expand. I did not float the contents.
What can I do to get body div to expand to the height of its contents?
On your div#body (random div..), you have overflow:hidden- with a fixed height, this is hiding anything below the fixed height.
Take off overflow: hidden; on the body css in index2.html
#body {
margin-left: auto;
margin-right: auto;
margin-top: 203px;
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I want my pictures to be complete and centered but there is something blocking it, is a slider for 9 pictures and each picture has a box that holds inside the picture.
The main problem is the plantilla that holds the picture, the thing is tha I've been trying to make it bigger so the image can occupy the whole center of the page
This is part of the code that I have in my css
div.carousel .col-md-4.animation-element {
min-width: 400px !important;
margin-left: 0%;
}
.carousel-indicators {
margin-bottom: 10%;
}
.carousel .item{
margin: 0 auto;
}
and this is the Website
I've tried to change the css of bootstrap but not even that worked, I've put the configuration "margin: 0 auto;" also but nothing
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
I removed the overflow: hidden; and it looks fine to me.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
On this template: GYM
If I add add more text under the welcome title, the form is lowered down and then disappears (class .home has overflow: hidden).
If I make it visible then will be over the section under it. What I want is the div's height to be modified depending on the text that I add, to show all the content and then start the other section (w/o a scroll for the div -> overflow: scroll)
Thanks!
Make the form position:relative; and the carousel position:absolute; (with extra positioning).
This will make sure the height will adjust, but still allow the carousel to flow in the background.
Edit (this is what I used):
.home form {
background-color: rgba(0,0,0,0.3);
height: 100%;
padding-top: 150px;
position: relative;
width: 100%;
z-index: 90;
}
.carousel {
position: absolute;
top: 90px;
left: 0;
width: 100%;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I've tried this seven ways from sunday and I keep coming up short.
Bands of color or what have you that extend to the limits of the visible page seem to be a very common request in internet forums / blogs, however for each of the two main scenarios I'm running into equally frustrating issues that render either solution untenable. In my frustration I've turned here.
HTML
<body>
<div class="container"></div>
<div class="content-container">
<div class="content">
Hello, I need some text that extends for a bit, so I'll just write this in the div and all will be good.
</div>
</div>
<div class="container"></div>
Scenario 1
You set a container div at width: 100% and then a child div at a fixed width and margin: 0 auto; this effectively extends that div to the ends of the visibel screen at all times.
html, body {
width: 100%;
}
.container {
height: 20px;
background-color: #377ab7;
margin: 0 auto;
}
.content-container {
height: 100px;
margin: 0 auto;
}
.content {
width: 300px;
}
Scenario 1 issue
When the screen is resized so that the child div's fixed width is too big for the window a scroll bar appears. This is absolutely fine and desired, however when you use the scroll bar the extended bands of color only extend as far as 100% of the visible window.
Fiddle 1 (you need to resize the browser window to surpase the size of the fixed width content div and then use the scroll bar, you'll see the blue bands do not extend past 100% of the window size.)
https://jsfiddle.net/b1dht69u/2/
Scenario 2
You set the overflow-x: hidden on the body and then run a very high negative margin, with a corresponding positive padding.
body {
overflow-x: hidden;
}
.container {
height: 20px;
background-color: #377ab7;
margin: 0 -9999px;
padding: 0 9999px;
}
.content-container {
height: 100px;
margin: 0 -9999px;
padding: 0 9999px;
}
.content {
width: 300px;
}
This is absolutely great until again you try to resize the screen.
Scenario 2 issue
When you resize past the size of a child div's fixed width no scroll bar appears.
Fiddle 2
https://jsfiddle.net/mnodvLvg/1/
What I am looking for is the best of both worlds. I am hoping to have a bar of color that extends to the ends of the visible page at all times, yet when a browser is resized past an inner divs fixed width a scroll bar appears.
This is a curious problem, and one that I never gave much thought since I mainly work with responsive layouts.
However, there is a nice article by Nicholas Cerminara about dealing with fixed-width layout issues.
The key to this is setting a min-width on body{} and/or html{} in your CSS.
Interestingly, Stack Overflow uses this technique to prevent their top navigation bar from breaking when you resize the window. Just open your web browser DOM explorer on this website and disable the following style rules:
body{min-width:1030px;} and html{min-width:1000px;}
You will see the top nav bar break its layout and have the same issue you are experiencing.
this scenario 2 with 9999px stuff is actually very dirty, forget it.
If you inspect the div, you'll see that the problem doesn't come from the div.container itself but from the body.
I would solve this with:
html, body {
position: absolute;
min-width: 100%;
width: auto;
}
As a reminder, don't forget that the ID must be unique. Better use class in this case.
An other idea could be to forget those .container DIVs and actually make borders for .content-container, but I don't know what you exactly would like to do.
#content-container {
height: 100px;
margin: 0 auto;
border-top: 20px solid #377ab7;
border-bottom: 20px solid #377ab7;
}
Good Luck' !
If you have a fixed width for the content div, you may as well set a min-width of the same value or larger on the body tag. This will guarantee it can't be smaller than your content.
html, body {
width: 100%;
min-width: 300px;
margin: 0;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have 2 divs that are side by side and they have display:inline-block and they look great. I tried adding a textarea inside one of the divs, and it made it slide down so its not lined up next to the other div anymore.
This is what it looks like right now. How can I fix it?
You are pretty close. Here is the code and a link to the fiddle.
div {
width: 100px;
background: gray;
height: 200px;
display: inline-block;
vertical-align: top;
}
textarea {
margin: 0;
padding: 0;
width: 50px;
height: 50px;
display: inline-block;
width: 100%;
border: 0;
}
I added vertical-align: top to your divs and textarea and set the width to 100%. I also set the border to 0 because it overflows by 2px.
Just add display:block to the textarea and it sholud be fixed.
You can check it here -> https://jsfiddle.net/h0mwo9ox/4/
Quick suggestion, if you can, it is better to use specific classes instead of a generic div style, specially if your project became big it is better to manage then.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I can't find how to do something that should be very simple. I want to divide page to two panes horizontally. Between the panes there's some border (wheter it can be resized or not I don't care). The upper pane can scroll vertically, while the lower pane stay fixed.
I tried bootstrap sticky fixed footer, but I don't have scroller for top part there.
My eventual goal is to insert all kind of links in bottom fixed pane that will help navigating to places in the top pane.
Thanks in advance
Here is an option where your elements will take whole screen. If you want to limit their size to bootstrap container you need to put them in container and give it style of position:relative
<div class="upper">This will scroll</div>
<div class="lower">This will not</div>
.upper, .lower {
position: absolute;
left: 0;
right: 0;
}
.upper {
top: 0;
height: 50%;
background-color: pink;
overflow:scroll;
}
.lower {
bottom: 0;
height: 50%;
background-color: blue;
}
Fiddle: http://jsfiddle.net/jGBh3/