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>
Related
<html>
<style>
#left{
width:50%;
height:200px;
float:left;
border:2px solid black;
}
#down{
width:50%;
height:200px;
border:2px solid black;
float:left;
}
#right{
width:40%;
height:200px;
border:2px solid black;
float:right;
}
</style>
<body>
<div id="left"></div>
<div id="down"></div>
<div id="right"></div>
</body>
</html>
How can i get "right" div to the right-top without changing anything inside html?
On First image is how it looks like
On Second image is how it need to look like.
Also i don't need to use relative absolute because if i zoom or un-zoom it will be messed up
is use this, it works for this example
EDIT : i put "justify-content:space-between" in body to be exactly like your picture
#left{
width:50%;
height:200px;
border:2px solid black;
}
#down{
width:50%;
height:200px;
border:2px solid black;
}
#right{
width:40%;
height:200px;
border:2px solid black;
overflow:hidden;
}
body{display:flex;
flex-wrap:wrap;
justify-content:space-between;}
.box:nth-child(2){
order:2;
}
<html>
<body>
<div class="box" id="left"></div>
<div class="box" id="down"></div>
<div class="box" id="right"></div>
</body>
</html>
Another option is to use flexbox, but you need a container for the items.
Maybe is so generic.
body {display: flex; flex-flow: row wrap-reverse;}
Here's one solution:
Added
position:absolute;
right:0;
to #right
#left{
width:50%;
height:200px;
float:left;
border:2px solid black;
}
#down{
width:50%;
height:200px;
border:2px solid black;
float:left;
}
#right{
width:40%;
height:200px;
border:2px solid black;
position:absolute;
right:0;
}
<div id="left"></div>
<div id="down"></div>
<div id="right"></div>
Use display:inline-block and vertical-align:top instead of float.
#left, #right, #down {
display:inline-block;
vertical-align:top;}
the best way is just add #right{transform:translatey(-100%);}
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 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!
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: