I am trying to build a layout where I have two divs in the background that span 100% of the page and then a full height wrapper div of a smaller size for content that sits centered on the page. The issue I am having is while I can get the wrapper to sit correctly on top of the top div; I cannot get it to behave correctly on the bottom div. Here is an example:
html,
body {
height: 100%;
margin: 0 !important;
padding: 0 !important;
}
.index-banner {
background: #265f7a;
height: 60%;
width: 100%;
}
.wrapper {
background: #444;
height: 200%;
margin: 0 auto;
position: relative;
top: -60%;
left: 0;
right: 0;
width: 50%;
}
.footer-bg {
background: #888;
height: 250px;
position: relative;
top: -85%;
left: 0;
right: 0;
width: 100%;
z-index: -1;
}
<body>
<div class="index-banner"></div>
<div class="wrapper"></div>
<div class="footer-bg"></div>
</body>
Now the issue with the above code is by using a negative positioning, then I leave a massive gap at the bottom of the page. However I have also tried:
Using an absolute positioning on the wrapper div. Works perfect in keeping the page the correct size however then the bottom div floats to the bottom of the viewport
Using a faux method of making the bottom div look like a full width div by using a background image on body; unfortunately this just sticks it to the bottom of the viewport instead of the bottom of the page due to no content being between both background divs.
Now I have thought about keeping the wrapper occurring naturally between both of the background divs so they do not overlap at all and then put divs inside of those background divs lined up with the wrapper however that becomes a bit of a nightmare that I want to avoid because then I have to struggle to try and align the content that overlaps them as each of those "section divs" would have to be split into two (imagine trying to make a paragraph look like one because it is spread between two divs).
So my question is - am I going about this the wrong way and overlooking something that I could be doing differently to make this work?
Related
I'm essentially displaying a banner image on a page. At the base of that image is an overlay (the abs. pos. div) with a semi-transparent background image to make a "see through" effect. Everything is positioned properly and working fine except the overlay at a width of 100% expands outside of my container div. I've tried setting the overflow to hidden of the container div but that does not seem to work. My parent container has a position relative as well. This is responsive so the overlay with need to shrink and expand to the image width. Here's my code:
.hero-img-wrap {
position: relative;
margin-top: 35px;
padding-left: 15px;
padding-right: 15px;
}
.hero-img-wrap img {
width: 100%;
height: auto;
}
.hero-img-wrap .trans-overlay {
position: absolute;
bottom: 0;
z-index: 9;
height: 19px;
background-image: url('../images/semi_transparent_white.png');
width: 100%;
}
<div class="hero-img-wrap">
<img src="images/banner_image.jpg" alt="">
<div class="trans-overlay"></div>
</div>
I could pull this off with JQuery but I'd like to avoid that. For what it might be worth - this code is within a Bootstrap 3 column.
Since you've defined the height, why not a negative value
position: relative;
top: -19px;
Just a thought, heres a fiddle for ya
http://jsfiddle.net/g11yggap/
Try
Width:inherit;
On overlay div
I have a middle container that takes up whatever vertical space is left on the screen. In it, I placed a Jquery scroller that is currently set to 200px:
.scroll-pane
{
width: 100%;
height: 200px;
overflow: auto;
}
.horizontal-only
{
height: auto;
max-height: 100%;
}
However, if I set .scroll-pane height to 100%, it just removes the scrollbar and stretches the whole page.
See JsFiddle here
How can I stop this? Thanks!
Here is my solution to this problem (jsfiddle). It uses markup like this:
<div id="top">...</div>
<div id="wrapper">
<div id="middle">...</div>
</div>
<div id="bottom">...</div>
The top and bottom divs are position absolutely at the top and bottom, with a width of 100%. The wrapper div has height: 100%, box-sizing: border-box, and top and bottom padding equal to the height of the top and bottom divs, respectively. This causes it to fill the viewport but have padding underneath the top and bottom divs. The middle div has a height of 100% so it fills the content box of the wrapper (i.e., 100% minus the top and bottom paddings). It has position: relative, which leaves you free to use height: 100% on both interior boxes.
Lastly, middleleft is positioned absolutely and middleright has a left margin equal to its width, which causes it to fill the remaining horizontal space.
height: 100% never works like you want it to. The CSS specifications dictate that it must equal the height of the browser window, or the closest parent block-level element with an absolute height specified. That means that this code will should not work as expected:
<!DOCTYPE html>
<html>
<head>
<title>Want the body to fill the page? Too bad!</title>
<style type="text/css">
html, body {
height: 100%;
}
.page {
padding-top: 50px;
box-sizing: border-box;
height: 100%;
}
.header {
margin-top: -50px;
height: 50px;
}
.body {
height: 100%;
background: gray;
}
</style>
</head>
<body>
<div class="page">
<div class="header">
<h1>Too bad!</h1>
</div>
<div class="body">
<p>Hello cruel world...</p>
</div>
</div>
</body>
</html>
However, that works fine in Chrome. Why? I can only assume that Google decided to specifically go against web standards because in this case, the standards make no sense. Why would I want something to be the exact height of the browser window? The only time is a <div> wrapping the whole page; in this case a simple "height is relative to the parent block" rule works just fine without breaking expectations elsewhere.
There is a way around this, though. At least, that's what I wanted to say before I tried this in Firefox too. Another way to get height: 100% (with some restrictions) is with position: absolute. However, it would seem that Firefox isn't respecting position: relative on a display: table-cell element - probably those pesky standards again. Here's the code for this technique anyway, if you are interested:
#wrapper > div > #middleleft {
position: relative;
}
.scroll-pane {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
So what can you do? Well, unfortunately, I don't yet know the answer to that. A kludgy solution would be to have Javascript set the height to an absolute pixel value, and attach an event to window resizing in order to update that height. I'll get back to you if I find a better way.
I'm not sure exactly what your trying to do, but another method would be to set body height to 100%, then set scrollpane to "height: auto". Then for the "top" and "bottom" div's used fixed positioning, plus margin equal to top/bottom height.
body {
height: 100%;
}
.top {
position: fixed;
top: 0;
height: 100px;
}
.middle {
height: auto;
margin: 100px auto;
}
.bottom {
position: fixed;
bottom: 0;
height: 100px;
}
<div class="top">content</div>
<div class="middle">content</div>
<div class="bottom">content</div>
Try that...
I have a website with two divs aside the main body, on the left and right side, and both of them have images which are approximately 500px in width, combined with the main body width of 980px (it makes them larger than any normal screen resolution).
HTML:
<body>
<div id="#brandLeft">..</div>
<div id="#brandRight">..</div>
<div id="#mainbody">..</div>
</body>
CSS:
#brandLeft {
display: inline-block;
height: 890px;
left: 50%;
margin-left: -1010px;
position: absolute;
top: 171px;
width: 350px;
}
#brandRight {
display: inline-block;
height: 890px;
position: absolute;
right: 50%;
margin-right: -835px;
top: 171px;
width: 350px;
}
In the body I've already set the overflow-x: hidden, so I don't see the vertical scroll bar, but the page is still scrollable with the arrows and with the mouse center button.
I can't use jQuery to disable the scrolling so I was wondering if there's a way to have the divs with the large images, without having a scroll bar on the website?
Your images are to big for the side bars, so try this.
Remove the width and height of your images from the actual html.
Control the width/height of the images by using something like..
#brandleft, #brandright img {
width:100%;
}
Doing somethign like that should scale your images to the size of the Divs on the left and right side to get rid of the scroll bars. If that doesn't work let me know.
I have a CSS background image that will stay centered no matter what the browser size is. The image used does not stretch the entire width of the browser. This being the case, I need the divs I have also placed in the CSS with background images and links to maintain their position relative to the background image that stays centered no matter what the browser size is.
I have dabbled around with.
position:relative;
but it cascades all the elements and doesn't allow specific positioning that I am looking for. Here is the code I am working with. I appreciate any insight to my newb question, and look forward to learning how this behaves better.
When this code is viewed on different sized browsers, with a background image that does not span the entire width, the elements move around because they are set to percentage. I need them to stay where they are but remain centered with the background. I am not sure how to write this in CSS and have been struggling with it for some time. Thankyou for any guidance on this specific issue.
body {
background:#000 url(bg.jpg) no-repeat center 0;
}
#logo {
margin: 0px 11%;
padding: 0;
position:absolute;
}
try grouping elements you want to put next to it together inside a div ~say container~ and set the background to the div.
Then set the div ~container~ position to relative and center it.
Then align other elements using position absolute and top bottom left right property wrt the ~container~div.
here is the code for it
<div id="container">
<div id="element1"></div>
<div id="element1"></div>
</div>
<style type="text/css">
#container {
background:#000 url(bg.jpg) no-repeat center 0;
width: 800px; height: 400px
position: relative;
top: 50%; left: 50%;
margin-top: -200px; margin-left: -400px }
#element1 {
position: absolute;
top: -30px; left: -20px;}
#element2 {
position: absolute;
top: 410px; left: 820px;}
</style>
I have a page which is divided up into 3 divs, left center and right. I don't want to display anything in the left and right, they just frame the page.
#leftDiv
{
background-color: Gray;
width: 10%;
left: 0px;
top: 0px;
position: absolute;
height: 100%;
}
#rightDiv
{
background-color: Gray;
height: 100%;
width: 10%;
left: 90%;
top: 0px;
position: absolute;
clear:both;
}
The center div has a table, which allows the user to select how many rows to see. If they chose a large value then the body of the table went beyond the bottom of the left and right div.
To correct this I put the following code in
if ($("#leftDiv").length == 1) {
$("#leftDiv").height($("body").height() + "px");
}
if ($("#rightDiv").length == 1) {
$("#rightDiv").height($("body").height() + "px"); ;
}
this works fine until the user selects a smaller value than the page size, after selecting a larger value.
Then the left and right divs get set to less than 100%.
What i need is a way to find out what 100% is in pixels and then I can compare this to the height of the body and decide which is bigger.
Any ideas?
Thanks
John
Use margin: 0 auto
Kill your left and right columns, give your main div a width, and then center that div using an auto left and right margin. For example:
#mainDiv {
width: 80%;
margin: 0 auto;
}
Why are you creating empty elements to frame the page? How about setting the body background to the colour you require and:
#center_div {width: /* whatever */;
margin: 0 auto; /* to center in the viewport */
overflow: auto; /* or visible */
}
You could leave off the overflow property, and simply use min-width in place of width (I can't remember how cross-browser compatible this is) to define the 'normal' width, in such a way that the content will force the div to be larger as required to display the content.
If the left and right divs don't have any contents, then there's no need for them to be separate divs: apply their formatting to your container div instead, and center your contents div using margin: 0 auto. Obviously, you'll need to give the container div a specified width, and a non-transparent background. Then you can let the browser take care of resizing the window as needed - there's no need for you to reinvent the wheel for that part.
CSS:
#container {background-color:gray;}
#content {background-color:white;width:80%;margin:0 auto;}
Html:
...
<body>
<div id="container">
<div id="content">
...your content here...
</div>
</div>
</body>
...
(If your page doesn't have a container div, then you can apply the background color to the body element instead, and save even more code.)