<div style="border-style:solid; margin:auto;">
<div style="position:absolute;">
<div style="background:yellow; border-style:dotted; height:300px; width:300px">
<h3>THIS IS THE BODY, AND HEIGHT WILL BE CHANGED DYNAMICALLY</h1>
</div>
</div>
<img src="https://www.google.ca/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg">
</div>
<div style="border-style:solid">
<h2> THIS IS THE FOOTER</h1>
</div>
I'm trying to put a div over the image, how let the floating div to occupy the space, so the footer div will be pushed accordingly.
I'm not sure what you're asking. Do you wish to have the yellow div take up only the amount of space of the div behind it (with the Google Doodle)? Or do you want the reverse, that is, you want the footer height to automatically adjust to the yellow div height?
I am not sure I completely understand. Do you mean to make the div containing the image to have a minimum height? You can use the min-height property then as follows:
<div style="border-style:solid; margin:auto;min-height:80%">
<div style="position:absolute;">
<div style="background:yellow; border-style:dotted; height:300px; width:300px">
<h3>THIS IS THE BODY, AND HEIGHT WILL BE CHANGED DYNAMICALLY</h1>
</div>
</div>
<img src="https://www.google.ca/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg">
</div>
<div style="border-style:solid">
<h2> THIS IS THE FOOTER</h1>
</div>
-- Edit: If you are looking for some kind of a background-image in a div container you can control you can do something like this:
<html>
<head>
</head>
<body>
<div style="border-style:solid; margin:auto">
<div div style="background-image:url('https://www.google.ca/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg'); background-repeat: no-repeat;" >
<div style="border-style:dotted; height:400px; width:600px">
</div>
</div>
</div>
<div style="border-style:solid">
<h2> THIS IS THE FOOTER</h1>
</div>
</body>
</html>
Related
Here is a codesandbox of what I have: https://codesandbox.io/s/still-surf-5vyy2
The pink square is stickied the way I want to but now I need to add a container so that the content doesnt stretch through the whole page.
THis is what the html looks like now:
<body>
<div style="height:200vh;background-color:blue">
<div style="width:50%;height:100vh;float:left;background-color:red"></div>
<div style="width:50%;height:50vh;float:right;background-color:pink;position:sticky;top:0">
<h1>I'm Sticky!</h1>
</div>
<div style="width:100%;height:100vh;float:left;background-color:green">
<div class="container">
<h2>I'm full width</h2>
</div>
</div>
</div>
<div style="width:100vw;height:75vh;background-color:white">
<h2>No sticky here</h2>
</div>
</body>
If I were to add:
<body>
<div style="height:200vh;background-color:blue">
<div class='container'> <--------------------------THIS
<div style="width:50%;height:100vh;float:left;background-color:red"></div>
<div style="width:50%;height:50vh;float:right;background-color:pink;position:sticky;top:0">
<h1>I'm Sticky!</h1>
</div>
</div>
</div>
<div style="width:100%;height:100vh;float:left;background-color:green">
<div class="container">
<h2>I'm full width</h2>
</div>
</div>
</div>
<div style="width:100vw;height:75vh;background-color:white">
<h2>No sticky here</h2>
</div>
</body>
It breaks the sticky. Does anyone have a better solution for this?
Really appreciate the help.
Your container div has no height. please add that rule to 100% in your css:
.container {
width: 90%;
max-width: 900px;
margin: 0 auto;
height: 100%;
}
HTML
<div id="outer_div" style="overflow:auto; width:1238px; height:310px;">
<div id="inner_div" style="height:300px;">
<div id="child1" style="width:400px;">
</div>
<div id="child2" style="width:400px;">
</div>
<div id="child3" style="width:300px;">
</div>
<div id="child4" style="width:500px;">
</div>
<div id="child5" style="width:300px;">
</div>
<div id="child6" style="width:600px;">
</div>
</div>
</div>
What I want is the inner_div's width should go beyond the outer_div and child divs will remain on same line. I am adding child divs into inner_div by using jquery prepend and append method. Currently the maximum width inner_div is taking the width of outer_div and after that the line breaks.
I tried with display:inline-block, overflow:auto; and width:auto on inner_div but its not working.
Currently I am getting it to work using jquery by adding width dynamically to inner_div as I am dynamically adding child divs into inner_div. I would like to achieve it using css if possible.
Use table and table-cell properties to achieve this.
#inner_div{display:table;}
#inner_div div{display:table-cell;}
DEMO
you should use min-width on outer_div and float(or display:inline-block) on children of inner_div .
or use position absoulote on inner_div:
<div id="outer_div" style="min-width:1238px; height:310px">
<div id="inner_div" style="height:300px;">
<div id="child1" style="width:400px;display:inline-block">
</div>
<div id="child2" style="width:400px;display:inline-block">
</div>
<div id="child3" style="width:300px;display:inline-block">
</div>
<div id="child4" style="width:500px;display:inline-block">
</div>
<div id="child5" style="width:300px;display:inline-block">
</div>
<div id="child6" style="width:600px;display:inline-block">
</div>
</div>
</div>
or if you want fixed width of outer_div you can use position:
<div id="outer_div" style="width:1238px; height:310px;position:relative;white-space: nowrap;">
<div id="inner_div" style="height:300px;position:absolute; top:0 ">
<div id="child1" style="width:400px;display:inline-block">
</div>
<div id="child2" style="width:400px;display:inline-block">
</div>
<div id="child3" style="width:300px;display:inline-block">
</div>
<div id="child4" style="width:500px;display:inline-block">
</div>
<div id="child5" style="width:300px;display:inline-block">
</div>
<div id="child6" style="width:600px;display:inline-block">
</div>
</div>
</div>
by display table , inner_div can't get width larger than 1238!
also, I think , you can't add new element by css!
How can I get my footer to sit on the bottom of the page outside of the container? The template is based on the boilerplate.
What CSS do I need to use to make it sit at the bottom?
HTML:
</div><!-- end of container -->
<div clear="clear"></div>
<div id="footer" class="w960">
<div id="footerHolder">
<div class="foot left"></div>
<!--
<div class="foot right">
FOLLOW US:
<div id="social">
<div id="fb" class="socialIcon"></div>
<div id="tw" class="socialIcon"></div>
</div>
</div>
-->
</div>
</div>
CSS:
#container{width:960px;margin:0px auto 40px auto;}
#footer{width:100%;clear:both; height:66px;background:#2d2d2f;}
#footerHolder{width:960px;margin:auto;}
Not sure what you're looking for exactly but shouldn't your #footerHolder contain the #footer?
Also, div clear="clear"
is not required since you are specifying the clear:both property in #footer.
This should rest nicely at the bottom of the page.
I've a background image for body and a background color for wrapper div.
I haven't set any height for body and I'm using a min-height:1000px for wrapper.
But if wrapper height extends 1000px;, the background color of wrapper is as body background image.
HTML Code:
<body>
<div id="wrapper">
<div id="header">
<div id="headercontainer">
<div id="company"></div>
<div id="tagline"></div>
<div id="navigation"></div>
</div>
</div>
<div id="pagecontainer1"></div>
<div id="footer1"></div>
</div>
Here is the css:
body{
background:#E8EDF0;
margin:0;
width:100%;
background-image: url(http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20100521.png);
background-repeat: repeat-x;
background-position: 0px -2335px;}
#wrapper{
background-color:#FFF;
min-height:1000px;
width:1008px;
margin:auto;
position:relative;
overflow:visible;
}
How can i fix this background color issue for wrapper.
As the way you coded your page, you can't get the wrapper to cover the full height. So the best way to do it is to make a background image for your full body like this:
grey area##-----white area: 1008px-----###grey area
make it 2000px wide (or more), 1px high, and repeat vertically:
background:#E8EDF0 url(new-background-path.jpg) top center repeat-y;
simply add <div style="clear:both"></div> in pagecontainer1 div. coz i think there are some float div so to clear float use float clear or you can use overflow:hidden; rather than overflow:visible;
<div id="wrapper">
<div id="header">
<div id="headercontainer">
<div id="company"></div>
<div id="tagline"></div>
<div id="navigation"></div>
</div>
</div>
<div id="pagecontainer1">
<div style="clear:both"></div>
</div>
<div id="footer1"></div>
<div style="clear:both"></div>
</div>
I have this html:
<div id='calendarControlPane'>
<div id='calendarControl'>
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;">
</div>
</div>
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;">
</div>
</div>
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;">
</div>
</div>
</div>
</div>
I'm using "display:inline-block" on container divs because I want those divs to fit the size of their contents.
The problem I have is that they are drawn next to each other and need to be drawn below each other.
Well, depending upon your actual final application, using a float can work (see fiddle), though older versions of IE can choke on it:
HTML
<div id="calendarControlPane">
<div id="calendarControl">
<div>
<div></div>
</div>
<div>
<div></div>
</div>
<div>
<div></div>
</div>
</div>
</div>
CSS
#calendarControl > div {
float: left;
clear: left;
border: 1px solid black;
}
#calendarControl > div > div {
width: 14px;
height: 15px;
}
Oldschool fix:
<div id='calendarControlPane'">
<div id='calendarControl'">
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;"></div>
</div><br />
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;"></div>
</div><br />
<div style="border-style:solid; display:inline-block;">
<div style="width:14;height:15;"></div>
</div>
</div>
</div>
Simply add a
<br />
after each div containing the inline-block class.
You're not really asking a question here, and the two bottom lines of your post are a bit hard to understand, but are you sure you don't want display: block instead?
edit: As drublic said, this is the default display value for divs, so you shouldn't need that style at all.