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.
Related
I would like to place my logo on the border of two divs. I've two questions:
In which div should I place this logo: in div above or in div below or maybe put in another div?
How can I position it. I tried absolute and relative but it doesn't work.
It should looks like:
HTML
<!-- Favorites -->
<section class="favorites">
<h2 class="favorites-header">Urban Favorites</h2>
<div class="favorites-box">
<img src="img/burger-craft-burgers-e1497746930767.png">
<div class="favorites-info">
<h2>Craft Your Own Burger</h2>
<p>Always get exactly what you want with this build-your-own classic. Always get exactly what you want with this build-your-own classic.</p>
</div>
</div>
<div class="favorites-box-last">
<img src="img/burger-craft-fries.jpg">
<div class="favorites-info">
<h2>Loaded Cheese Fries</h2>
<p>Always get exactly what you want with this build-your-own classic. Always get exactly what you want with this build-your-own classic.</p>
</div>
</div>
<!-- Here is my logo --> <img class="favorites-logo" src="img/urban8-logo-shadow.png" alt="logo-shadow">
</section>
<!-- Review -->
<section class="review">
<div class="review-element">
<p>"Great meals!"</p>
<img src="img/five-stars.png">
<p>-Jane Doe</p>
</div>
<div class="review-element">
<p>"Awesome atmosphere!"</p>
<img src="img/five-stars.png">
<p>-Aicia Fox</p>
</div>
<div class="review-element">
<p>"Everything is ok"</p>
<img src="img/five-stars.png">
<p>-Cesar Algir</p>
</div>
<button>Leave a Review</button>
</section>
<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>
I'm trying to make a simple page header with bootstrap 3. Here's the code:
<div class="page-header">
<h1>Text on the left</h1>
<h3 class="text-right">This to the right but on the same line</h3>
</div>
Here's a jsfiddle to try: http://jsfiddle.net/DTcHh/2450/
Basically I just want to have text on the left and right inside the page-header, but on the same line.
The usual tricks of using float:left and float:right as with normal html "break" the page-header, meaning the text is properly aligned but is displayed outside (under) the page-header, which remains empty.
Any clues?
you can use "pull-right" and "pull-left" classes, with "clearfix" class after.
(Bootstrap 3)
<div class="page-header">
<div class="pull-left">
<h1>Text on the left</h1>
</div>
<div class="pull-right">
<h3 class="text-right">This to the right but on the same line</h3>
</div>
<div class="clearfix"></div>
</div>
also you can adjust line height on the h3 tag in the right, if you want to match with h1
Fiddle for Bootstrap 3: https://jsfiddle.net/darkosss/dy9wjk2q/
(as of Bootstrap 4.1)
use float-left and float-right instead. You still need the clearfix.
<div class="page-header">
<div class="float-left">
<h1>Text on the left</h1>
</div>
<div class="float-right">
<h3 class="text-right">This to the right but on the same line</h3>
</div>
<div class="clearfix"></div>
</div>
Fiddle for Bootstrap 4: https://jsfiddle.net/darkosss/eozs65qb/
if you are using Bootstrap, you should do something like
<div class="page-header">
<div class="row">
<div class="col-md-6">
<h1>Text on the left</h1>
</div>
<div class="col-md-6">
<h3 class="text-right">This to the right but on the same line</h3>
</div>
</div>
</div>
if you want to "stylize" the h1, h2, etc, change it to "display:block" and you'll have to add a "width" attribute anyway
use the following structure to position with bootstrap:
<div class= 'container'>
<div class='row'>
<div class ='md-col-4'>
<h1>Text on the left</h1>
</div>
<div class = 'md-col-4.col-md-offset-4'>
<h3 class='text-right'>This to the right but on the same line</h3>
</div>
</div>
Think of the row as a grid across of 12. So fist 4 left 3rd. 2nd div is the 3rd third with a 4 grid offset or gap.
http://getbootstrap.com/css/
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!
I have the following:
<!-- BLUE BOX --!>
<div style="width:100%;position:relative;min-height:100%">
<div style="position:absolute;left:1px;top:15px;">
IMAGE GOES HERE
</div>
<div style="position:absolute;left:20px;top:0;background-color:#2b5797; color:#fff;width:80%;min-height:40px;border-radius:5px;padding:10px;">
messages go here
</div>
</div>
<!-- PINK BOX --!>
<div style="width:100%;position:relative;min-height:100%">
<div style="position:absolute;right:1px;top:15px;">
IMAGE HERE
</div>
<div style="position:absolute;right:20px;top:0;background-color:#b91d47; color:#fff;width:80%;border-radius:5px;padding:10px;min-height:40px">
messages go here
</div>
</div>
here is the image of the HTML output:
Please help me getting those divs in vertical order, I don't want them to float over each other, I want the message div to get the automatic height according to content too.
You should use floats for this. float:left , float:right and a clear:both inbetween :
<div style="width:100%;position:relative;min-height:100%;float:left">
<div style="float:left">img</div>
<div style="float:left;background-color:#2b5797; color:#fff;width:80%;min-height:40px;border-radius:5px;padding:10px;">First messages go here</div>
</div>
<div style="clear:both;width:100%;position:relative;min-height:100%">
<div style="float:right">img</div>
<div style="float:right;background-color:#b91d47; color:#fff;width:80%;border-radius:5px;padding:10px;min-height:40px">messages go here</div>
</div>
You can see it in action here : jsfiddle
Remove absolute position form your message DIV. Write like this:
<div style="position:relative;">
<div style="position:absolute;left:1px;top:15px;">
IMAGE GOES HERE
</div>
<div style="margin-left:20px;margin-right:20%;background-color:#2b5797; color:#fff;min-height:40px;border-radius:5px;padding:10px;">
messages go here
</div>
</div>
<div style="position:relative;">
<div style="position:absolute;right:1px;top:15px;">
IMAGE HERE
</div>
<div style="margin-right:20px;margin-left:20%;background-color:#b91d47; color:#fff;border-radius:5px;padding:10px;min-height:40px">
messages go here
</div>
</div>
Check this http://jsfiddle.net/y44NC/2/