I need a responsive two column footer. However, the thing doesnt turn out to be responsive.I've shown it in here.
http://jsfiddle.net/fVBaB/
The CSS code is here...
#leftf
{
width:46%;
display:block;
float:left;
margin-bottom:20px;
border: 1px solid grey;
padding:18px;
height:100px;
}
#rightf
{
height:100px;
padding:18px;
width:46%;
display:block;
float:right;
margin-bottom:20px;
border: 1px solid grey;
}
#bottomline
{
width:100%;
display:block;
bottom:0px;
}
It's because your mixing percentages and pixels in the width - you're also using block and not inline-block. Change your CSS to:
#leftf
{
width:46%;
display:inline-block;
float:left;
margin-bottom:20px;
padding:2%;
height:100px;
}
#rightf
{
height:100px;
padding:2%;
width:46%;
display:inline-block;
float:right;
margin-bottom:20px;
}
#bottomline
{
width:100%;
display:block;
bottom:0px;
}
I've also removed the border from #leftf and #rightf as this was adding a pixel each. Here's a demo http://jsfiddle.net/MY5VE/.
Hope this helps!
Related
Hello I have a question about centering a frame div inside a parent div.
I would like to center the frame inside the page, which is 70% wide, but I just cant make it work. I woud like the frame to be inside the parent div WRAP and the WRAP div inside the MAINWRAPPER which is 70% wide.
Please help :)
html{
background-color:#EEE;
font-family: 'Lato',Calibri,Arial,sans-serif;
font-size:16px;
color:#888;}
body{
position:absolute;
width:100%;
margin:0px;
padding:0px;
}
#MAINWRAPPER {
min-height:100%;
position:absolute;
right: 0;
left: 0;
margin:0 auto;
padding:0;
width:70%; /* page width */
background-color: #39f;
border:1px solid #959595;
}
#WRAP {
position:relative;
display:block;
margin:0 auto;
border:1px solid red;
}
.frame {
width:100%;
height:300px;
position:relative;
float:left;
background-color:#fff;
display:block;
border:1px solid #959595;
border-radius:4px;
text-align:center;
margin:2%;
}
.frame a{
display:block;
width:100%;
height:100%;
color:#333;
}
.frame a:hover{
display:block;
color:#FFF;
}
.title {
display:block;
position:absolute;
overflow:hidden;
top:0;
background-color:#ccc;
padding:3px 0;
width:100%;
height:auto;
border-bottom:1px solid #959595;}
div.price {
display: block;
position: absolute;
bottom: 1px;
right: 0;
height: 1.6em;
width: 3em;
background-color: #33CCFF;
border-radius:5px;
border:2px solid #FFF;
color:#FFF;
font-size:1.2em;
font-weight:bold;
text-align:center;
}
<body>
<div id="MAINWRAPPER">
<div id="WRAP">
<div class="frame"><a href="#">
<object class="title">TITLE</object></a><div class="price">50</div></div>
</div>
</div>
</div>
</body>
Remove width and float from .frame and try like this: Demo
.frame {
height:300px;
position:relative;
background-color:#fff;
display:block;
border:1px solid #959595;
border-radius:4px;
text-align:center;
margin:2%;
}
How to center a div inside a page container in your HTML page :-
Just add following bootstrap class to do this in your HTML page :-
text-center col-md-offset-2
Description :-
Here offset value is the margin from the left hand side so by increasing decreasing the value of the offset you can set the margin.
Looking for a vertical ruler using a div tag. and I want something like this.
http://i.imgur.com/ASF8DEt.png
My code DEMO
CSS:
.acc{
float:left;
width:400px;
height:auto;
overflow:hidden;
border:#FFF solid 3px;
background-color:#319dba;
}
.acc .title{
width:100%;
height:30px;
color:#FFF;
text-align:center;
padding-top:5px;
border-bottom:3px #FFFFFF solid;
}
.acc .debit{
float:left;
width:198px;
height:auto;
}
.acc .vr{
float:left;
width:2px;
height:100%;
background-color:#fff;
border:1px solid #fff;
}
.acc .credit{
float:right;
width:198px;
height:auto;
}
.acc .row{
width:100%;
height:25px;
}
But vr does not going for 100% height.
help me.
thanks
Try like this: Demo
CSS:
.acc {
float:left;
width:400px;
height:auto;
overflow:hidden;
border:#FFF solid 3px;
background-color:#319dba;
position: relative;
}
.acc .title {
width:100%;
height:30px;
color:#FFF;
text-align:center;
padding-top:5px;
border-bottom:3px #FFFFFF solid;
}
.acc .debit {
float:left;
width:198px;
height:auto;
}
.acc .vr {
width:2px;
height:100%;
background-color:#f00;
border:1px solid #f00;
height: 100%;
position: absolute;
right: 0;
left:50%;
}
.acc .credit {
float:right;
width:198px;
height:auto;
}
.acc .row {
width:100%;
height:25px;
}
Instead of using a vr div, apply a border to the left element:
.acc .debit {
border-right: 3px solid white;
}
That is also how the upper hr has been made.
Here's a fiddle
If you don't want to bother with width, you can apply half the border from the left and half from the other side or switch box-sizing.
I am facing the problem to align the content div in a data div. The Data div was not fixed
height. Because it was auto height when the content div increase.
But it was going to out of flow. How to solve it ?
.container
{
position:relative;
border:1px solid blue;
margin:auto;
width:200px;
}
.data
{
position:relative;
border:1px solid green;
width:100px;
top:10px;
left:10px;
}
.hed
{
position:absolute;
border:1px solid orange;
width:30px;
height:10px;
top:-5px;
left:10px;
border-radius:5px;
background-color:orange;
line-height:10px;
}
<div class="container">
<div class="data"> This is absolute.</div>
<div class="hed">xxx</div>
</div>
If you want to have the container expand as the data div expands, add <br style = "clear:both"> before the closing div tag.
FIDDLE
You can set
overflow:hidden;
to the "container" div
change all css position to relative and use min-height then try
like this
.container {
position:relative;
border:1px solid blue;
margin:auto;
width:200px;
min-height:10px; //added
}
.data {
position:relative;
border:1px solid green;
width:100px;
top:10px;
left:10px;
}
.hed {
position:relative; //changed
border:1px solid orange;
width:30px;
height:10px;
top:-50px; //changed
left:10px;
border-radius:5px;
background-color:orange;
line-height:10px;
}
WORKING DEMO
Why are you using for div class="data":
top
left
You juste need to replace them by margin-top and margin-left.
.container
{
position:relative;
border:1px solid blue;
margin:auto;
width:200px;
}
.data
{
position:relative;
border:1px solid green;
width:100px;
margin-top:10px; // changed
margin-left:10px; // changed
}
.hed
{
position:absolute;
border:1px solid orange;
width:30px;
height:10px;
top:-5px;
left:10px;
border-radius:5px;
background-color:orange;
line-height:10px;
}
<div class="container">
<div class="data"> This is absolute.</div>
<div class="hed">xxx</div>
</div>
I have this CSS Code:
.homeBoxes {
width: 49%;
display:inline;
float:left;
overflow-y:scroll;
min-height:300px;
max-height:350px;
margin-right:5px;
margin-left:5px;
margin-top:10px;
margin-bottom:10px;
}
.title {
margin:0 auto 0 auto;
padding:2px;
font-size:20px;
background-color:#f36f25;
}
i want the title to be fixed within the .homeBoxes div and 100% (not displaying the scroll bar to the right of the title)
only to be fixed within the div and not on the whole page
http://jsfiddle.net/f3z3h/1/
Fiddle
Set overflow property.
.homeBoxes
{
width: 49%;
display:inline;
float:left;
overflow-y:scroll;
min-height:300px;
max-height:350px;
margin-right:5px;
margin-left:5px;
margin-top:10px;
margin-bottom:10px;
overflow: hidden;
}
If you want scrolling to the content , specify overflow:auto or scroll.
You can do like this: DEMO
HTML:
<div class="homeBoxes_container">
<div class="title">Title</div>
<div class="homeBoxes">TEXT</div>
</div>
CSS:
.homeBoxes_container {
clear:both;
width: 49%;
min-height:300px;
max-height:350px;
}
.homeBoxes {
width:100%;
display:inline;
float:left;
overflow-y:scroll;
margin-right:5px;
margin-left:5px;
margin-top:10px;
margin-bottom:10px;
min-height:300px;
max-height:350px;
}
I have the:
.events-cont {
width:100%;
height:250px;
overflow:scroll;
overflow-y:hidden;
float:left;
position:relative;
margin-top:20px;
display:block
}
.events {
width:210px;
height:250px;
position:relative;
float:left;
margin:0 10px;
padding:0;
border-right:3px #666 solid;
}
And I want a lateral scroll of manys .events divs repeatedly like the img in the link.
http://i.stack.imgur.com/tEyrY.jpg: