I have 2 complications here, first is that how do I ensure that the footer does not overlap with the content of my articles. Now it seems to overlap the things above it and I can't seem to make the scrollbar with overflow: auto;
Also, how do I make the <hr>tag work becuase now it seems to mess up my entire flexbox and it only hovers above the first contact footer detail.
Thanks a lot for all your help!!!
#footer {
position: absolute;
left: 20%;
bottom: 0%;
width: 50%;
height: 20%;
display: flex;
justify-content: space-between;
}
.contact_footer {
margin-left: 20%;
}
<footer>
<div id="footer">
<div class="container">
<div class="contact_footer">
<hr>
<h3>Contact</h3>
<address>
info
</address>
</div>
<div class="contact_footer">
<h3>Address</h3>
<address>
info
</address>
</div>
</div>
</div>
</footer>
If you position anything absolutely, it is removed from the normal layout. If you don't want it to overlap with anything below it, you need to make sure there is nothing below it. This is not a tweak for your footer, but for your content.
Try something like this (selectors must be replaced with yours):
#content {
margin-bottom: 20vh;
}
20vh are 20% of the height of the screen, which might to be the size of your footer (your code doesn't make it clear what element your footer is positioned in).
Do one thing, for second problem
use pseudo class ':first-child' for only first footer content css and use 'border-top' style property instead of 'hr' tag
.contact_footer:first-child address{border-bottom:1px solid black;}
Related
Here's an example that goes halfway there:
http://jsfiddle.net/gt9vz4qk/1/
CSS: #content {background-color: #fdd; overflow: auto; height: 70vh;}
HTML:
<button>Hello</button>
<div id="content">
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
</div>
<input>
Using relative size units like vh helps, but I feel like I'm missing something really basic. As you can see, if you resize the window or even the splitter on the jsfiddle website far down, the other elements start compressing and a second scrollbar pops up. The only scrollbar should be the overflow one.
Another way to think about this is that I want the top elements to take up as much space as they need, the bottom elements to take as much space as they need, and anything else should be taken up by the central element.
Here's a flexbox solution:
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
#content {
background-color: #fdd;
overflow: auto;
flex: 1;
}
<div>
<button>Hello</button>
</div>
<div id="content">
A<br>
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
</div>
<div>
<input>
</div>
Fiddle
Basically I simply want to make it so that this website
NO LINK
doesn't get squashed when you make the page smaller than the elements that have been defined. However I want the elements to remain at the exact same size they are at, for obvious design issues. Therefore I need a simple horizontal scroll bar or something, but when I've messed with such a design it doesn't seem to make much difference. If you need any coding, or have any questions.. Feel free to ask.
If you notice when you make the page smaller in the horizontal margin, the sidebar gets shoved into the main content. That is one of the main issues, and I figured it would be a good idea to point it out. Just to show part of the problem.
ANSWER
#Wrapper{
overflow: auto;
z-index: 6;
min-height: 1400px;
width: 100%;
min-width:1400px; <--- Added that to make sure that the content never gets squashed.
}
You could tell your sidebar to be always posioned next to your main container. To do that you need first of all to give a class name to this div:
<div style="padding-bottom:15px;">
<p align="center"><font size="+2">SITE UNDER CONSTRUCTION</font></p>
....
</div>
Once you do that you need to put your #Sidebar inside that div to get something like this:
<div class="mycontentclass">
<div id="Sidebar">
<div style="margin-left:5px;">
Home<br>
...
</div>
</div>
<p align="center"><font size="+2">SITE UNDER CONSTRUCTION</font></p>
....
</div>
And then in your CSS styles you need to add:
.mycontentclass{
padding-bottom: 15px; //This is the attribute you defined inline before setting a class for you div
position: relative;
}
#Sidebar{
position: absolute;
left: -205px; //Sidebar width + gutter between the content
}
And now your menu won't go over your content, it'll stay always next to it.
This is what I used to fix the problem.
#Wrapper{
overflow: auto;
z-index: 6;
min-height: 1400px;
width: 100%;
min-width:1400px; <--- Added that to make sure that the content never gets squashed.
}
I've been tasked with changing a website around a bit, and right now, the website has a responsive layout that is 95% of the viewports width, body-wise, so it will adjust if resized.
This is great, I want it to keep doing that, but I want the footer to have a side-to-side calm blue background, and I'm not able to come up with a way to do that for some reason.
Can anyone help?
Try this - DEMO
HTML
<div id="container">
<h1>TITLE</h1>
<section>MAIN CONTENT</section>
<footer> FOOTER </footer>
</div>
CSS
#container {
width: 95%;
margin: auto;
background: honeydew;
}
footer {
position: absolute;
width: 100%;
background: beige;
margin-left: -2.5%;
}
body contains all the other elements. You thus aren't supposed to have one larger than body inside of it.
Although you could position it absolutely to the bottom-left corner (position: absolute; bottom: 0px; left: 0px;) with a width of 100% and possibly make it work, I'd suggest you instead make a container element, perhaps a div, inside of the body element that contains your 95%-width elements and place the footer outside of that container.
I am not sure of which method is more reliable, however.
Have You tried to wrap existing 'header'component by other 'wrapper' component (div, span, etc.)? Example:
<div id="wrapper" width="100%"
<div id="header" width="95%">
some header stuff here
</div>
<!-- foo bar -->
<div id="footer" width="100%">
my footer
</div>
</div>
I have an element (in my case a HR tag) that needs to be as wide as the browser but which is also wider than it's parent container. However, it still needs to maintain relative positioning so that it scrolls vertically with the page. The problem is that my parent div has to have relative positioning as well (due to other layouts that are working).
The only way I have been able to solve this is to set the width of the HR tag to 3000px with a left position of -1000px. This works, but it adds a horizontal scrollbar to the page (to display the 3000px width). Is there any way to accomplish this cleanly (without the horizontal scroll bar)? You can see my fiddle at http://jsfiddle.net/UGwst/.
Here's the HTML:
<div id="layout-wrapper">
<p>Above Content</p>
<div id="content-wrapper">
<p>Top Content Here</p>
<hr class="rule" />
<p>Bottom Content Here</p>
</div>
</div>
Here's the CSS:
#content-wrapper {
width: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
background-color: #ddd;
position: relative;
}
.rule {
background-color: #dbb328;
height: 5px;
position: relative;
left: -1000px;
width: 3000px;
}
I realize that there are a couple of other questions here that are similar, but don't quite seem to fix this issue.
Use position:relative on the parent.
Use position:absolute on the HR, that way the HR is bound to the parent and will scroll with it.
To hide scroll bars use overflow:hidden on your outer wrapper, or BODY.
Try
body {overflow-x: hidden;}
to eliminate the horizontal scrollbar. According to this answer, it even works in IE6 - CSS - Only Horizontal Overflow?
Please, consider the following jsFiddle - http://jsfiddle.net/mark69_fnd/hwCuB/ (you can find the code after the body of the question).
It represents a trivial example of the classic header, content, footer HTML layout. Notice that:
The content never overlaps with the footer. Resizing the window will finally create a vertical scrollbar rather than move the content over the footer.
There are no redundant scrollbars.
No absolute heights, except of the footer, which may be assumed to be no higher than 2em.
The content height is less than the available height between the header and the footer.
I would like to keep the first three properties, but change the last one, so that the content height is the full height between the header and the footer. And I would like to do so without resorting to javascript.
How can I do so, if at all?
EDIT
The given html and css are just an example. You are free to change them as long as the final result satisfies the conditions of my question.
EDIT2
Apparently, I am not very clear on what I want to achieve with the content. Here is what I have now:
Notice how the content does not extend the full height available to it between the header and the footer.
What I am after is this:
(edited in mspaint, I do not know to do it really)
EDIT3
Added an except clause to the 3rd condition:
except of the footer, which may be assumed to be no higher than 2em.
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.7.3/build/cssreset/reset-min.css">
</head>
<body>
<div class="container">
<div class="header">
Header goes here.
</div>
<div class="content">
<div class="innerWrapper">
Content goes here.
</div>
</div>
<div class="footer">
<div class="status">
Footer goes here.
<div>
</div>
</div>
</body>
</html>
CSS:
html, body {
height: 100%;
width: 100%;
}
.container {
position: relative; /* needed for footer positioning*/
margin: 0 auto;
height: auto;
min-height: 100%;
background-color: #ddd;
}
.content {
padding: 0em 0em 2em; /* bottom padding for footer */
background-color: #bbb;
}
.footer {
position: absolute;
width: 100%;
bottom: 0; /* stick to bottom */
}
.status, .header {
background-color: #999;
border: solid 1px #000000;
}
There might be couple ways to do this, but the only ways i can think of at the moment all involve setting/knowing the height of your header and footer.
Here is one using display:table http://jsfiddle.net/fLnkf/
There may be other solutions depending on if your requirements allow you to change your html or use CSS3.
hope this helps!