I have a website where i am using height auto to set the height of a content div and min height 100% to make sure the content div always stretches the height of the page.
my HTML looks like this
<html>
<body>
<div id="holder">
<div id="outercontent">
<div id="innercontent">
content goes here
</div>
</div>
</div>
</body>
</html>
and my css rules are as follows
html,body {
height:100%;
color:white;
}
#holder {
background-color:transparent;
width:100%;
min-height:100%;
height:auto;
position:absolute;
z-index:1;
}
#outercontent {
min-height:100%;
height:auto;
width:940px;
margin-left:auto;
margin-right:auto;
background-color:transparent;
background-image:url(../images/bowsides.png);
background-repeat:no-repeat;
overflow:hidden;
}
#innercontent {
width:900px;
height:auto;
min-height:100%;
margin-left:auto;
margin-right:auto;
background-color:#ffefce;
overflow:hidden;
}
The holder div is an absolutely positioned DIV, i need this because i have a rotating background which puts each background image on a separate absolutely positioned div. so this div is placed on top of all of them using z-index.
outer content is a little wider than my inner content and this is used to give me space put border images (since css3 border images are not widely supported yet)
inner content is my main content area
min-height 100% works on the holder div (that is the outermost div of the group), but it does not work on outercontent or innercontent in any browser
why is this?
Can you try opening the source in IE by using deleveloper tools , I guess something is overriding the height , you will get the exact picture then
Related
I want to fit a png image to the height of a div that is inheriting its height from another div. I have seen how this can be done by setting the image's max-height to 100% (in questions such as this: How do I auto-resize an image to fit a div container), but this only works for me when the image is directly in the div thats height is specified in pixels.
I have a topbar, whose height I set explicitly, and a logodiv inside that, which inherits the height from the topbar. However, the logo does not resize to fit the height of logodiv unless I explicitly set the height (the commented code).
It seems like bad coding to have to set the height twice, when it should be inherited. Is there any way to fit the image to the correct height without doing this?
css:
#topbar{
width:100%;
height:45px;
}
#logodiv{
float:left;
/* height:45px; */
}
#logodiv img{
max-height:100%;
}
html:
<div id="topbar">
<div id="logodiv">
<img src="images/project/logo.png" />
</div>
</div>
I want to fit a png image to the height of a div that is inheriting
its height from another div.
Technically, logodiv is not inheriting its height from topbar. Its simply expanding itself according to its content(the image in this case).
Try adding the property height:inherit; to second div and you are good to go.
HTML
<div id="topbar">
<div id="logodiv">
<img src="images/project/logo.png" />
</div>
</div>
CSS
#topbar{
width:100%;
height:45px;
}
#logodiv{
float:left;
height:inherit;
/* height:45px; */
}
#logodiv img{
max-height:100%;
}
Fiddle
Try this css:
#topbar {
width:100%;
height:45px;
border:1px solid red;/* for highlighting*/
}
#logodiv {
float:left;
height:inherit;
}
/*To clear float */
#topbar:after {
clear:both;
display:block;
content:""
}
#logodiv img {
max-height:100%;
}
Demo : http://jsfiddle.net/lotusgodkk/4d4L1g0a/
I'm actually designing my website, it's going to be a one HTML page using javascript to switch between divisions.
I'm using a wrap division where my banner/header, text container and my footer are relative positioned.
I want my footer to be at least to the bottom of the window when there is not enough content, so I'm trying to put a min-height to my text container.
Like this the website would occupy at least all the windows in it's height.
My HTML code (a part ^^)
<div id="wrap">
<div id="banner"></div>
<div>
<div id="whoami" class="corpus"></div>
<div id="etc" class="corpus">There is different divisions like these, I'm switching through thoose using jQuery, but that's not important there. I'm trying to put a min-height to get the footer at the bottom of the windows if there not enough content. I can't pass the footer in absolute position</div>
</div>
<div id="footer"></div>
</div>
The CSS that goes with this
html, body {
margin:0;
padding:0;
background:#fff;
height:100%;
}
#wrap {
background-color:#ff0;
min-height:100%;
width:1000px;
left:50%;
margin-left:-500px;
position:absolute;
}
#banner {
background-color:blue;
height:150px;
width:1000px;
position:relative;
}
.corpus {
width:800px;
min-height:100%; //I tried this : min-height : calc(100% - 260px); it didn't work.
margin-left:100px;
background-color:grey;
position:relative;
height:auto;
margin-top:5px;
}
#footer {
height:100px;
width:1000px;
background-color:purple;
position:relative;
z-index:1;
bottom:0;
margin-top:5px;
}
A little Fiddle for the road :http://jsfiddle.net/yoshino78/bn455/1/
Since #wrap is a positioned element and you've already applied bottom:0 for the footer, all you've to do is
Simply apply position:absolute to the footer, so that it'll stay at the bottom of #wrap regardless of the content inside it.
Demo
Side note: you also might want to apply padding-bottom to #wrap equal to the height of footer so that content won't get hidden behind the footer
So on my screen this works fine on all browsers, but when i try to view my site on laptop or a smaller screen #sidebar and #center move to the left. I assume it has something to do with #sidebar's margin-left but is there any other way to make sidebar and center go under the header and next to each other?
#header {
background-image:url(media/dddd.png);
margin-left:auto;
margin-right:auto;
width:1000px;
height:250px;
position:relative;
}
#sidebar {
height:800px;
width:300px;
background-color:#CCFFFF;
float:left;
margin-left:23.5%;
margin-right:auto;
position:static;
}
#center {
margin-left:auto;
margin-right:auto;
height:800px;
width:700px;
background-color:white;
float:left;
border:1px solid black
}
Since #sidebar has left-margin: 23.5%;, it moves to the left when you reduce the window because it will always be 23.5% of the window width. So if your window is 1000px wide, the #sidebar div's margin-left will be 235px, and this number decreases with the width of the window (making it look like the div is moving to the left).
The #center div moves down because the width of the window is less than the margin-left value + the width of #sidebar + the width of #center. When the window is too narrow, the divs rearrange to fit (like how text in a text box goes to a new line when it runs out of space).
If you want to keep your layout how it is when the window gets smaller, there are two easy things you can do:
Make all of your divs width a percentage: If your #sidebar has margin-left:25%; width:20%; and your #center div has width:50%, both of the divs (and the margin) will resize as the screen shrinks (this is one way Responsive Web Design works). Here is an example on jsFiddle.
Put everything in a container div: Since it sounds you want to have your header, sidebar, and content in one block, you could wrap all of these elements in a container div. You'll have to change your CSS a bit, but a basic implementation would look something like this:
CSS
#container {
width: 1000px;
margin-left:auto;
margin-right:auto;
}
#header {
background-color:red;
width:auto;
height:250px;
}
#sidebar {
height:800px;
width:300px;
background-color:#CCFFFF;
float:left;
}
#center {
height:800px;
width:auto;
background-color:green;
border:1px solid black
float:left;
}
HTML
<div id=#container">
<div id="#header">header content</div>
<div id="#sidebar">sidebar content</div>
<div id="#center">center content</div>
</div>
Here is a jsFiddle with this code.
Since the container div has a set width, you don't have to worry about the widths of the child elements.
so i think you want to get #sidebar and #center beside each other,centered and under #header or?
Would be nice if we can see your html markup but
just give every div position:relative and a float left.
then you give the #sidebar left:50%.
Then add the width of both divs /2 (#sidebar and #center). --> (sidebar.width + center.width) /2
Then you give the result #sidebar with a margin-left and a minus before. --> margin-left: -500px
I think the issue lies with your HTML.
Ensure that your sidebar <aside> and your content <article> are nested within the same <div> or <section>.
The terms I'm using are with HTML5 syntax. If you aren't using HTML5, replace all elements with <div>.
Example:
<header></header>
<div>
<section></section>
<aside></aside>
</div>
If both the <section> & <aside> have a width:% or px; & float:left; you should be fine.
I am using php to dynamically create webpages. As such I have things more objectified. My generic page creates a header, a mainbody and a footer. The content is the placed inside of my mainbody.
Mainbody has a min-height of 600px.
A div inside of mainbody for one page acts as a menu on the left side of mainbody. I want this div to be 100% of the height of the mainbody.
The div (menu) is floating left, and the rest of the mainbody content is generated dynamically by the php.
What doesn't Work:
height:100%; (It just ends up being the height of the content I have inside the menu, not the height of the mainbody)
min-height:600px; (It just stays 600px, even when mainbody gets larger)
Haven't played with it enough, but position absolute, absurdly large height, and a negative z index, and mainbody overflow...not successful with the little bit I tried.
Any ideas? I'm totally open to doing any kind of weird manipulation, so long as it looks natural.
Here's example code: jsfiddle.net/TButx
http://jsfiddle.net/TButx/56/
The solution is to pad the bottom of the column and hide overflow.
#html{width:400px; height:100%; margin-left:auto; margin-right:auto; background-color:yellow;}
#mainbody {min-height:300px; height:100%; overflow: hidden;}
#menu {width:100px; height:inherit; background-color:blue; float:left; padding-bottom: 700px;margin-bottom: -700px;}
#content {height:100%; width:300px; background-color:red; float:right; padding-bottom: 500px;margin-bottom: -500px;}
#clear {clear: both;}
<div id="html">
<div id="mainbody">
<div id="menu"></div>
<div id="content"></div>
<div id="clear"></div>
</div>
</div>
There must be an error in your code. As you describe it, everything should work.
Like here: http://jsfiddle.net/VxSA3/
HTML:
<div id="Mainbody">
<div id="menu">menu content</div>
<p>some text in the main-body</p>
</div>
CSS:
#Mainbody{height:600px;outline:1px solid green;}
#menu{height:100%;outline:2px solid red;float:left;width:100px;}
A common problem with this is that your main body div isn't wrapping around your floating elements. You have to have a div in it with clear:both and the body div will stretch.
As an alternative method, you can use absolute position to control the stretch of the menu div.
For the main body div:
position:relative;
For the left floated div (no longer left floated in this case):
position:absolute;
left:0px;
bottom:0px;
top:0px;
width:...
I have a div that is as high as the window and about 4 times as wide (it is stretched horizontally by elements inside it).
And then this other <div> inside it, which is supposed to be as wide width:100% as its parent (it's for a background picture).
However, the child <div> is only as wide as the window and doesn't quite fill up its parent. This happens in all browsers I've tried.
Why is that, and how can I fix it ?
Source :
<style>
.parent
{
width:100%;
height:100%;
overflow-x:scroll;
overflow-y:hidden;
position:absolute;
top:0;
left:0;
background-color:#999;
}
.child
{
width:100%;
height:200px;
position:absolute;
bottom:0;
left:0;
background-color:#000;
color:#fff;
}
.stretcher
{
width:10000px;
height:32px;
position:absolute;
}
</style>
<div class="parent">
<div class="child">this should stretch as much as its parent !</div>
<div class="stretcher">this is some content that defines the page's width</div>
</div>
JSFiddle
The .stretcher div will not expand the parent as position: absolute takes the element out of the page flow so its width has no effect on the parent. Child is behaving properly and expanding to the width of the parent. You can see this clearly if you use Firebug or similar.
As for how to fix it, not sure exactly what you're trying to accomplish with the stretcher div and why you don't just give the parent the width. Perhaps you could expand a bit on what you're trying to do with this structure.
Maybe the outside <div> should be positioned relative. The inside <div> can be absolute but you may want to try adding right:0px; as well as left:0px which you already have. I would avoid absolute positioning unless there is no other way to do it.
I'm not sure why the child <div> doesn't fill the parent, but in order for it to work you need to wrap the .stretcher <div> around both the parent and child <div>.
Source:
<style>
.parent {
width:100%;
height:100%;
overflow-x:scroll;
overflow-y:hidden;
position:absolute;
top:0;
left:0;
background-color:#999;
}
.child {
width:100%;
height:200px;
position:absolute;
bottom:0;
background-color:#000;
color:#fff;
}
.stretcher {
width:10000px;
height:100%;
position:absolute;
}
<div class="stretcher">
<div class="parent"><p>this is some content that defines the page's width</p>
<div class="child">this should stretch as much as its parent !</div>
</div>
</div>