How do you get a div that expands to the full size of the browser (no matter how you resize) while working with the 960 grid system? I can only think of something like this - but I don't like it because what if you have a background for the container_24 then you'd have to set it two times. The point is, I want everything else working under the container_24 even the text inside the full expanding div.
<div class="container_24">
<!-- stuff -->
</div>
<div style="width: 100%; background-color: gray;">
<div style="margin: 0 auto; width: 940px;">
Hello
</div>
</div>
<div class="container_24">
<!-- more stuff -->
</div>
Putting a z-index value on both the container and expanding div and having the z-index value for the expanding div larger than the container will lift it out. You then need to set the position of the expanding div to absolute and then it will expand out of the container. I'm sure there are some cases where this won't work/cut it though.
Related
I'm trying to have some elements of design positioned absolutely relative to the page's background but not affecting the page layout (scroll and page height must remain dependent only on the page's contents).
Let say, placing two squares square1 and square2, potentially overflowing on the page's width and maybe below the page's contents.
I've played with the following HTML:
<div id="background">
<div id="inner">
<div id="square1">
</div>
<div id="square2">
</div>
</div>
</div>
<main>
<!-- main content goes here, can be arbitrary HTML -->
<canvas height="1000px" width="10" style="background:red;"></canvas>
</main>
Both with attempts at CSS position: absolute of the squares inside a position: relative background div and overflow: hidden on the inner div ; but also playing with only margin-based positioning, I always end up with the "background" overflowing below the main content. Are there alternatives approach to achieve what I'm trying to do ?
To be more explicit, on this JS fiddle https://jsfiddle.net/1ktfyna4/2/ I'm trying to have the page stop scrolling at the bottom of the red line, while still showing the top of the yellow rectange.
I made it simply using display: flex on the outward-most container, with both the content div and background div inside.
See https://jsfiddle.net/m8pk45re/1/
I have a set up in wordpress using bootstrap what follows:
<div class="container">
<div class="row">
<div id="NEEDS TO BE FULL WIDTH>
</div>
</div>
</div>
I would like the background of the "NEEDS TO BE FULL WIDTH" div be full browser width but not sure how. If I make it more the 100% width it makes a horizontal scroll. Any ideas?
You can have multiple .container elements inside your html. If you change the .container into a container-fluid the content of the container will take up 100%
If you only want the background to be full width, but you want the content to be constrained by the .container (at most about 1140 pixels wide) then surround the .container with another <div> and put the background-image on that element.
my html looks like this:
<div class="container">
<div class="header-content">
hello!
</div>
</div>
i've recently come into a situation where I need the 'header' to be 100% the window for a full-width background. usually i would do this css:
<div class="header-background-color">
<div class="container">
<div class="header-content">
hi!
</div>
</div>
</div>
unfortunately, i am fairly deep into a framework and can't wrap the container. i need to construct it within the container.
<div class="container">
<div class="header-background-color">
<div class="container">
<div class="header-content">
hi!
</div>
</div>
</div>
</div>
i can't figure out a way to accomplish this, and am wondering if this is possible.
if i use this css for header-background-color
background: blue;
left:0;
position: absolute;
width: 100%;
the element looks right, but the page flow is interrupted.
does anyone know if my target goal is reachable?
i made a bootply to illustrate this http://www.bootply.com/129060
You can use a child (>) selector to select the first container element and set its width to 100% and remove the padding.
.example-3 > .container {
width: 100%;
padding: 0;
}
This assumes you'll always have a wrapper around it with a unique class name (or use body if it's the first div), but this also allows you to remove the position: absolute which is causing the overlap and the height can stay dynamic.
See forked bootply: http://www.bootply.com/129065
I've added a button that inserts a paragraph into the div so you can see how it's not affected by changes in height.
Only thing I can think of is using a dumby element to maintain the vertical space (i.e. set the height), and then use absolute positioning on the full width content (as you mention). This is really ugly and won't be a good solution if the height of the content is dynamic.
See #content_dumby element in forked bootply: http://www.bootply.com/129063
I have position:fixed <div> that appears in the middle of the screen. When there are messages, a second position:fixed <div> is put next to the first <div>.
I'm finding on different screen sizes (say a netbook - small screen) the <div>'s sit on top of each other.
Is there a way to lock their position to each other? I tried using a fixed container to hold both of them, but they still moved.
<div id="container">
<div id="container"></div>
<div id="container"></div>
</div>
EDIT:
<div id="wrapper">
<div id="container1"></div>
<div id="container2"></div>
</div>
CSS - container1 and container2 still move when I change the screen size.
#wrapper {
position: fixed
}
#container1 {
position: fixed
}
#container2 {
position: fixed
}
do I need to use relative positioning on the container 1/2 divs?
Most importantly, id is unique. You cannot use id="container" on three different elements. Each must have their own id.
<div id="container">
<div id="container"></div>
<div id="container"></div>
</div>
Should be something like this...
<div id="wrapper">
<div id="container1"></div>
<div id="container2"></div>
</div>
Also, where is your CSS code?
If you don't want these things to push each other around as the window size changes, one method would be to specify the exact size and position of each container.
EDIT:
Again, without seeing an example of this page, a demo, or a better description of what you want, this is speculation.
You could put fixed position on the wrapper and then put an exact size and position on the <div>'s within.
The position: fixed CSS rule "fixes" the element's position on the screen. Once you set it to fixed, it will never move from the position you put it in. Since you're applying fixed to all of your elements, you're seeing the elements stack (likely in the top-left of your screen considering you're not providing a top or left value).
If you want the child elements to appear inside your fixed container, just don't add position: fixed to them and they'll sit inside the parent just fine.
Of course, all of this is pure speculation considering we can't see an example of your problem, nor your desired result.
you cant fix the position of your div like this. first of all you have to find the screen size for your parent div which contains that div u want in middle.like
<div id="parent"> <div id="middle_div"></div> </div>
function getScreenSize()
{
var winW, winH;
winW = document.getElementById('parent').availWidth;
winh = document.getElementById('parent').availHeight;
}
this is how you vil get the size availabel for parent div.Then set the width and height of parent div according to it.now if you have width of parent div its easy to set middle_div in middle of parent div.
I am trying to build a page with the following in it:
Already have the following:
one div for page to center the whole page with width 809px
inside <div class="page"> is the following:
<div class="header">
<div class="container"> (container for content stuff)
<div class="footer">
What I am struggling with:
<div class="container"> should contain the following:
leftmost <div class="leftShadow"> with 100% height to container, with left shadow image as background for <div class="leftShadow">
second to left <div class="custom_content"> with 100% height to container (will contain content of page
second to right <div class="sidebar_right"> with 100% height to container (will contain extra links)
rightmost <div class="rightShadow"> with 100% height to container, with right shadow image as background for <div class="rightShadow">
So to summarise:
<div class="page">
<div class="header">header image</div>
<div class="container">
<div class="leftShadow"><img src="images/spacer.gif" alt="" /></div>
<div class="custom_content">(this is where the content would be)</div>
<div class="sidebar_right">(some other links)</div>
<div class="rightShadow"><img src="images/spacer.gif" alt="" /></div>
</div>
So what is supposed to happen is, when either custom_content or sidebar_right div's strength in length below the other, the other one would stretch in height to be the same with as the longer div. Obviously, both side div's (leftShadow and rightShadow) should also stretch to 100% of the container's height.
Can someone please guide me in the right direction? Basically, these div's should behave much like a table would when one td's content stretches beyond the height of the other td's.
Don't use divs like tables!
The leftShadow and rightShadow divs are completely unnecessary. Combine your background images into a single image and set it as the background of your container div.
To make sure the background image fills the height of the container, set background-repeat: repeat-y.
Why not use something like "Faux Columns"?
See http://www.alistapart.com/articles/fauxcolumns/
Perhaps you won't need the leftShadow and rightShadow divs: take a look at faux columns.
This is what you are looking for, I hope. :)
I'd do this differently because you're not going to get your divs to behave like tables.
I'm not entirely sure what you're wanting this to look like, but I'm guess you want some sort of shadow image down the left and right side of the container div. How about removing the leftShadow and rightShadow divs, put a repeatable background image on the content div of width 809px (and maybe height 1, depending on what your shadow image looks like). Also perhaps set overflow:hidden on the content div - if I remember rightly thats a kind of hack which will make the containing div stretch in this situation.