I have a div nested inside another
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
<div id="footer"></div>
</div>
THE CSS is as
#wrapper{
width:800px;
}
#left{
float:left;
width: 200px;
}
#right{
float: left;
width: 600px;
}
#footer{
width:800px;
height: 20px;
}
How can i ensure that the footer stays at the bottom of the wrapper div?
http://jsfiddle.net/LMeZ9/
just use clear:both
#footer{
width:800px;
height: 20px;
clear:both
}
You can solve this by using positioning:
#wrapper{
width:800px;
height: 600px;
position: relative;
border: 1px solid #333;
}
#left{
float:left;
width: 200px;
}
#right{
float: left;
width: 600px;
}
#footer{
width:800px;
height: 20px;
position: absolute;
bottom: 0;
}
Demo here.
Related
I am just a beginner in HTML/CSS
How to stop the floating div from overlapping.
jsfiddle-link
HTML
<body>
<div class="left">
</div>
<div class="right">
</div>
</body>
CSS
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
}
.left {
float: left;
height: 500px;
width: 300px;
background: #fff;
position: absolute;
}
.right {
float: right;
height: 500px;
width: 300px;
background: #000;
}
Use widths in percentages and remove the absolute positions:
Here is the updated CSS:
*{
margin:0;
padding:0;
}
body{
width:100%;
}
.wrapper {
width: 100%;
}
.left{
float:left;
height:500px;
width:50%;
background:#fff;
}
.right{
float:right;
height:500px;
width:50%;
background:#000;
}
I have also wrapped left and right divs in a wrapper div
Check it here: https://jsfiddle.net/2Lk13045/2/
You set your width fixed instead of 100%.
https://jsfiddle.net/2Lk13045/1/]
Changed your
body{width:100%; }
to
body{width:600px; }
I am new website designer. i would like to create website which is separated in 3 columns, when i zoom out my website with Firefox and Chrome it doesn't has any problems; however, when i zoom out with Safari it has some whitespace between right div and middle. please help me to fix it.
my css script as below:
div#left{
float: left;
width: 205px;
max-width:205px;
background-color:#999;
height:200px;
}
div#middle{
float:left;
max-width:555px;
width: 555px;
background-color:#366;
}
div#right{
float: right;
width: 200px;
max-width:200px;
background-color:#F00;
height:200px;
}
div#content{
width: 960px;
margin-top: 0 auto;
white-space:nowrap;
}
My HTML
<div id="content">
<div id="left">
Test
</div>
<div id="middle">
Middle
</div>
<!--white space here when zoom out in safari-->
<div id="right">Right</div>
</div>
How to fixed with safari ?
because the width of the browser has increased your middle is floating left and your right is floating right which cause a white space in the middle.. try making your right float left also
div#right{
float: left;
width: 200px;
max-width:200px;
background-color:#F00;
height:200px;
}
but this will leave you a white space on the right side.
you can fix this by making your left middle and right in percent. so that it would adopt the length of its parent.
div#left{
float: left;
width: 25%;
background-color:#F00;
height:200px;
}
div#middle{
float: left;
width: 50%;
background-color:#F00;
height:200px;
}
div#right{
float: left;
width: 25%;
background-color:#F00;
height:200px;
}
Add float:left to right div and correct the classes names.
DEMO
HTML
<div id="hcontent">
<div id="hleft">Test</div>
<div id="middle">Middle</div>
<!--white space here when zoom out in safari-->
<div id="right">Right</div>
</div>
CSS
div#hcontent {
margin: 0 auto;
width:960px;
}
div#hleft {
float: left;
width: 205px;
max-width:205px;
background-color:#999;
height:200px;
}
div#middle {
float:left;
max-width:555px;
width: 555px;
background-color:#366;
}
div#right {
float: left;
width: 200px;
max-width:200px;
background-color:#F00;
height:200px;
}
DEMO with width px
DEMO with width %
Your "content" div is not appeared to be in your HTML. If you mean that hcontent == content, then there is a problem with your width. You have width set to 100% to the parent "hcontent" block, and child div's just positioned with float and have width set in px. You need to change your hcontent style to fixed width in px, or change your child div's to width in percent.
You can try something like this:
div#left{
float: left;
width: 205px;
max-width:205px;
background-color:#999;
height:200px;
}
div#middle{
float:left;
max-width:555px;
width: 555px;
background-color:#366;
}
div#right{
float: right;
width: 200px;
max-width:200px;
background-color:#F00;
height:200px;
}
div#content{
width: 960px;
margin: auto;
white-space:nowrap;
}
As you can see I've just changed your content width and margin to "auto" so it would be always positioned at the center.
Either way:
div#left{
float: left;
width: 30%;
background-color:#999;
height:200px;
}
div#middle{
float:left;
width:40%;
background-color:#366;
}
div#right{
float: right;
width: 30%;
background-color:#F00;
height:200px;
}
div#content{
width: 100%;
margin: auto;
white-space:nowrap;
}
Note that I've changed all of your div width to percent value.
I did this for you. It may help.
Santy beat me to it. Basically the same thing but with a .clearfix class added to get rid of any other extra whitespace which might appear because of the floating elements.
I'd recommend moving away from pixel units. Try experimenting percentages or something scalable like rem or em units.
HTML
<div id="content">
<div id="left">Left</div>
<div id="middle">Middle</div>
<!--white space here when zoom out in safari-->
<div id="right">Right</div>
<div class="clearfix"></div>
</div>
CSS
#content{
width: 900px;
margin: 0 auto;
white-space:nowrap;
}
#left{
float: left;
width: 200px;
min-height:200px;
background-color:#999;
}
#middle{
float:left;
width: 500px;
min-height: 200px;
background-color:#366;
}
#right{
float: left;
width: 200px;
min-height: 200px;
background-color:#F00;
}
.clearfix{
clear: both;
}
JSFiddle
http://jsfiddle.net/LVLMz/
Use percentage for the widths (20%, 60%, 20%).
div#left{
float: left;
width: 20%;
background-color:#999;
height:200px;
}
div#middle{
float:left;
width: 60%;
background-color:#366;
}
div#right{
float: right;
width: 20%;
background-color:#F00;
height:200px;
}
Fiddle
here it is [tested]
just changed hleft => left and hcontent => content
<style>
div#left{
float: left;
width: 205px;
background-color:#999;
height:200px;
}
div#middle{
float:left;
width: 555px;
background-color:#366;
}
div#right{
float: left;
width: 200px;
background-color:#F00;
height:200px;
}
div#content{
width: 960px;
margin: 0 auto;
white-space:nowrap;
}
</style>
<div id="content">
<div id="left">
Test
</div>
<div id="middle">
Middle
</div>
<!--white space here when zoom out in safari-->
<div id="right">Right</div>
</div>
<div id="hleft"> & <div id="hcontent">
should be:
<div id="left"> & <div id="content">
I've created the below jsfiddle recreating my problem, I want that the .dashboard & .inner-dashboard have always a 100% height and keep the footer always at the bottom.
http://jsfiddle.net/rv7xN/1/
HTML
<div id="wrap">
<body>
<div class="dashboard">
<div class="inner-dashboard">
</div>
</div>
</body>
</div>
<div id="footer"></div>
CSS
html,body{
height:100%;
}
#wrap {
min-height: 100%;
height: auto;
margin: 0 auto -60px;
padding: 0 0 60px;
}
#footer {
height: 60px;
background-color: blue;
}
.dashboard{
width: 100%;
height: auto;
min-height: 100%;
position: absolute;
padding-bottom: -60px;
background-color:green;
}
.inner-dashboard{
height:100%;
padding-bottom: -60px;
background-color:red;
}
Here's an example : jsFiddle
I had to modify the html to have a common container for the dashboard and the footer.
<div id="wrap">
<div class="dashboard">
<div class="inner-dashboard">
</div>
</div>
<div id="footer"></div>
</div>
I turn the wrapper (common container) in a table and the other elements in table-cell.
So even if your dashboard is height 200%, the footer's still at the bottom.
html,body{
height:100%;
}
#wrap {
position:absolute;
display:table;
height:100%;
width:95%;
padding-bottom:60px;
}
.dashboard{
width: 95%;
height: 200%;
display:table;
border:5px solid green;
}
.inner-dashboard{
width: 95%;
height: 100%;
display:table-cell;
border:5px solid red;
}
#footer {
display:table;
height: 60px;
width:95%;
border:5px solid blue;
bottom:-10px;
}
Is that it ?!
I have added modified your css and added position attribute
I hope the revision solves your issue: [UPDATE] http://jsfiddle.net/saurabhsharma/rv7xN/3/
I' am trying to position a div on my site to bottom 0px. Please see the code below. This div with position 0px is wrap inside another div.
Here's the HTML
<div class="top-wrap">
<div class="clearfix top-cleafix">
<div class="test">
Test
</div>
</div>
</div>
Here's the CSS
.clearfix{
width: 960px;
margin-left: auto;
margin-right: auto;
}
.top-wrap{
height: 341px;
background: #F00;
width: 100%;
}
.top-cleafix{
height: 100%;
}
.test{
bottom: 0px;
}
Try:
.test{
position:absolute;
bottom: 0px;
width:100%;
}
.top-wrap{
height: 341px;
background: #F00;
width: 100%;
position:relative; //add relative position
}
Fiddle here.
add
position:absolute;
or
position:relative;
based on content
use
.test{
float: bottom;
vertical-align:bottom;
}
you need to add absolute position in test and relative in top-wrap
.top-wrap{
position:relative;
height: 341px;
background: #ddd;
width: 100%;
}
.clearfix{
width: 960px;
margin-left: auto;
margin-right: auto;
}
.top-cleafix{
height: 100%;
}
.test{
bottom: 0px;
position: absolute;
}
Fiddle example
I am trying to create a page layout something like this.
This is my HMTL structure -
<div id="content-three-cols">
<div class="leftcol">
</div>
<div class="cols-content">
<div class="banner">
</div>
<div class="two-cols">
<div class="rightcol">
</div>
<div class="middlecol">
</div>
</div>
</div>
</div>
This is my CSS code so far -
.leftcol {
display: inline;
float: left;
min-height: 500px;
width: 180px;
background: #34ab2b;
}
.banner {
background: #ffe400;
border-bottom: 1px solid #DDDDDD;
float: left;
width: 750px;
height: 150px;
}
.middlecol {
width: 600px;
min-height: 600px;
background: #2b73ab;
}
.rightcol {
width: 150px;
min-height: 500px;
background: #b2540f;
float: right;
}
Adding this styles I couldn't get my expecting output. Instead my desire result this code create a mess layout for me. Can anybody tell my how can I figure this out.
This is JsFiddle
Thank you.
Quite simple really, here is a quick demo i made, i will explain everything in a second.
Demo
HTML:
<div class="left"></div>
<div class="head"></div>
<div class="center"></div>
<div class="right"></div>
CSS:
body, html{
height:100%;
}
.left, .right, .head, .center{
float:left; // Float all the containers to the left so have a `inline` effect
}
.left{
height:100%;
width:25%; // Full width minus right and center width
background:orange;
}
.head{
background:red;
height:10%; // Height of header
width:75%; // Full width minus left sidebar
}
.center{
width:50%; // Full width minus both sidebar's width
background:skyblue;
height: 90%; // Full height minus header height
}
.right{
width:25%; // Full width minus center and left width
background:green;
height:90%; // Full height minus header height
}
also note, you may need to have a Clearfix handy seeing as a lot of elements are floating in thin air.
Happy coding :)
Clearfix...
Well take a look at this fiddle, everything is working fine
http://jsfiddle.net/mqzJN/
Now if we add a float to the link like this
http://jsfiddle.net/mqzJN/1
Then you can see the background is gone, because the <div> doesn't have any height any more because the link is floating in thin air.
So you use a clearfix to fix this, like in this fiddle
http://jsfiddle.net/mqzJN/2/
So any element that has a float you might wan't to add the clearfix class to the container of that element like in the last fiddle example.
There you go! (http://jsfiddle.net/aV2Dn/)
<div id="wrapper">
<div id="left_column"></div>
<div id="top_bar"></div>
<div id="middle"></div>
<div id="right_column"></div>
</div>
#wrapper{
width:500px
height:500px;
margin: auto;
}
#left_column{
width: 100px;
height:500px;
background: #34ab2b;
position:absolute;
left:0px;
top: 0px;
}
#top_bar{
position: absolute;
left: 100px;
top: 0px;
width: 400px;
height:100px;
background-color: #ffe400;
}
#middle{
position: absolute;
left: 100px;
top: 100px;
width: 300px;
height:400px;
background: #2b73ab;
}
#right_column{
position: absolute;
left: 400px;
top: 100px;
width: 100px;
height:400px;
background: #b2540f;
}
here
The HTML:
<body>
<div class="left">
</div>
<div class="right">
<div class="upper"></div>
<div class="lower">
<div class="innerLeft"></div>
<div class="innerRight"></div>
</div>
</div>
</body>
The CSS:
body {
width: 100%;
}
.left {
width: 25%;
height: 450px;
float: left;
background-color: #f00;
}
.right {
width: 75%;
height: 450px;
float: right;
background-color: #4cff00;
}
.upper {
width: 100%;
float: left;
height: 100px;
background-color: blue;
}
.lower {
width: 100%;
height: 100px;
background-color: grey;
}
.innerLeft {
width: 65%;
float: left;
height: 350px;
background-color: fff;
}
.innerRight {
width: 35%;
float: right;
height: 350px;
background-color: #000;
}