I'm wondering if it's possible to position relative container with unknown height at the bottom left of a website so that any text in it starts at the bottom and goes up (as we add it)? It's like exact opposite of how browser usually renders it (from top to bottom, vertically).
Example:
<div class="container">Unknown amount of text</div>
.container { max-width: 600px; left: 100px; bottom: 100px; position: absolute; }
This works just fine but if Unknown amount of text is longer than height of user's monitor, vertical scrollbar does not appear. It requires position: relative; then but is there any way to make this container stick to the bottom left with position: relative;?
I'm looking for HTML/CSS solution only (if that's possible at all).
You can use an outer div to get some manipulation effect.
Give same bg color to both parent and child div then it give the bottom to top effect.
HTML
<div class="wrap">
<div class="container">Unknown amount of text</div>
</div>
CSS
html, body{height:100%}
.wrap{ background:green; overflow:auto; height:100%}
.container { max-width: 600px; background:green; position:absolute; bottom:0; }
DEMO
You can try this one i think this one help you
just changes in css. & in bottom you just increase margin top for set the bottom align.
.container { max-width: 600px; left:0; margin-top:200px; position: relative; }
Related
I've been looking into mimicking some websites to learn some new neat techniques.
And while doing so, I came up with some trouble emulating a certain site.
http://dangblast.com/ heres the link to the site.
If you look at the top of the website there is a div that contains a background image that has an "absolute" position and a "background-size" that covers and my question starts here.
Right underneath that div, there is another div (id = "about") that follows up right after and surprisingly the div always comes right after even if the window size is changed.
From my understating, I thought that it was impossible to stack an "abosolute" or "fixed" positioned div right after another, they just become layered.
Is there a trick to achieving this type of effect?
right now I have a div in my website that looks like the following
The Html
<div id = "fill_screen">
</div>
<div id = "followup_div">
</div>
The CSS
#fill_screen {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
#followup_div {
background-color: yellow;
height: 500px;
width: 100%;
}
Is there a way to make divs fit right under a absolute or fixed positioned div that is also filling up the window of the screen? That is dynamic to the web-browser size?
I did some research and there were techniques using viewports height (vh), but I saw that some old browsers were not compatible with it.
You have to modify the position of the followup_div. The followup_div uses absolute positioning and has to be moved 100% from the top.
HTML:
<div id = "fill_screen">
<button>text</button>
</div>
<div id = "followup_div">
</div>
CSS:
body {
margin:0px;
}
#fill_screen {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
right:0;
bottom:0;
background-color:red;
}
#followup_div {
background-color: yellow;
height: 500px;
width: 100%;
position:absolute;
top:100%;
}
DEMO
If you take a look at the top of id="intro" you can see class="intro-down". this anchor makes space for fixed div and if you remove it you can see that id "intro"(which is a fixed div) will be disappeared.
I'm struggling with this problem for over an hour now and I just can't get it right.
Fiddle to show the problem
<div class="main">
<div class="header">This is the header</div>
<div class="content">
<div class="top-container">This is the top content container</div>
<div class="bottom-container">
<div class="scroll-container">
This is the container that scrolls
...
</div>
</div>
</div>
</div>
The page is separated into 2 sections. A header and a content div. The content is separatend again into 2 sections. The top and bottom container. I want to make the bottom container scrollable when the content is too large to show on the screen.
This means that the bottom container scrolls under the top container. The header container and top container in the content container should not move. The scrollbar should only be in the bottom-container and not on the whole page.
How can I get this done?
[EDIT]
To make it more clear. The height of the content/bottom container div is unknown, in % and px.
I'm already a bit further: updated Fiddle
Apply 50% for the top and bottom container.
.top-container {
position: relative;
background-color: blue;
height:50%;
}
.bottom-container {
background-color: grey;
position:relative;
overflow: auto;
height:50%;
}
DEMO
Fiddle answer
I made the bottom container fill the remaining space with
position:relative;
display:table-row;
height: 100%;
Then the boundaries of the scroll container are set with
position: absolute;
top: 50px; /* Set the top because the top container is within the boundaries */
bottom: 0;
left: 0;
right: 0;
overflow-y: auto; /* only y-scroll when neccesary */
overflow-x: hidden;
I'm still not really happy with this fix as i need to set the top to the height of the top container. If someone has suggestions to fix this, please let me know!
[EDIT]
Fiddle update
Fixed my issue with a wrapper around the scroll-container. The bottom-container now sets the boundaries for all underlying elements, and the scroll-container fills the space to scroll.
.bottom-container {
position: absolute;
top: 0px;
width: 100%;
bottom: 0px;
}
.scroll-container-wrap {
position:relative;
display:table-row;
height: 100%;
}
<div class="bottom-container" style="height:50%; overflow:auto;">
//use overflow= auto to make it scroll
I think this will help you.
Just use overflow in every div you want to have a scroll tab
I'm working on a project using a responsive layout. I have a div that goes beneath and around the header div. I did this with negative absolute positioning. The problem is the elements following that are getting positioned on top of it. The absolute positioning took that div out of the normal flow of the page and now stuff is stocking up on top of it.
Normally, I would just absolutely position the rest of of the elements in the content div, but the absolutely positioned div contains an image slider which is responsive so the height of the div varies depending on width of the screen.
<div id="container">
<div id="header"></div>
<div id="content">
<div id="absolutely_positioned"></div>
<div id="problem_div">
</div>
</div>
#container {
max-width: 1600px;
}
#header {
width: 52.5%
height: 146px;
}
#content {
position: relative;
}
#absolute_position{
position: absolute;
top:-100px;
}
The elements following the absolutely positioned div are getting stack on top of it? I'm not getting the problem: jsfiddle. Note that I had to fix some typos; double check your classes/IDs in the markup and stylesheet are matching.
CSS (with fixed typos):
#container {
max-width: 1600px;
border:2px dotted black;
}
#header {
width: 52.5%;
height: 146px;
border:1px solid red;
}
#content {
position: relative;
}
#absolutely_positioned{
position: absolute;
top:-100px;
background:blue;
}
Of course, this is assuming my comment above didn't isolate the problem being that your problem_div does not have a closing tag in the code you posted.
EDIT
In response to your comment above, I know your problem now. You will notice the blue box is aligning right underneath the red box. This is normal behavior because those are both relative divs. When you make a div absolute, not only does it ignore surrounding divs (but not containing divs) but the surrounding divs also ignore it. That is, the green box will not push the blue box down, only the red box will. To illustrate the answer further, if you click my jsfiddle you will see the problem_div text right underneath the header div, which is where it should be. The absolute div does not affect this behavior.
Just take off the
position:absolute;
and instead of using
top:-100px;
use
margin-top:-100px;
I fixed it on your jsfiddle.
Here's what I'd like to do: have a banner across the top of a website which stretches all across. On the left is a menu, and on the right a logo image; the menu floats left, the image floats right.
The problem is the resizing of the browser window. Because the image floats right, it correctly moves as the window gets smaller. However, at some point it begins to float into the menu. Here is a Fiddle that illustrates this effect with two floating images. Resize the browser window to see how the two images overlap.
Setting
body {
min-width: 800px;
}
I can now make sure that the scrollbar appears as the browser window reaches a certain minimum width. However, that doesn't hinder the right-floating image to keep moving as the browser window keeps getting smaller. I tried to change position: relative but that didn't work. I tried to use Javascript to fixate the images once the browser window reaches its min-width but that didn't seem to have an impact either. Using min-width on the DIV and making the images children of the DIV didn't work either.
My question is: how can I make sure that, starting at a certain window size, the right-floating image stays put instead of floating into the left-floating menu?
EDIT: Oh dear, I forgot to mention a rather important detail: the menu bar at the top needs to be sticky. That is why I used the position: fixed property for the DIV. The other page content is supposed to scroll under that menu and out of the window, see the modified fiddle here which is based on ntgCleaner's answer. This kind-of changes the whole thing, doesn't it! Sorry about that...
Thanks!
A couple things I changed:
I made your banner DIV a container instead of just a free floating div. Probably not necessary.
I gave that banner div a min-width:280px and made it overflow:hidden;
I made the images just float left and right, not positioned relatively or absolute (since it's in the div container now).
#banner {
left: 0px;
top: 0px;
width: 100%;
height: 60px;
background-color: lightblue;
z-index: 1;
opacity: 0.8;
overflow:hidden;
min-width:280px;
}
#left {
float:left;
margin:5px;
height:40px;
}
#right {
float:right;
margin:5px;
height:40px;
}
Here's the fiddle
EDITED FOR THE EDITED QUESTION:
You will just need to place all of your content under your header into a div, then give that div a top margin of the height of your fixed div. In this caes, it's 60px.
Add this to your HTML
<div id="content">
this <br>
is <br>
some <br>
test <br>
text <br>
</div>
then add this to your CSS
#content {
margin:60px 0px 0px 0px;
}
Here's the new fiddle
Is this what you are after? http://jsfiddle.net/9wNEx/10/
You are not using the position: fixed correctly. Fixed means 'positioned relative to the viewport or browser window', and that is exactly what you are experiencing.
I removed the position: fixed from the images, and placed them inside the div. This should keep them always on top of the page, as they are inside the div that is still positioned fixed.
Also I tweaked some of the other styling to replicate your example. Note that i removed the fixed height of the head and replaced it by a padding bottom. This way the height will follow the content whenever the screen size becomes to small and the images are forced underneath each other.
The css looks like this now:
#banner {
left: 0px;
top: 0px;
width: 100%;
padding-bottom: 15px;
background-color: lightblue;
z-index: 1;
position: fixed;
opacity: 0.8;
}
#left {
float: left;
margin-left: 10px;
margin-top: 5px;
height: 40px;
}
#right {
float: right;
margin-right: 10px;
margin-top: 5px;
height: 40px;
}
I changed your HTML to put the <img> tags inside the banner, and added the min-width to the #banner since it has position: fixed. You'll still need to add min-width to the body or a container that wraps all other elements if you want there to be a min-width of the entire page.
http://jsfiddle.net/Wexcode/s8bQL/
<div id="banner">
<img id="left" src="http://www.google.com/images/srpr/logo3w.png" />
<img id="right" src="http://www.google.com/images/srpr/logo3w.png" />
</div>
#banner {
width: 100%;
min-width: 800px;
height: 60px;
background-color: lightblue;
z-index: 1;
position: fixed;
opacity: 0.8; }
#left {
float: left;
margin: 5px 0 0 10px;
height: 40px; }
#right {
float: right;
margin: 5px 10px 0 0;
height: 40px; }
When I look at your Fiddle I think your problem isn't the floats at all. position:fixed supersedes float. Those two elements aren't floating at all, they're in a fixed position (similar to an absolute position), which is why they overlap when they don't have enough room.
Take out float:left and float:right, the result will be the same. Also, top, left, bottom, and right don't work on non-positioned elements. So they are superfluous on your banner.
If you use floats, however, when there is not enough room the right image will wrap underneath the left. See http://codepen.io/morewry/pen/rjCGd. Assuming the heights on the images were set for jsfiddle testing only, all you need is:
.banner {
padding: 5px; /* don't repeat padding unnecessarily */
min-width: ??; /* to keep floats from wrapping, set one */
overflow: hidden; /* clearfix */
}
.right { float: right; } /* only need one float, don't over-complicate it with two */
I have tried all sorts of things to try and get this working, I'm a little dated with html markup so please forgive me but i'm sure my problem can easily be solved. I have 2 divs (1 image logo and 1 flash object flame ) which I would like to center inside a container div which I would like to be centered with any browser screen resolution. I would also like the horizontal scroll bars to only appear when the browser window is below 800px wide hence the min-width:800px (this works ok) on the container div. my child divs keep appearing above and below each other and when I set them to absolute positioning the just appear to the left ontop of each other.....I just want everything to be aligned centrally and both divs at the top of the screen, can someone please help and point me in the right direction.
Thanks
Andy
.container {
margin-left: 0 auto;
margin-right: 0 auto;
min-width:800px;
width: 100%;
height: 500px;
background-color:#F00;
}
.logo {
margin: 0 auto;
position:absolute;
vertical-align:top;
display:inline-block;
width:1059px;
height:136px;
}
.flame {
margin: 0 auto;
vertical-align:top;
position:absolute;
display:inline-block;
width:861px;
height:134px;
}
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.container {
margin:auto;
width:800px;
height: 500px;
background-color:#F00;
}
.logo {
margin:auto;
float:left;
width:450px;
height:136px;
background-color:#096;
}
.flame {
margin:auto;
float:left;
width:350px;
height:134px;
background-color:#099;
}
</style>
</head>
<body>
<div class="container">
<div class="logo">LOGO GOES HERE</div>
<div class="flame">FLASH CONTENT GOES HERE</div>
</div>
</body>
</html>
Using floats, you can make your divs stack up next to each other. However, the sum of the widths of the divs must be less than or equal to the width of the container, otherwise the 2nd div will appear below the first div. Your container will also always be centered to the browser. Also, if the width of the browser is below 800px (width of the container), horizontal scroll bars will appear.
One last thing, this code centers the container but does not center your divs if the sum of the widths of the floated element are less than the width of the container.
You can go through this link to learn how to do that as well.
EDITED:
Alternately, if you know the sum of the widths of the logo and the flash banner, which I think you do, you can create a div with width equal to the sum and apply a margin:auto property to it. Involves use of an extra div and prior knowledge about the width of your logos and flash banners, but I think will suit your purpose.
Hope this helps. :)
.container {
margin-left: 0 auto;
margin-right: 0 auto;
min-width:800px;
width: 100%;
height: 500px;
background-color:#F00;
**position:relative;**
}
#media only screen and (max-width: 800px){
html{
overflow: auto;
overflow-y: hidden;
}
}
Final version
To sum it up - the task was basically this:
have two elements width different widths be aligned alongside in one row
this row should always be centered as kind of a header
only when the screen is smaller than 800px a horizontally scrollbar should appear
the non-visible edges are trimmed on the left and the right side
This is a possible solution:
Try before buy on jsfillde.net
And a little explanation:
HTML markup
<div class="wrapper">
<div class="center">
<img src="" alt="">
<object></object>
</div>
</div>
CSS
body, html {
width: 100%;
min-width: 800px;
height: 100%;
margin: 0;
padding: 0;
}
div.wrapper {
width: 100%;
height: 134px;
overflow: hidden;
}
div.center {
position: relative;
margin:0 auto;
width: 800px;
height: 100%;
}
div.center > img {
position: absolute;
top: 0;
left: -499px;
}
div.center > object {
position: absolute;
top: 0;
left: 560px;
}
On "How it works"
The first div wrapper spans an area from the left side to the right side. This is the space which is always visible. To cut off the edges I used overflow: hidden; on that element. So everything that sticks out will be invisible.
The second div center is placed in the middle of the viewport using margin: 0 auto. It has a fixed width. I used 800px because this was the desired min-width in the question. It will work with any other wide, too.
Now it's time to align the two header elements. Both have a fixed width. In this case the image is 1059px and the object is 861px, making it a total of 1920px. The middle of those elements would be obvious at 960px. Our container's center is actually at 400px, because the min-width of the page is 800px. So the actually meeting point of both elements is at 560px within this container, as we have a 160px shift. So for the object it's easy: simple set left: 560px;. But the left container must be placed, that it ends at this point. We had a width of 1059px and substract it from the 560px and get the final value of left: -499px;.
As the container in the middle is centered, both elements will be centered, too. And as the wrapper's overflow is hidden, both edges will be cut off at the end of the viewport. Without any scrollbars visible.
At the end, there's only one thing left: Set min-width:800px on the <body>-tag, so that the scrollbars get visible as soon, as the window is smaller than 800px.
First answer
position: absolute takes the element out of there parents flow, except you set the parents position explicitly:
.container {
position: relative;
}
This should do the trick, but it didn't test it with your markup.