I need the content div to 'fill' the remainder of the screen left over after the header. I would would like to keep the wrapper padding & margin. Using absolute position doesn't work as the content div stops being visually nested in the wrapper. (The header div can be a fixed height if absolutely necessary, however I would prefer it to be dynamic.) Many thanks.
* {
margin:0px;
padding:0px;
}
html,
body {
height: 100%;
}
#wrapper {
background-color:#eee;
margin:20px; padding:20px;
border: solid 1px #333;
}
#header {
}
#content {
background-color:red;
}
.
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="content">content</div>
</div>
</body>
Fiddle here:
http://jsfiddle.net/jHLhK/
Specify width and height set to 100% to your content div.
#content {
background-color:red;
width:100%;
height:100%;
}
The 100% means it will be as much as it has space available from surrounding elements.
Or you may only want height or only width to be 100% depending on your requirement.
Related
I have a div with variable height (only an image with max-width:100% and auto height to scale it on resize).
So I would like to have a div with text overlaping this image div... Ok. But then I would like to have other div under this wrap with image..
Here's the problem.. I don't know the height of the div ('cause it deppends on the image height on resize) and then, when I try to continue the other divs that should be under this wrap, the get stucker under it 'cause its position is absolute!
<div id="wrap">
<div id="background">
<img src="http://i.imgur.com/hXtf2Dq.jpg" class="myImage" />
</div><!-- #wf_sliderItemBackground -->
<div id="mySubtitle">
dfdf
</div><!-- #background -->
</div><!-- #wrap -->
<div>
I CANT MAKE THIS DIV APPEAR UNDER THE IMAGE... I CANT USE DIMENSIONS SINCE I'M TRYING TO CREATE A RESPONSIVE LAYOUT AND USING HEIGHT IN PIXELS WOULD RUIN IT...
</div>
And here is the CSS:
* { margin:0; padding:0; }
#wrap {
width:100%;
display:table;
text-align:center;
}
#background {
width:100%;
max-width:100%;
position:absolute;
}
.myImage {
width: 100%;
max-width: 100%;
}
#mySubtitle {
margin:0 auto;
width:100%;
max-width:1200px;
background:green;
position:relative;
}
Check the fidddle:
http://jsfiddle.net/cjd6n0mm/
Since your text div is outside the wrap div, wrap should be relative with a height defined
#wrap {
width:100%;
position:relative;
display:table;
text-align:center;
height:50%
}
and cover your text div in specific div
div.a {
color:blue;
position:relative;
bottom:0;
}
Also, instead of hard reset *, use html,body reset, thats a rule of thumb
html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
Fiddle demo
I have a header that should stay at least as wide as the below div is or wider. Everything looks fine as the windows is larger than the content but when the window gets smaller so does the top div.
#top{
border:1px solid black;
height:200px;
width:100%;
}
#content{
margin:auto;
width:1000px;
height:600px;
border:1px solid red;
}
<body>
<div id="top"></div>
<div id="content"></div>
</body>
Any suggestions?
http://jsfiddle.net/Z242Y/
I believe your problem is with the fixed width you have on the content where as the top div has a percentage width, so to fix just change the content div to a percentage width that is a little smaller like I did, I set it to 80%
#content{
margin:auto;
width:80%;
height:600px;
border:1px solid red;
}
Here is your updated FIDDLE
Hope that helps.
When you give an element a width of 100% in CSS, you’re basically making this element’s content area exactly equal to the explicit width of its parent — but only if its parent has an explicit width.
Try setting the width of the #top using javascript.
var x = $('#content').width();
$('#top').width(x);
JS Fiddle
Firstly, you can wrap your html in a container as such:
<div id = "divContainer">
<div id="top"></div>
<div id="content"></div>
</div>
Then, you can give it a fixed width, so that it will decide the width of its contained elements. In this way, both the top and content div will always have the same width.
For that, you will need your CSS to be as such:
#divContainer {
width: 1000px;
}
#top {
border:1px solid black;
height:200px;
width:auto;
}
#content {
margin:auto;
height:600px;
border:1px solid red;
}
You can see it here: http://jsfiddle.net/G4L4V/
Note: In this approach, the two divs will always have the same width.
In case you want to enforce the 1000px width and still have the content width to be smaller than the top div, then you could make a slight adjustment in the #content class as such:
#content {
margin:auto;
width:90%;
height:600px;
border:1px solid red;
}
I have this HTML and css, I need to make them float next to each other and the right div should auto resized when the left div's with changes and the height of all should open fully on screen, how can I do that please help:
CSS:
.ne-divadmincontent
{
top: 15px;
width: 100%;
height:100%;
}
.ne-leftcontent
{
float:left;
}
.ne-rightcontent
{
float:left;
border-left:dotted 1px #CCC;
}
HTML:
<div class="divadmincontent">
<div class="ne-leftcontent">
l-content
</div>
<div class="ne-rightcontent">
r-content
</div>
</div>
If you don't specify the width of your two inner div tags (ne-leftcontent, ne-rightcontent) they will automatically receive the width of their parent div (divadmincontent)
Therefore a solution for your problem would be to assign some value to your inner div tags
.ne-leftcontent{
width:40% // 560px
float:left;
}
.ne-rightcontent{
width:60% // 400px
float:left;
}
Im not too great at CSS but hopefully someone on here can help. I have the following mockup. (i have stripped out my content to make it easy to view)
<body>
<div id="container">
<div id="header"></div>
<div id="body">
<div id="navBar"></div>
<div id="mainContent"></div>
</div>
<div id="footer"></div>
</div>
</body>
my CSS is as follows:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
now im unsure as to how to get the "navBar" to be the page height. I've tried adding height: 100% but that doesnt work.
Thanks,
Matt
Giving an element height: 100% will give it a height equal to that of its containing element, which in your case is #body. Since body in your example is only as big as it needs to be to hold its content, #navBar will be 100% of that height.
To fix this, you can make #container and #body height:100% to make them as tall as tho body tag, which takes up the whole page:
#container {
height:100%
}
#body{
height:100%;
}
In the interest of completeness, you could also set the top and bottom of #navBar:
position: absolute;
top: 20px;
bottom: 60px; /* height of footer */
To understand the difference, play around with This JS Fiddle. Mess around with the height and top, bottom, position properties to see how your changes affect the layout; just don't use both positioning methods at once!
Your issue appears to be that each parent DIV all the way up to the BODY tag must explicitely have a height of 100% for #navBar to have 100% height. This means you would also have to set the height of #body to 100% as well, since it is the parent container of #navBar.
Have a look at this site - I assume you want a two column layout - this site will show you how to do what you want. Hope it helps.
This is probably a very dummy question, don't throw your shoes at me :)
Consider having HTML like this:
<div class="container">
<div class="header">
</div>
<div class="body">
</div>
<div class="footer">
</div>
</div>
I want 'header' and 'footer' to be anchored to the parent's top and bottom respectively, and 'body' to grow easily to fit all available space.
What would the CSS look like to achieve this?
EDIT: Maybe I'm saying this wrong (i'm not exactly a web developer :) ), but what I need is to have some part of a div always attached to its bottom. So when div grows this part (which might have a fixed size) would go lower with the div's lower end. But all this doesn't mean attaching a div to the bottom of browser's window.
If I understand your question correctly, you require some really basic css.
body { background: black; }
.container { width: 960px; }
.header { height: 100px; background: #ddd; }
.content { padding: 10px; }
.footer { height: 100px; background: #ddd; }
Your div's are not floated, so will stack on top of each other like pancakes.
If you want the footer to be "sticky", see here for a solution...
http://ryanfait.com/sticky-footer/
Here you go:
Example page - footer sticks to bottom
this will have the content right
between the footer and the header.
no overlapping.
HTML
<header>HEADER</header>
<article>
<p>some content here (might be very long)</p>
</article>
<footer>FOOTER</footer>
CSS
html{ height:100%; }
body{ min-height:100%; padding:0; margin:0; position:relative; }
body:after{
content:'';
display:block;
height:100px; // compensate Footer's height
}
header{ height:50px; }
footer{
position:absolute;
bottom:0;
width:100%;
height:100px; // height of your Footer (unfortunately it must be defined)
}
Try this: Set position: relative on the parent div. Set position: absolute on the inner div(s) and set both the top and the bottom properties; don't set height. The inner div(s) should stretch vertically with the parent, as required. (Doesn't work in IE6 and below unfortunately).