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.
Related
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>
Following HTML, displays a picture in the background and text nhs subscription written over it. Now when I give class="nhs_head" margin-top text along with image moves down. Why is it so ?
How can I just give text the margin ?
<body>
<div class="image_holder">
<div class="nhs_head"> NHS SUBSCRIPTION </div>
</div>
</body>
CSS:
.image_holder {
position:relative;
background-image:url(bg2.jpg);
height:768px;
width:1366px;
}
.nhs_head {
display:block;
width:60%;
margin:0 auto;
border:2px solid white;
font-family:Calibri;
font-weight:800;
font-size:30px;
color:white;
}
Demo
If you want to apply margin-top to text you can position absolute the text in relatively positioned image div.
css
body, html {
margin:0;
}
.image_holder {
position: relative;
background-image:url('http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg');
height:768px;
width:1366px;
}
.nhs_head {
width:60%;
margin:0 auto;
border:2px solid white;
font-family:Calibri;
font-weight:800;
font-size:30px;
margin-top: 30px;
color:white;
position: absolute;
left:0;
right:0;
margin-top: 30px;
}
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;
}
What is going on here, I has tried floating the spans to the left, I have tried displaying them inline-block, inline ect... nothing seems to be working, I want any spans in the "filters" div to all go next to each other on a horizontal line!
HTML:
<div class="filters">
<span style="background-image:url(images/filters/grayscale.jpg)">Grayscale</span>
<span style="background-image:url(images/filters/smooth.jpg)">Smooth</span>
<span style="background-image:url(images/filters/contrast.jpg)">Contrast</span>
<span style="background-image:url(images/filters/brightness.jpg)">Brightness</span>
<span style="background-image:url(images/filters/colorize.jpg)">Colorize</span>
</div>
CSS:
.filters {
background-color:#1a1a1a;
height:8em;
width:100%;
border-radius:0px 0px 15px 15px;
overflow:scroll;
}
.filters span {
margin:10px;
border-radius:15px;
background-size:contain;
background-repeat:no-repeat;
width:175px;
height:65px;
font-size:20px;
padding-top:2.2em;
float:left;
}
you have to change your code in the following way,
.filters {
position:relative;
background-color:#1a1a1a;
height:8em;
width:100%;
border-radius:0px 0px 15px 15px;
overflow:scroll;
}
then for each span, you have to change left: 0px to the amount you want the filter effect to move from the left side.
.filters span {
position:absolute;
left: 0px;
margin:10px;
border-radius:15px;
background-size:contain;
background-repeat:no-repeat;
width:175px;
height:65px;
font-size:20px;
padding-top:2.2em;
float:left;
}
I have added position:relative; on filter box,
and position: absolute; and left: 0px;
Change the width from 100% to a larger value (in % or px) and a containing div if you want the user to scroll horizontally through the spans.
SEE JSFIDDLE EXAMPLE
.container {
width:300px;
height:8em;
overflow-x:scroll;
overflow-y:hidden;
}
.filters {
background-color:#1a1a1a;
height:8em;
width:1000px;
border-radius:0px 0px 15px 15px;
}
<div class="container">
<div class="filters">
...
</div>
</div>
Edit: Solution
Here is you fiddle working: Working jsFiddle here
Original Answer
Use white-space: nowrap; css for surrounding container. If you want to get rid of autospaces between the spans as well concatenate them with <!-- --> html comments.
HTML:
<div class="filters">
<span>Grayscale</span><!--
--><span>Smooth</span><!--
--><span>Contrast</span><!--
--><span>Brightness</span><!--
--><span>Colorize</span>
</div>
CSS:
.filters {
background-color:#1a1a1a;
height:8em;
width:100%;
border-radius:0px 0px 15px 15px;
overflow:scroll;
white-space: nowrap; /* added */
}
.filters span {
margin:10px;
border-radius:15px;
background-size:contain;
background-repeat:no-repeat;
width:175px;
height:65px;
font-size:20px;
padding-top:2.2em;
/*float:left; removed*/
}