I am trying to design a website, where I want a div of 100% height inside a element and then some other div inside it, formatted in a specified manner.
the code I am trying is this
css
#main1{
margin: 0 auto;
width:300px;
background: red;
position:absolute;
}
#content1{
top:0;
width: 300px;
height: 250px;
background: gray;
}
#content2{
width: 300px;
height: 250px;
background: yellow;
}
#content3{
width: 300px;
height: 250px;
background: brown;
}
#bottom{
width: 300px;
height: 75px;
position:absolute;
bottom:0;
background: blue;
}
and I have designed it like this
<td width="300" valign="top" style="position:relative; height:100%">
<div id="main1">
<div id="content1">/*****Content1****/</div>
<div id="content2">/*****Content2****/</div>
<div id="content3">/*****Content3****/</div>
<div id="bottom">/*****Content4****/</div>
</div>
</td>
I want the div with id content1 at extreme top and with id bottom at extreme bottom inside td, so that if the height of the element varies it automatically get aligned at top and at bottom with margins in between the inner divs, also I want this to be all browsers compatible.
I tried and it worked in IE.
I have tried so many codes but couldn't get the solution
You can see in this link at right side that where and what I am trying to make
http://www.spoiledagent.com/about_hanu.html
Thanks
First, I'd ask that you display the whole of the HTML markup for the body structure. A small snippet doesn't give an accurate picture of the entire structure that could be affecting your undesired result.
Second, I'd recommend you don't use tables for site layout. It's bad practice for a variety of reasons. Here's a Q/A with supporting arguments.
Third, you have to remember that every element that you make has a parent, right up until the <html> tag. So, let's say I wanted the main container of my site to have 100% height to the window.
Let's say this is the only other element besides <html> or `'.
<div id="container">
<h1>Why you no touch the bottom?</h1>
</div>
with this CSS:
#container {
background: #ccc;
height: 100%;
}
http://jsfiddle.net/BvNY4/
In this fiddle, we can see it doesn't to to 100% height. Why? Well...technically, it is...but it's parent isn't. So like a brave Tee-Ball coach, we need to tell this element's parents what to do:
html, body {
padding: 0;
margin: 0;
height: 100%;
}
http://jsfiddle.net/B6RH7/1/
Ta-da! Let me know if you need anymore clarification on how this applies to your scenario. :)
A little more directed at your specific goals, try this article explaining position: relative; for parent elements. If the parent element has attribute position: relative;, any child elements with position: absolute; will position themselves to the parent element.
Related
I want to know how to position multiple div's on each other, without position absolute in HTML.
I tried with position: absolute but due to this, I have to specify container div height explicitly, which I don't want to do.
How do you want to place them exactly ?
If they are div, they should be on top of each other with position: static by defaults. If you don't want to use position: absolute, you could use negative margins. This is not a recommended solution, but the hack definitely works.
.d1 {
background-color: red;
height: 200px;
width: 150px;
}
.d2 {
background-color: blue;
height: 150px;
width: 100px;
margin-top: -100px;
}
<div class="d1"></div>
<div class="d2"></div>
Note that you can use % margins if needed but the % margin properties will always be a percentage of the parent block WIDTH. So be careful with that.
NB : Tanks to #Oriol for correcting mistakes I made. I edited my answer thanks to his advice.
Not sure what you're trying to achieve but I can imagine only one scenario, where something like that would be usefull. Namely switching between several divs. If that's the case use display:none on all but the current div.
In anyway child div is by default "overlapping" with parent div, so I assume what you mean is that you want siblings to be "on each other"... however that sounds.
The only way to do this is (except for negative margin hacks) absolute and relative positioning.
Here's how:
#foo{
background-color:red;
height: 50px;
width: 50px;
position: relative;
}
#bar{
background-color:blue;
height: 50px;
width: 50px;
position: absolute;
}
#foobar{
background-color: green;
height: 50px;
width: 50px;
position: absolute;
}
#raboof{
background-color: yellow;
height: 50px;
width: 50px;
}
<div id="foo">
<div id="bar"></div>
<div id="foobar"></div>
<div id="raboof"></div>
</div>
Jsfiddle: https://jsfiddle.net/t81hvsa1/
Keep in mind that: 1. You may but don't need to make last child absolutely positioned. 2. The last absolutely positioned child will always be on top.
Edit: I've just noticed, this question's discussion has all the answers you could possibly want; more elaborate and better formatted at that.
Problem: When you make a certain div's position fixed (often used as a side bar, or side menu kind of stuff), and if you continue scrolling down, the div overlaps with the footer.
body {
margin: 0;
}
#header {
width: 100%;
height: 290px;
background-color: #07CB6F;
}
#body {
width: 100%;
height: 3450px;
background-color: #2FA3F7;
}
#body_inner {
width: 1280px;
height: 3450px;
margin: 0 auto;
}
#side_menu {
width: 220px;
height: 270px;
position: fixed;
background-color: #ffffff;
}
#footer {
width: 100%;
height: 200px;
background-color: #FF00AB;
}
<div id="header">
</div>
<div id="body">
<div id="body_inner">
<div id="side_menu"></div>
</div>
</div>
<div id="footer">
</div>
I did not use any jquery this time. With the codes given above, since the #side_menu is set as height: 270px, it seems to be okay with the overlapping, however, it still overlaps with the footer if you zoom up the browser (and sometimes depending on the types of browsers and computers).
I would like to know why it happens, and how can it be solved (or prevented).
Thanks in advance :)
Here's a fiddle with the solution
https://jsfiddle.net/stc0ogy2/1/
you need to start using the z-index, it works like the photoshop layers though the z-index will not work without the position so you have to add a position like absolute, relative and so on.
UPDATE
As #AndreiGheorghiu mentioned you should use some javascript for a better solution, choose one of the libraries from the list he gave you.
UPDATE 2
I found this easy-to-use library that I believe will help you with the fixed side menu, it's called tether. Hope it helps.
Your footer is looking to take up 100% of the width space at the bottom and a side bar that wants to take up 220px of the width. On a small screen your menu and footer are fighting for space because its not mathematically possible for one item to take up 100% of space and another item to sit next to it.
You won't notice a problem full screen on most desktops because your menu is too heightwise to be noticeable.
Ideally when declaring your width for the menu and footer you want to use calc() to enable resizing without causing overlap.
https://jsfiddle.net/nu8av25m/ a quick example I put together to demonstrate how it works.
<body>
<div class="navigation">menu</div>
<div class="main">main body</div>
<footer>footer</div>
</body>
.navigation {
Width:50px;
Height:100%;
Background-color: red;
Float:left
}
.main{
Width: calc(100% - 200px);
Height: calc(100% - 100px);
Background-color: blue;
Right:0;
}
Footer{
Width: calc(100% - 100px);
Height: 50px;
Background-color:green;
Bottom: 0
}
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 have a div with another div inside. The second div have width,height and background-color: green. This one has absolute position and so its container isn't shown.
<div id="root">
<div id="r1">
<div id="r2">
</div>
</div>
Mas
</div>
CSS file
#root{
width:300px;
background-color: red;
}
#r1{
position: relative;
width: 100px;
background: yellow;
}
#r2{
position: absolute;
display: inline-block;
width: 50px;
height: 50px;
left: 0;
background-color: green;
}
http://jsfiddle.net/sev2E/1/
I want to know if it's possible that its container is shown and wrap the div with absolute position.
I want to see something like this but without using relative position and without adding height to its container.
http://jsfiddle.net/sev2E/2/
Thanks!
add some height to your r1 css
#r1{
position: relative;
width: 100px;
background: yellow;
height:60px;
or adding a padding-bottom:"height of your div" which is same
#r1{
position: relative;
width: 100px;
background: yellow;
padding-bottom:55px
}
The short answer is no.
Once you absolutely position an element, it is taken out of the document flow and it will no longer be factored into computing the height or width of its containing block.
The text formatting model used by the Android API (written in Java) is different from that implemented by modern browsers that are CSS compliant.
To get similar visual effects between a CSS based web page and an Android interface layout, you need to code each implementation according to the rules and constraints of each language being used.
The answer by Pumpkinpro is essentially the way to get the "wrap_content" effect in CSS.
I have a wrapper that contains all the elements of an html page.
#wrapper {
width: 1000px;
height: auto;
min-height: 100%;
margin: auto;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4488ff), to(#4422ff));
[...]
background-attachment: fixed;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
}
Here's the HTML code sample
<div id="wrapper">
<div id="uppermenu">
<div id="container">
<div id="logo"> <img src="images/logo.png" height="100%"> </div>
<div id="banner"> <br></div>
</div>
</div>
<div class="sidemenu"> [...] </div>
<div id="guide"> [...] </div>
</div>
I want this wrapper to change its height depending on the content it has to contain, but as I do this is not happening.
If I try to use
overflow: hidden;
the wrapper is shifted down by the uppermenu div (which it should be containing) and using
clear: both;
at the end of the contents doesn't change anything.
I've tried at least 5 different question answered correctly here but none worked well for me.
Last thing: the wrapper set as I wrote (with min-height at 100%) fits perfectly the screen of my browser, but that clearly not what I want it to look!
Any help???
EDIT: here's the CSS of sidemenu class
.sidemenu {
float: left;
margin-left: 20px;
margin-top: 20px;
height: 200px;
width: 150px;
background-color: #4488ff;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
z-index: 3;
}
and of the guide id
#guide {
float: left;
margin-top: 20px;
margin-left: 50px;
height: 100%;
width: 760px;
background-color: #4488ff;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
z-index: 3;
}
uppermenu and container
#uppermenu {
position: fixed;
top: 0px;
width: 1000px;
height: 100px;
margin: auto;
background: #004465;
z-index: 5;
}
#container {
width: 1000px;
min-height: 100%;
margin: auto;
}
Solution one: clear: both
Adding a block element with the style clear:both; onto it will clear the floats past that point and stop the parent of that element from collapsing. http://jsfiddle.net/TVD2X/1/
Pros: Allows you to clear an element and elements you add below will not be effected by the floated elements above and valid css.
Cons: Requires the another tag to clear the floats, bloating markup.
Note: To fall back to IE6 and for it to work on abstinent parents (i.e. the input element) you are not able to use :after.
Solution two: display: table
Adding display:table; to the parent to make it shrug off the floats and display with the correct height. http://jsfiddle.net/h9GAZ/1/
Pros: No extra markup and is a lot neater. Works in IE6+
Cons: Requires invalid css to make sure everything plays nice in IE6 and 7.
Note: The IE6 and 7 width auto is used to prevent the width being 100%+padding, which is not the case in newer browsers.
A note on the other "solutions"
These fixes work back to the lowest supported browser, over 1% usage globally (IE6), which means using :after does not cut it.
Overflow hidden does show the content but does not prevent the element from collapsing and so does not answer the question. Using an inline block can have buggy results, children having strange margins and so on, table is much better.
Setting the height does "prevent" the collapse but it is not a proper fix.
Invalid css
Invalid css never hurt anyone, in fact, it is now the norm. Using browser prefixes is just as invalid as using browser specific hacks and doesn't impact the end user what so ever.
In conclusion
I use both of the above solutions to make elements react correctly and play nicely with each other, I implore you to do the same.
get rid of min-height: 100%. this means that the minimum height of the div is 100% of your browser height. eliminating this should make it fit to the content