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
Related
I want to implement the following responsive layout in a webpage (HTML5 & CSS3):
All three div tags are wrapped inside a div with max-width of 960px;
I want to keep the width of "Navigation" div fixed therefore the following styles are being applied on it:
width:90px; float:left; padding:5px;
How can I make the "Contents" div occupy all remaining space without specifying its width, while keeping the layout responsive at the same time?
Thank you.
#content{
margin: 0 0 0 90px;
padding: 10px 30px;
}
Just put everything in a wrapper div and specify it's width to 960px
It depends on the browser support you want (need), with only 3 DIVs in a IE6+ way is hard (I think it's actually impossible). You're best bet is with the CSS calc method on the Content's DIV
width: calc(100% - 90px); The CSS calc method has IE9+ support so you would need to take that into account, in IE8- you would still need to use percentages.
If you are wondering how to separate the IE9+ code, then simply use #media i.e. something like this:
#media all {
#navigator {
width: 90px;
}
#content {
width: calc(100% - 90px);
}
}
#media is IE9+ compadible and because IE8- do not can't make heads or tails of it it will not affect them. So it is safe to place the IE9+ code in it.
If you can modify the HTML a bit I would advice the following:
<html>
<head>
<style type="text/css">
#h {
background: #f00;
}
#n {
background: #0f0;
width: 90px;
float: left;
}
#c_container {
background: #005;
width: 100%;
float: right;
margin: 0 0 0 -90px;
padding-left: 90px;
box-sizing: border-box;
}
#c {
background: #00f;
height: 50px;
}
#container {
max-width: 940px;
margin: 0 auto 0 auto;
}
</style>
</head>
<body>
<div id="container">
<div id="h">head</div><div id="c_container"><div id="c">cont</div></div><div id="n">nav</div>
</div>
</body>
Note how the content has a separate container, with is floated one way and the navigator is floated the other way, this is to make sure that they are not on the same plane.
the #c_container has a margin-left: -90px to bring it to the same row as the navigator and a padding-left: 90px; to make sure that #c (the new content DIV) is now visible. The #c_container also has the #c_container DIV. Without it you would need another container DIV so the width would not be affected by the padding, but that is easy enough to add, so I'll leave it up to you.
If you would use another container DIV for the content, then that solution would be IE6+ compatible, while the one I gave you is IE8+ compatible.
We have a sticky side panel on our page implemented with the following very-simple CSS:
position: fixed;
top:62px;
bottom:10px;
Where the top and bottom properties create the desired margins.
The problem is that this panel contains several accordion-style elements, and expanding some of them causes the content to overflow past the bottom of the screen and become invisible/inaccessible. Adding an overflow:auto; rule to the above css style almost solves the problem, by inserting a scrollbar that allows the user to scroll vertically to see the would-be hidden content. However, this results in two scrollbars - one for the main nav and one for the sidebar - which feels clunky an unintuitive. Instead, I'd like to have the "fixed" element scroll with the main scrollbar when it overflows. I'm aware that this would essentially make it not a fixed element, and thus am afraid I'll have to resort to JS to make this happen - but does anyone have a cleaner, html/css-only way of handling this?
I'm not sure this is what you need, but hope it helps some way.
#container1 {
height: 400px;
width: 200px;
overflow: hidden;
position: fixed;
top: 62px;
bottom: 10px;
background: #888;
}
#container2 {
width: 100%;
height: 99%;
overflow: auto;
padding-right: 20px; /*Adjust this for cross-browser compatibility */
}
#container2 ul li {
height: 300px;
}
html, body {
height: 99%;
overflow:hidden;
}
<div id="container1">
<div id="container2">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>
<div>
JSFiddle
Also in chrome you can try out:
::-webkit-scrollbar {
display: none;
}
But this snippet works only in chrome, so I would rather use the above.
Let me try to help. Use Panel-body class selector to handle this.
First you should do many things, such as, width of the div and the second div.
You can manage to hide the scrollbar as follows:
.panel-body {
height:300px;
overflow:auto;
margin-right:0px; // when it shows scrollbar, you need to set it MINUS.
}
Second, you also take notice when browser window gets resized by user and you need to manage Media Queries in related to the div width.
This is the DEMO.
Given the following structure, I need level2 have a min-height without changing the structure. Further, I am not able to move the overflow: hidden to a different class (the example is simplified, it would affect a lot of other things). It works with px, but not with %. All other css properties can be changed.
I am aware of vh, which works exactly like it should. But I would love a solution with CSS2.
Fiddle
HTML:
<div id="level1">
<div id="level2">
<div id="heighter"></div>
</div>
</div>
body and html: height 100%
level 1: min-height 100%, overflow hidden
level 2: min-height 100%
heighter: height 200px
Edit: More informations about the overflow:hidden
I am using this for a offcanvas navigation. This is a place where I can't use max-width (right?). If I replace the overflow with the max-width, the layout gets recalculated and after that I am able to scroll the level2 on the x-axis (left and right). Same problem as here (click on Push-Menu-Left and then you are able to scroll the x-axis). What I am trying right now is preventing the x-axis scrolling and being able to use the min-height: 100% corretly.
In order to calculate min-height, div#level2 needs to refer to the height definition of its parent. In your code, div#level1 does not have a specified height. You an specify one like so:
#level1 {
height:100%;
overflow: hidden; /* This has to be here */
background-color: red;
}
WORKING EXAMPLE
EDIT:
Explicitly setting height on div#level1 (rather than setting min-height), you no longer need the overflow:hidden definition. Removing that allows the page to scroll when div#heighter expands beyond the browser's height.
(You mentioned that you need the overflow:hidden for other reasons. If possible, please edit your question to describe those reasons a bit more.)
#level1 {
height:100%;
background-color: red;
}
#level2 {
min-height: 100%;
background-color: lightseagreen;
}
#heighter {
height: 2000px;
width: 100px;
background-color: white;
border: 5px dashed black;
}
WORKING EXAMPLE
http://jsfiddle.net/b8uj75e5/3/
#level2 {
min-height: 1000px; /* Working */
min-height: 100%; /* Not working */
background-color: lightseagreen;
display: block;
position: absolute;
width: 100%;
}
IT LIVES.
I just messed around until it worked.
Please look at the following: http://jsfiddle.net/ran5000/uZ7dD/
the header div has a fixed height of 40px, I want that the content div will use the remaining height of the screen without scroll and regardless of the screen height.
any ideas?
I generally use position:absolute for this, and then set the top value to start at the bottom of the header.
http://jsfiddle.net/uZ7dD/4/
.content {
background-color: yellow;
position:absolute;
top:40px; bottom:0; left:0; right:0;
}
Do you mean like that?
If so, I've used
position: fixed;
property in CSS.
I'm not sure what the browser support is like for the calc CSS feature, but this would be a good case for it. You can read about it here. You would need to change the height of the content div to height: calc(100% - 40px). This, of course doesn't take into account any space taken up by margin, padding, or border so it will still overflow a bit. If you make sure your divs don't have any of those it works perfectly. Here is my JSFiddle for it.
You can also use position: absolute and set the top value to 40px and the bottom to 0px but your parent element needs to have position: relative set.
Alternatively, you can use JavaScript/jQuery to calculate the required height of the content div and apply it.
For css3 browsers just use:
.content {
width: 100%;
background-color: yellow;
height: -moz-calc(100% - 40px);
height: -webkit-calc(100% - 40px);
height: -o-calc(100% - 40px);
height: calc(100% - 40px);
}
for non-css3 browsers use this workaround,
HTML:
<div class="container">
<div class="header">i am the header</div>i am the <content></content>
</div>
CSS
.header {
width: 100%;
height 40px;
line-height: 40px;
background-color: blue;
}
.container{
height: 100%;
background-color: yellow;
}
Hope I could help :)
In this case, the properties of table elements have some advantage in the fact that they have a lot of positioning power. In this case specifically, table rows and cells will always adjust to fill the table container.
Obviously, you don't want to be using actual table html elements, as that would not be semantic, which is where css comes into the game:
If you put a container/wrapper element around both your header and content, and then set it to be display: table; with 100% height and width it will act as the base table element.
Setting your header and content to display: table-row; will now associate them with that container and allow everything to share the table properties. Setting a fixed height on one will still work, and the other will simply fill the remaining space.
<div class="container">
<div class="header">i am the header</div>
<div class="content">i am the <content></content></div>
</div>
And the css:
.container { display: table; width: 100%; height: 100%; }
.header, .content { display: table-row; }
This approach also has the benefit of being well supported across browsers.
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.