I've got a simple CSS:
div.header
{
width:auto;
}
div.footer
{
clear:both;
}
div.middle
{
margin:5px 0 5px 0;
}
div.links
{
width:200px;
float:left;
}
div.content
{
width: 900px;
margin-left:210px;
}
and a simple page:
<div class="header">
<!-- some control inside -->
</div>
<div class="middle">
<!-- left navigation list -->
<div class="links">
<!-- some control inside -->
</div>
<!-- content place -->
<div class="content">
<asp:ContentPlaceHolder id="myContentPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="footer">
<!-- some control inside -->
</div>
The control placed inside "links" div is sometimes resized by javascript. The control is resized, but the parent div ("links" div) isn't - it preserves its original height. As a result the footer doesn't move down and the control overlaps it. How can I fix this so that resizing this control will cause resizing the parent div and as a result moving the footer down?
When putting content into a div with a float property, I always place a div with clear:both at the end of its contents to ensure proper resizing. You already have a class footer which does this, if that's all it's for then use it here., e.g.:
<div class="links">
<!-- some control inside -->
<div class="footer"></div>
</div>
If you plan on having more style on footer you might want to create a new class just for this purpose.
I think there are two ways you can solve this:
overflow on .middle:
.middle {
overflow: hidden;
}
put your footer (or another div with clear:both) inside middle, after the other two divs
http://websticky.blogspot.com/2009/10/float-left-doesnt-expand-parent-div.html
heres an article about floating divs not expanding their parent divs
You could get the height of the footer div and then subtract the re-size of the links div and set the difference as the new height of that footer div. In jquery, that might be something like:
$("#links").click(function() {
var footer-height = $("#footer").css("height");
var links-height = $("#links").css("height");
var links_resize = ...code to determine how much to resize links div ....
$("#footer").css("height, " footer-height - links_resize);
$("#links").css("height, " links-height + links_resize);
});
Try adding 'float:left' to the parent div and see if that fixes it. Floated parents will contain floated children but parents are NEVER to expand just to contain floated elements.
Maybe IE8 was supposed to fix this issue, but it isn't fixed.
Take the code from that article for example
<style>
.container
{
width:300px;
background-color:green;
}
.box
{
float:left;
width:100px;
height:100px;
border:3px solid red;
}
</style>
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
Try it in IE8. You get the same result with IE 5 - 7. According to the article, you also get it in opera. The only mystery here is why IE continuously disregards the css docs. Instead of floating the container left to fix it, either create an empty div after the floats and do clear:both; or as the article states, do overflow:hidden; (or auto)
Related
I have a page something like this
<div id="top">
</div>
<div id="bottom">
</div>
I want an output which displays bottom first then top..
How can i achieve this using CSS ??
If your question means, the following.. "You would want to place div#bottom on top of the other drawn DOM elements below". DOM ordering.
If you want #top and #bottom to be independent DOM elements.
div#top {
width:200px;
height:100px;
background-color:red;
}
div#bottom {
position:absolute;
width:100px;
height:50px;
background-color:blue;
top:10%;
left:4%;
}
The top and left values are values of your choice, the above example places the bottom inside the top.
positioning - Can be used to manipulate the same. You could use fixed element inside a huge encompassing div. But use fixed only if you are sure that the DOM contents is to be shown even on a overflow. 'relative' positioning might as well work when you are working reference is the body or the Root Node class or element.
If you want to control how DOM displays these elements. Then you might have to use javascript with CSS to achieve this. Like say
document.getElementById('bottom').style.display = 'block';
document.getElementById('top').style.display = 'none';
After a timeout
setTimeout(function() {
document.getElementById('top').style.display = 'block';
}, 200);
Since independent div's are not the best way to do this, would rather suggest you to try Something like this
<div id="top_div">
<div id="bottom_div">
</div>
</div>
with the help of "positions" u can achieve this..
The HTML page is rendered from Top to Bottom. Reverse your div tags as in :
<div id="bottom">
</div>
<div id="top">
</div>
unless you have a specific reason not to do so.
Using Position in css it should work o.w try below
<div id="bottom">
</div>
<div style="clear:both;"></div>
<div id="top">
</div>
I have 3 < div > elements stacked on top of each other on screen.
<div id="header"></div>
<div id="content" style="height:900px;width:1400px; "></div>
<div id="footer"></div>
I need to keep stated exact size of central DIV and I need 'header' and 'footer' to fill the space (remaining from 'content' height) on top and on the bottom equally, so all three DIVs would occupy exact window height.
Also I'd like header and footer have set some minimum height (so if screen becomes too small, these DIVs would keep some height, keep showing their contents, and scroller appears).
I can possibly do int in JS but CSS must be possible. Thanks in advance!
You can do it quite easily in JS with jQuery using the following javascript code:
var spaceHeight = $(window).height()-$("#content").height();
$("#header, #footer").css('height', spaceHeight/2);
You should put that code somewhere where you will make sure to call it in case the layout changes or in $(document).ready() if the page layout will be static.
And in order to preserve the minimum heights of #footer and #header use the min-height properties in CSS.
Here's and example: http://jsfiddle.net/4h5f8/17/
Try this code and see if it is what you need:
<html>
<head>
<style>
#header {
min-height:50px;
height:10%;
background-color:grey;
}
#content {
height:80%;
background-color:#EEEEEE;
}
#footer {
min-height:50px;
height:10%;
background-color:grey;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
I have a #wrapper div that is 100% height. Inside of that I have several content divs, each are displayed as inline-block and have a bottom margin. The problem is that this bottom margin is somehow being collapsed.
The problem can be seen with very simple code:
<div id="wrapper">
<div id="content">
<!-- lots of content here that will fill the browser window -->
</div>
</div>
I've created an example which can be seen here: http://jsfiddle.net/Y6tJw/
I have a feeling this is a webkit issue as both Firefox and IE render the page with the proper margin. Any help?
Don't ask me why it works, but this will work http://jsfiddle.net/Y6tJw/2/
Style
#wrapper { height: 100%; background: blue; }
#innerwrap { padding-bottom:300px; background: blue;}
HTML
<div id="wrapper">
<div id="innerwrap">
<div id="content">
<!-- lots of content here that will fill the browser window -->
</div>
</div>
</div>
this is happening because you gave your body a height of 100% with the min-height. Try giving height:auto; this'll work
I am trying to place divs next to each other of which the divs act like a sticky-footer using position:absolute and bottom:0
HTML: (note that I could have many of these with different id but the same class)
<div id="s6234" class="sticky">
<div id="s_content">
Hello
</div>
</div>
<div id="s7243" class="sticky">
<div id="s_content">
Hello
</div>
</div>
CSS:
.sticky{position:absolute;bottom:0;left:0;width:200px;height:100px;background-color:#aaa}
jsFiddle: http://jsfiddle.net/ZqaDe/
Preview: http://jsfiddle.net/ZqaDe/show
EDIT:
I don't know how many divs there are every time. The divs there are appended dynamically. In the actual app, those div's can be deleted, moved or added so it they will keep changing every time. So basically I want a way so that the are placed every time next to each other.
EDIT 2:
I don't think I am able to wrap all div's inside a main sticky footer and set a float:left so that they are placed next to each other. In the real example, the position:absolute and bottoom:0 is set dynamically. Updated fiddle: http://jsfiddle.net/u2nda/
You could have an empty footer div in which you append the divs you are minimizing. You then just need to set the position to relative, float the div left and reset top and left to 0.
So your JQuery string would become:
$(this).parent().parent().appendTo("#footer")
.css('position','relative')
.css('float','left')
.css('height','45')
.css('top','0')
.css('left','0')
.find('#s_content').hide();
JSFiddle: http://jsfiddle.net/u2nda/2/
Edit
Or better still, change the position to static, that way you do not need to reset the top and left values:
$(this).parent().parent().appendTo("#footer")
.css('position','static')
.css('float','left')
.css('height','45')
.find('#s_content').hide();
JSFiddle: http://jsfiddle.net/u2nda/3/
Edit 2
Or even better, just append classes that do not overwrite your inline CSS:
.tabMe {
float: left;
height: 45px;
position: static;
}
.tabMe #s_head{
border: 0;
}
.tabMe #s_content{
display: none;
}
And your JQuery to show / hide could become:
$('#s_head button').on('click', function(){
var check = $(this).parent().parent();
if( !check.hasClass("tabMe"))
check.appendTo("#footer").addClass("tabMe")
else
check.appendTo("body").removeClass("tabMe")
});
JSFiddle: http://jsfiddle.net/u2nda/4/
You just need to move the second div to the right: #s7243 { left: 200px; }. If you had a third div, you'd need to move it over even more: #third-one { left: 400px; }.
I would place the divs in a main container that had my position absolute and then float your blocks.
Example http://jsfiddle.net/ZqaDe/3/
I think that best option would be to wrap your "sticky" divs. See my demo on jsfiddle
<div class="sticky">
<div id="s6234" class="left">
<div id="s_content">
Hello
</div>
</div>
<div id="s7243" class="left">
<div id="s_content">
Hello
</div>
</div>
</div>
CSS:
.sticky{position:absolute;bottom:0;left:0;width:200px;height:100px;background-color:#aaa}
.left{float: left;margin-left: 10px;background: yellow;}
I'm slicing a psd, and there is a part of the screen that will repeat with as many items as it needs, similar to the question list of stackoverflow.
It needs to have this structure:
Is it possible? How should the css be?
Thanks!
You could try the following:
<style type="text/css">
#container {
width:60%;
}
#content {
width:100%;
}
#user-content {
float:left;
}
</style>
<div id="container">
<div id="content">
<div id="user-content">
<p>This can change depending on what is in here.</p>
</div>
<!-- The rest of the page's content goes here. -->
</div>
</div>
This makes the "content" div fill the rest of the space that "user-content" doesn't fill. It will only be an issue when your content is taller than the user content... but that's a different problem :)
This is another possiblity:
<style type="text/css">
#container {
width:60%;
}
#content {
width:100%;
float:left;
}
#user-content {
float:left;
}
#page-content {
float:left;
}
</style>
<div id="container">
<div id="content">
<div id="user-content">
<p>This can change depending on what is in here.</p>
</div>
<div id="page-content">
<p>This should take up the rest of the space.</p>
</div>
</div>
</div>
The problem lies in your left div where you state "width can increase depending on the content". How is this width defined? The div to the right can expand to 100% of the remaining space but you must define the relationship between the left and the right divs by either providing a fixed width to the left div or providing a percentage to both that equals 100%.
Well, as you’ve probably seen, so.com used fixed width div’s to achieve your layout goal.
Obviously my first tries setting the width automatically failed, but maybe I’ve a useful workaround for you: use left and right floating of both boxes.
<div style="border: 1px solid #000000; width: 60%">
<div style="border: 1px solid #444444; float: left;">
some text
</div>
<div style="border: 1px solid #999999; float: right;">
foo
</div>
</div>
Of course this will only help if I understood your question correctly ;)
As far as I know the only way to give your variable width container a variable width and float it to the left is to give it {width:auto;float:left;}
But I don't know if you can do anything useful with this because if you have text or a lot of small fixed width items to put in this container, they will keep expanding out along the first line until they've filled the width of the outer div before going on to the second line. They won't fill up the whole height and then push outward gradually as the text gets too much to contain.
Just a thought - you might be able to do some nifty JavaScript (possibly using jQuery?) which sizes those divs like you need them.