I'm experiencing an issue with overflow content in divs. I am using SharePoint and some of the content [namely Libraries or Lists or big webparts containing the aforementioned] will extend past the visible display space, but the body content doesn't scroll properly.
My structure looks something like this:
html {100%}
body { background: #010831; font: 500 1em 'Raleway'; height: auto; min-height: 100%; margin:0; overflow:hidden;}
#container { margin: 0 auto; min-height: 100%; }
#topBar {background: #010831; font: inherit; padding: 5px; height: 80px; margin-bottom: 1px;}
.topline {width:100%; height:20px; font-size:0.8em; color:#fff;}
.social {width: 30%; float:right; text-align: right; font-size: 1.2em;}
#searchBar {width: 25%; float:right;}
#searchBox {border-radius: 10px; width: 250px; background:#343a5d; height:25px; color: #fff; font-size:1.2em;}
#quicklaunch {width:18%; min-height: 35%; color: #666; font: 600 1em 'Raleway'!important; padding-top:4px;}
#main {width:100%; background:#fff; display:flex;}
#s4-workspace {width:auto!important; overflow:auto!important; background:#fff;}
#content {width:80%}
#footer {background:#000; width:100%}
<body>
<div id="s4-workspace">
<div id="bodyContainer">
<div id="container">
<!-- this is the beginning of my custom coding, and my own styles. -->
<header id="topnav">
TOP NAV MENU HERE
</header>
<section id="main">
<div id="quicklaunch"> SIDE NAV HERE</div>
<div id="content"> ALL USER DRIVEN CONTENT GOES HERE</div>
</section>
<footer id="footer"></footer>
</div>
</div>
</body>
What's happening is that the Content div that's set to 80% won't display content that extends past the screen properly. The content overflows but the background is my body color (dark Blue). I can't set the content div width to 100%, as that will make the entire div go under the sideNav AND it affects how webparts then display. [They stretch across the entire screen forever, since by default SP allows the webparts to take up full width of their containing zone].
Essentially, all I want is for the background color of my content div to stretch when the content overflows.
Related
I know this is a common problem, but I can't get my header the same size like my screen.
I already tried to wrap the header into another div and make width: 100%. This didn't help.
Thanks for your help!
body {
font-family: 'avenirregular';
padding: 0;
margin: 0;
background-color: #f4f4f4;
width: 100%
}
/* Global */
.container {
width: 85%;
margin: auto;
overflow: hidden;
}
/* Header **/
header {
background: #16205E;
color: #ffffff;
padding-top: 30px;
min-height: 7.5vh;
border-bottom: #2B8AFF 3px solid;
display: table-cell;
vertical-align: middle;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
vertical-align: top;
padding: 0 20px 0 20px;
}
header #branding {
width: 20%;
float: left;
padding-top: 0px;
padding-bottom: 20px;
}
header #home img {
width: 100%;
height: 100%;
}
header nav {
float: right;
margin-top: 20px;
}
<header>
<div class="container">
<div id="branding">
<a id='home' href="index.html"><img src='./img/test_logo_v1.svg'></a>
</div>
<nav>
<ul>
<li>Content1</li>
<li>Content2</li>
<li>Content3</li>
</ul>
</nav>
</div>
</header>
Just remove the display:table-cell from the header
body{
font-family: 'avenirregular';
padding:0;
margin:0;
background-color:#f4f4f4;
width:100%
}
/* Global */
.container{
width:85%;
margin:auto;
overflow:hidden;
}
/* Header **/
header{
background:#16205E;
color:#ffffff;
padding-top:30px;
min-height:7.5vh;
border-bottom:#2B8AFF 3px solid;
}
header a{
color:#ffffff;
text-decoration:none;
text-transform: uppercase;
font-size:16px;
}
header li{
float:left;
display:inline;
vertical-align:top;
padding: 0 20px 0 20px;
}
header #branding{
width:20%;
float:left;
padding-top:0px;
padding-bottom:20px;
}
header #home img{
width:100%;
height:100%;
}
header nav{
float:right;
margin-top:20px;
}
<body>
<header>
<div class="container">
<div id="branding">
<a id='home' href="index.html"><img src='./img/test_logo_v1.svg'</a>
</div>
<nav>
<ul>
<li>Content1</li>
<li>Content2</li>
<li>Content3</li>
</ul>
</nav>
</div>
</header>
</body>
I have a good convention for you to follow which I have designed for myself and it works pretty well. Look Below.
Side-Note: I would remove the UL list. And just use links straight up then you can use CSS to style your menu links. it will make your life easier.
Every page must have a wrapper div to wrap all of your html.
Then inside your wrapper you can manage your content. But your wrapper must always have a width of 100%, and your box-width will will never be full width, the name explains it's purpose. This standard allows you to control your pages full width content such as banner or whatever you may want full width at any level on the page. And then if you have something like text content you use the box-width style class to center you content.
The way in which I have left the code for you will also take mobile into consideration, responsive design is important. But you can optimize it however you feel. :)
To get all your elements inline, investigate these functionalities based on what works best for you.
https://www.w3schools.com/css/css_inline-block.asp ->inline-block
and
https://www.w3schools.com/css/css_float.asp ->float
Then apply the appropriate style to your div elements inside the surrounding div.
<div class="wrapper">
<!-- Header Div -->
<div class="header">
<!-- Your header Content goes here -->
</div>
<!-- Body Div -->
<div class="body box-width">
<!-- Your body Content goes here -->
<!-- This body will be box width -> 1200px -->
</div>
<div class="body-2">
<!-- Your body Content goes here -->
<!-- This body will be full width -->
</div>
<!-- Footer Div -->
<div class="footer">
<!-- Your footer Content goes here -->
</div>
</div>
<style type="text/css">
#media only screen and (min-width: 1024px) {
.wrapper{
width: 100%;
max-width: 100%;
}
.box-width{
width: 1200px;
max-width: 100%;
margin: 0px auto;
}
}
#media only screen and (max-width: 1023px) {
.box-width {
max-width: 90%;
margin: 0px auto;
}
}
</style>
header{
display:inline-block;
width:100%;
}
You have display: table-cell; that means it baheve like table cell... and table cells are content related. You can just remove it and then your header will be display:block that means its automaticly 100%. Retrospectively my answer is not as good as the other one here... so just remove display:table-cell.
I'm creating a website that contains a footer, on the left side just simple text. On the far right will be icons with links to various social networking sites. I can't get the icons to stay inside the container when I float the image to the right. How can I get the image to stay inside the yellow area and out of the green without adding any more padding to the footer?
http://jsfiddle.net/Fd4Pc/1/
body {
background-color: #17241d;
margin: 0;
}
#mainWindow {
width: 1200px;
margin-left: auto;
margin-right: auto;
background-color: #fffff6;
height:100%;
}
.right {
float:right;
}
footer, .footer {
font-size: .8em;
padding:10px;
}
<body>
<div id="mainWindow">
<p>Text here</p>
<div id="footer">
<footer>
<span>Left Side</span>
<img class="right" src="http://static.viewbook.com/images/social_icons/facebook_32.png" />
</footer>
</div>
</div>
</body>
Try adding overflow:auto to your footer:
footer, .footer {
font-size: .8em;
padding:10px;
overflow:auto;
}
jsFiddle example
You can also set a line-height to your footer: http://jsfiddle.net/Fd4Pc/3/
footer, .footer {
font-size: .8em;
padding:10px;
line-height: 2em;
}
floated element will expand the parent element height, to expand that add float to the parent as well:
footer, .footer {
font-size: .8em;
padding:10px;
float:left;
}
This can be done in two ways
Add overflow: hidden to footer
or
clear div that is
<footer>
<!--your code goes here-->
<div style="clear:both"></div>
</footer>
I am new in Grails and displaying list of users by using list.gsp page but when list have less items say 1 or 2 then footer is appears after two record instead of taking it's fix position at bottom of browser.
I have tried by updating my css in main.css and also applying css to 'g:layoutBody' tag.but result is same.
Any one can please help me how to set footer at bottom.
i am using following css in 'g:layoutBody' tag-
<g:layoutBody style="position: fixed;left: 0px;bottom: 30px;width: 100%;"/>
my main.css has this code -
body {
background: #ffffff;
color: #333333;
margin: 0 auto;
max-width: inherit;
margin-left:20px;
margin-right:20px;
overflow-x: hidden; /* prevents box-shadow causing a horizontal scrollbar in firefox when viewport < 960px wide */
-moz-box-shadow: 0 0 0.3em #255b17;
-webkit-box-shadow: 0 0 0.3em #255b17;
box-shadow: 0 0 0.3em #255b17;
}
and footer css is
.footer {
background: #abbf78;
color: #000;
clear: both;
font-size: 0.8em;
margin-top: 1.5em;
padding: 1em;
min-height: 1em;
}
.footer a {
color: #255b17;
}
This is a purely HTML/CSS issue, so the same applies for GSPs and standard HTML pages.
What you're after is a "sticky footer", and it can be most easily achieved by wrapping your content in a container which pushes the footer to the bottom of the page.
Here's a working example (updated with content from question): http://jsfiddle.net/spikeheap/ujttV/2/
The key bits are to structure the HTML with something which extends below your content:
<body>
<div class="wrapper">
<div id="content">
...
</div>
</div>
<div class="footer">
This is a footer message
</div>
</body>
Then you can use CSS to set the height of the wrapper to be 100%:
html, body{
height: 100%;
}
.wrapper {
min-height: 100%;
}
Finally your footer can be clever and pull itself up from below the bottom of the page by using a negative margin-top:
.footer {
position: relative;
margin-top: -200px;
height: 200px;
background-color: #cecece;
}
You'll notice pretty quickly that if you make the window really small, or grow your content, that it's truncated, so your content block should have padding equal to the footer height (to make sure it pushes it down when it fills the space:
#content {
padding-bottom: 200px;
}
Update
The layoutBody tag is used for rendering the body of your gsp, so you could have layouts/mytemplate.gsp:
<!DOCTYPE html>
<html>
<head>
<g:layoutHead />
</head>
<body>
<div class="wrapper">
<div id="content">
<g:layoutBody />
</div>
</div>
<div class="footer">
This is a footer message
</div>
</body>
And then in (for example) index.gsp:
<head>
<meta name="layout" content="mytemplate">
</head>
<body>
Welcome to my website. Check out the amazing footer
</body>
I am creating a fix layout (960px wide) for my web-template. But I want my menu-bar's width as the width of the browser (which means, as wide as possible without margins).
CSS for body :
body{
width:960px;
min-width:960px;
margin:auto auto;
}
How can i do that ?
A layout like this : http://www.google.com/analytics/index.html
(notice the fixed width of body and the menu bar is wider than that)
What I think you want is to have your content in the 960px region centered, but have the ability to have other content (your menu in this case) that can be the full size of the page. To be able to do that, you can't have the width of the body itself set like you do. Instead, you should have some HTML like:
<html>
<head>
:
</head>
<body>
<div id="ContentBox">
: put your content here
</div>
<div id="Menu">
: Menu content here
</div>
</body>
</html>
Then in your CSS:
#ContentBox {
margin: 0 auto;
width: 960px;
}
#Menu {
/* Whatever is applicable */
}
As for the Google Analytics site, they have separate sections of the page at full width, with the color, borders, etc. defined, then a region just like #ContentBox I described above in each section. You can even make it a common class and reuse it, like:
<body>
<div id="HeaderBar">
<div class="ContentBox">
:
</div>
</div>
<div id="GreyBGRegion">
<div class="ContentBox">
:
</div>
</div>
</body>
CSS:
#HeaderBar {
border-bottom: #CCCCCC 1px solid;
background-color: #000000;
color: #FFFFFF;
}
#GreyBGRegion {
border-bottom: #CCCCCC 1px solid;
background-color: #F0F0F0;
color: #000000;
}
.ContentBox {
margin: 0 auto;
width: 960px;
}
You can do it this way: DEMO
#header{
float:left;
padding:15px 0;
width:100%;
}
I am new to HTML/CSS. I want a horizontal strip of the screen to be black, on a red background. Using CSS, I define a wrapper with a black background and a body with a red background.
Unfortunately, when there's a horizontal scrollbar, the wrapper only takes up the part of the page that can be seen with the scrollbar at the extreme left. The area of the page to the right of this is entirely red.
Here is the relevant HTML and CSS:
<div id="wrapper">
<div id="page" class="container">
<div id="content">
<h2 class="title">Foo</h2>
<div class="Body">
<p>Bar</p>
</div>
</div>
</div>
</div>
#wrapper {
background-color: #000000;
}
.container {
width: 1000px;
margin: 0px auto;
}
#page {
padding-top: 280px;
}
#content {
float: left;
width: 620px;
padding-right: 40px;
}
body {
margin: 0;
background: #FF0000;
}
you need to specify the minimum width for div #wrapper
#wrapper {
min-width: 1000px;
}