I seem to be having some trouble with 100% widths. I have 3 divs, header, content and footer which are relatively positioned. I have set a width of 600px on the header and a width of 100% on the content and footer. However if I resize the browser when I use the horizontal scrollbar the 100% width divs are cut off and don't go all the way across to match the 600px div...how can I fix this?
CSS
#header {
position: relative;
width: 620px;
}
#content, #footer {
position: relative;
width: 100%;
}
HTML
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
<div id = "container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
#container {min-width:620px;}
See example: http://jsfiddle.net/calder12/xN2PV/3/
Point to note. min-width is not supported in IE6. I doubt this matters, if it does you'll need a different solution.
Set width to "auto" for #content and #footer. Divs, being block elements, will automatically consume 100% of the available width (sans margin if set) in their immediate parent element.
As such, if #content and #footer are contained within #header or any other explicitly sized element, then they will never be wider than the specified width.
Related
I have read answers on Stackoverflow, on how to stretch a div to full width when inside a fixed width container. But those are valid only if the content is inside one fixed container, what if the content is inside many div tags whose widths have been differently specified.
<div class='container' width="50%">
<div>
<div>
<div>
<div>
<div class="container-to-stretch"> Some Content </div>
</div>
</div>
</div>
</div>
</div>
Setting position to absolute and left and right to 0 simply doesn't work.
here is a jsfiddle that will help you http://jsfiddle.net/Fm7M5/
in your example (if i understand the question correctly), once CONTAINER has a width of 50%, that width is 100% for all of it's nested elements. so, the unclassed divs & CONTAINER-TO-STRETCH all have an automatic width that is 100% of CONTAINER.
so, you will need give CONTAINER-TO-STRETCH a width that larger than the width of its container.
in the jsfiddle, you can see the following (where TEST is a class given to one of the unclassed divs)
.container {
background-color: red;
}
.container-to-stretch {
background-color: yellow;
width: 400%;
}
.test {
width: 25%;
background-color: blue;
}
so, CONTAINER has a width that is 50% of the body, TEST has a width that is 25% of 50% of the body, and CONTAINER-TO-STRETCH has a width that is 400% of 25% of 50% of the body.
I'm trying to set the size of 2 divs to fill the page with a 70 - 30 % ratio.
Without setting the size of the "html ,body" how can i get the divs to display to the correct height.
Currently it displays two single lines the height of the text. Thanks
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<div style="overflow: hidden; clear: both;">
<div style="background-color: blue; height: 70%;">Top</div>
<div style="background-color: red; height: 30%;">bottom</div>
</div>
</body>
</html>
You need to make the body and html elements have height:100%, and you need to give the outer div height: 100%.
CSS:
body, html { height: 100%}
<div style="overflow: hidden; clear: both; height: 100%">
<div style="background-color: blue; height: 70%;">Top</div>
...
You cannot do this with CSS, for a good reason. If you don't set a height to the body, it's height will become as high as it needs to be to accommodate all of its children. Now, if you use percentage-based units for your children's height, the children's height will be calculated based on the height of its parent.
So, the parent's height would depend on the height of its children, and its children's height would depend on the height of the parent - infinte loop!
P.S. Fred's method works, in case your concern about setting the height revolved around setting a static height. Setting the height to 100% might solve your dilemma.
You can add a position: absolute to the parent div and subsequently stretch it to achieve full width and height. Note that the width: 100% declarations are important to enforce block-level formatting context.
<div style="position:absolute; overflow: hidden; top:0; left:0; right: 0; bottom: 0;">
<div style="background-color: blue; height: 70%; width: 100%;">Top</div>
<div style="background-color: red; height: 30%; width: 100%;">bottom</div>
</div>
Here's the fiddle
Just note that this will remove this div from 'normal flow', and that sibling elements will be obscured/obscuring. The CSS 2.1 spec provides this advice:
...the contents of an absolutely positioned element do not flow around any other boxes. They may obscure the contents of another box (or be obscured themselves), depending on the stack levels of the overlapping boxes.
Unfortunately, you need to assign a fixed height to the DIVs parent in order for the 70% - 30% ratio to work.
One thing you can do is use JavaScript to get the height of the window, and then assign this value to the parent DIV. In this way, the percents will work, since it have a reference of how it should re-size.
If I set 100% width on an element in css this element will adjust when I resize my browser window.
If I instead set the height as 100% the element will not update when resizing my window, instead the content will cut-off if window is expanded beyond the initial 100% height.
Why is this?
EDIT: Scrolling is the issue. It will not resize on scroll. Leaving the site looking cut-off.
Height: 100% means "be as tall as my parent element". So, if your parent element only has a height of 300px, your child element can only be a maximum of 300px tall as well. This is also true for width, but block level elements take up all of the horizontal space available to them by default.
Note that this does not apply to inline elements, they ignore height/width all together.
Edit Look at your elements:
<html>
<body>
<div class="wrapper">
</div><!-- end wrapper -->
</body>
</html>
How tall is your body element? Is it 100%? How tall is your html element? Is it 100%?
Basically the div's height is being restricted by the fixed height of the body and html parent.
Try:
The HTML
<div id="full">
Content
</div>
The CSS
html, body {height: 100%;}
#full {position: relative; display: table; width: 100%; height: 100%; background: #CCC;}
Or if you prefer: the Full Markup
<!DOCTYPE html>
<html>
<head>
<style>
html, body {height: 100%;}
#full {position: relative; display: table; width: 100%; height: 100%; background: #CCC;}
</style>
</head>
<body>
<div id="full">
Content
</div>
</body>
</html>
The key is to set height:100% and the display property to display:table;
It work fine try this DEMO
there may be issue with your code
I have a problem with setting the height of the div:
I have 3 divs and svg element one in each other in such way:
<body>
<div id="1">
<div id="2">
<div id="3">
<svg></svg>
</div>
</div>
</div>
</body>
(There are also other elements in div 1 and 2)
Assume that svg is very big (i.e. 2048x2048), I need that size of div3 (and this also would mean div2 and div1) to have size 100% of browser window (minus other elements and margins in uppers divs) - when a browser resize div also should. As the scg is bigger than div3 there should be a scrollbars in div3 (scrollbars should be in div3 not in whole browser window to scroll only content of div3 (the svg element) not of the whole browser content!).
I've already manage to make it works this way in width, but not in height,
when I set height of all elements except svg (also for body) to 100% as I found somewhere (also tried with min-height), then all divs are of height of svg and scrollbars apears on browser window, scrolling the whole page.
Try adding:
overflow:scroll;
To your CSS for div3.
JSFiddle
For any one interested in similiar case I managed to done this. I've resigined of using div3 (after all it wasnt needed) so the layout of page is smiliar to this:
<div id="1">
something
<div id="2">
<svg width='2048' height='2048' ></svg>
</div>
<div id="footer">something</div>
</div>
and css is:
body, html, {
padding : 0px;
margin : 0px;
width : 100%;
height : 100%;
}
#nr2{
overflow: scroll;
position: absolute;
top: 10px; /* must be the height of everything above div */
left: 0px;
right: 0px;
bottom: 10px; /* must be the height of footer */
}
#footer{
height: 10px;
position: fixed;
bottom: 0px;
}
I'm working on a centered layout with 960px of width. Within the wrapper I want a Slideshow, that is 100% of width (the browsers width).
How can I achieve this?
<div id="wrapper"> //960px
<div class="text"></div>
<div class="text"></div>
<div class="slider"> //100%
Slider-content
</div>
<div class="text"></div>
</div>
Thank you in advance... :-)
div.slider will already be 100% width, since block-level elements like div already expand horizontally to fill all their parent's space unless otherwise specified. This is going to be true for div.text as well.
If you are asking how to create the 960px centered wrapper, the techniques are pretty standard. Either:
div#wrapper
{
margin: 0 auto; /* horizontal margin set to "auto" pushes <div /> to center
width: 960px;
}
or
div#wrapper
{
left: 50%; /* put left edge at 50% */
margin-left: -480px; /* move left edge back by 480px = half width.
this makes the center of #wrapper match center of page */
position: absolute; /* position: absolute makes the left: 50% line work */
width: 960px;
}
You may want to look at ways of including the slideshow div outside of the wrapper div if the wrapper is to be 960px and the slideshow is 100% of browser width.
Typically, absolute positioning of the slideshow div inside the wrapper div won't affect the dimensions of its container (wrapper) div but you lose some control in centering the contained (slideshow) div.
I would suggest changing #wrapper to .wrapper so that you can reuse your wrapper class later down the page. Then, I recommend the following markup:
<div class="wrapper"> //960px
<div class="text"></div>
<div class="text"></div>
</div><!-- end .wrapper -->
<div class="slider"> //100% of browser viewport
Slider-content
</div><!-- end .slider -->
<div class="wrapper"> //960px
<div class="text"></div>
</div><!-- end .wrapper -->
The solution was very simple.
How to make a DIV, that is within a fixed width DIV, to be the width of the browser.
HTML:
<div id="wrapper"> //960px
<div class="slider"></div> //100% of browser width
</div>
CSS:
.slider {
position: absolute;
width: 100%;
left: 0px;
}