The container div has a fixed width of 540px min-height of 200px.
i want to put another div on the bottom right corner of that div...
how should i do that
<div style="width:540px; min-height:200px;" class="container">
<div style="position:absolute; bottom:0; right:0;" class="block">
</div>
</div>
Try this:
<div style="width:540px; min-height:200px; position:relative;" class="container">
<div style="position:absolute; bottom:0; right:0;" class="block">
</div>
</div>
you should add a position:relative; in the .container
The following works (for demo purposes):
<div style="width:540px; min-height:200px; position:relative; border: 1px solid red;" class="container">
<div style="width: 50px; height: 50px; position:absolute; bottom:0; right:0; border: 1px solid blue;" class="block">
</div>
</div>
See this JSFiddle
You can always separate the CSS into "container" and "block" classes.
<div style="width:540px; min-height:200px; position:relative; border: 1px solid red;" class="container">
<div style="width: 50px; height: 50px; position:absolute; bottom:0; border: 1px solid blue; margin-left : 480px;" class="block">
</div>
</div>
This would also help you. Specify the size of block div and subtract its size from container div and keep the result in margin-left.
Related
<div class="order_ulasan_wrapper_1" style="width:100%; border:solid 1px #ccc; margin-top:15px; font-size:0;">
<div class="title" style="border-bottom:solid 1px #ccc;/* display: block; */width: 100%;">
<div class="title_1" style="width: 70%;display:inline-block;border-right:solid 1px #ccc;font-size:12px;">
left box
</div>
<div class="title_2" style="width:30%; display:inline-block; font-size:12px;">
right-box
</div>
</div>
</div>
I have a parent div with width:100% and i want to divide it into two child div with width:70% and width:30% then make it inline. But why my right goes down?
Use a CSS Reset or set a proper box-sizing property.
* {
box-sizing: border-box;
}
<div class="order_ulasan_wrapper_1" style="width:100%; border:solid 1px #ccc; margin-top:15px; font-size:0;">
<div class="title" style="border-bottom:solid 1px #ccc;/* display: block; */width: 100%;">
<div class="title_1" style="width: 70%;display:inline-block;border-right:solid 1px #ccc;font-size:12px;">
left box
</div>
<div class="title_2" style="width:30%; display:inline-block; font-size:12px;">
right-box
</div>
</div>
</div>
Read more about Normalize and CSS-reset
Stack overflow
The issue is border-right in class .title_1 if you remove that it align both divs properly and if you want to keep that then use box-sizing:border-box or else reduce the width of .title_1
Remove border-right
<div class="order_ulasan_wrapper_1" style="width:100%; border:solid 1px #ccc; margin-top:15px; font-size:0;">
<div class="title" style="border-bottom:solid 1px #ccc;/* display: block; */width: 100%;">
<div class="title_1" style="width: 70%;display:inline-block; #ccc;font-size:12px;">
left box
</div>
<div class="title_2" style="width:30%; display:inline-block; font-size:12px;">
right-box
</div>
</div>
</div>
Reduce width
<div class="order_ulasan_wrapper_1" style="width:100%; border:solid 1px #ccc; margin-top:15px; font-size:0;">
<div class="title" style="border-bottom:solid 1px #ccc;/* display: block; */width: 100%;">
<div class="title_1" style="width: 68%;display:inline-block;border-right:solid 1px; #ccc;font-size:12px;">
left box
</div>
<div class="title_2" style="width:30%; display:inline-block; font-size:12px;">
right-box
</div>
</div>
</div>
How can I get a div with overflow: scroll; or overflow: auto; to scroll multiple contained divs?
If I have a single div, with a single child div, and the child div is wider than the container, then overflow:scroll; works great.
div.container {
overflow-x: scroll;
width: 150px;
border: 1px solid black;
}
div.inner2 {
width: 300px;
float: left;
}
<div class="container">
<div class="inner2">
ABCD1234WXYZ ABCD1234WXYZ
</div>
</div>
But if I have multiple inner floated divs, where each one is less than the width of the container, but in sum they are greater than the container, it wraps the floated divs.
div.inner {
width: 100px;
float: left;
}
div.container {
overflow-x: scroll;
width: 150px;
border: 1px solid black;
}
div.container:after {
clear: both;
}
<div class="wrapper">
<div class="inner">ABCD</div>
<div class="inner">1234</div>
<div class="inner">WXYZ</div>
</div>
How do I get it to append the floating divs horizontally and scroll?
jsfiddle here: http://jsfiddle.net/hw4ykza6/
Note that the contained divs will be resized at various times. I do not know in advance what the max or min width for them will be, only what they are now.
I think i've achieved what you want here (note i only applied my changes to your top example):
JSFIDDLE
The key things to note are:
I've added an inner wrapping element with class="inner-container" that is display:table-row
The elements of class inner now have display:table-cell
You don't need floats there. div.inner {display: table-cell;} will give you what you want:
div.inner {
width: 100px;
display: table-cell;
}
div.container {
overflow-x: scroll;
width: 150px;
border: 1px solid black;
}
<div class="wrapper">
<div class="inner">ABCD</div>
<div class="inner">1234</div>
<div class="inner">WXYZ</div>
</div>
You can also use a dispaly: inline-block; style and apply that style to all the child divs
e.g
<div style="width:300px; overflow-x:scroll; height:auto;">
<div class="box" style="width:100px; height:200px; display:inline-block;">
</div>
<div class="box" style="width:100px; height:200px; display:inline-block;">
</div>
<div class="box" style="width:100px; height:200px; display:inline-block;">
</div>
<div class="box" style="width:100px; height:200px; display:inline-block;">
</div>
<div class="box" style="width:100px; height:200px; display:inline-block;">
</div>
<div class="box" style="width:100px; height:200px; display:inline-block;">
</div>
<div class="box" style="width:100px; height:200px; display:inline-block;">
</div>
</div>
Note:am using inline styling for explanatory purposes
You could try coding with less so you can get your heights as a single variable so u can then use later
I have problem with fixed element, I wan't to set her width 100% relative to the second parent div .container
http://jsfiddle.net/q7wcam7x/2/
HTML
<div class="container">
<div class="header">
<div class="fixed">
!
</div>
</div>
</div>
CSS
.container{
width:300px;
position:relative;
margin:auto;
}
.header{
position:relative;
border:1px solid red;
height:300px;
}
.fixed{
position:fixed;
width:inherit;
height:10px;
background-color:blue;
}
This isn't possible with position:fixed, because fixed positioning is relative to the viewport (or the "screen").
However, this could be done with position:absolute, which causes the element to position itself relative to the closest parent that has the position property set on it:
http://jsfiddle.net/q7wcam7x/6/
HTML:
<div class="container">
<div class="header">
<div class="fixed">
dasdasdasdadddddddds
dsa
asdd
asd
</div>
</div>
</div>
CSS:
.container{
width:300px;
position:relative;
margin:auto;
}
.header{
border:1px solid red;
height:300px;
}
.fixed{
position:absolute;
width:100%;
height:10px;
background-color:blue;
}
If the above is not what you're looking for, maybe this will help you find a solution to your problem:
http://jsfiddle.net/q7wcam7x/7/
HTML:
<div class="container">
<div class="stickyHeader">THIS IS A HEADER</div>
<div class="scrollableContent">SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>
</div>
</div>
CSS:
.container {
width: 200px;
height: 150px;
overflow:hidden;
border: gold solid 2px;
}
.stickyHeader {
height: 20px;
background: white;
}
.scrollableContent {
height: 130px;
overflow: auto;
}
try this:
.fixed{
position:fixed;
left: 0;
right: 0
width:inherit;
height:10px;
background-color:blue;
}
I need to place a rectangular div in the middle of another rectangular div that's inside yet another container div. The image inside the innermost div has to be centered both horizontally and vertically in relation to the outermost div. How do I do that?
<div class="col-sm-4 col-sm-offset-1" style="margin-right:10px;">
<div class="panel panel-default" style="min-height:320px;">
<div class="panel-body" style="padding:0;">
<img src="">
</div>
<div>
</div>
#div1{
border:1px solid;
width:200px;
height:200px;
}
#div2{
border:1px solid;
width:100px;
height:100px;
margin:25%;
}
#div3{
border:1px solid;
width:50px;
height:50px;
margin:25%;
}
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
Make sure all the divs have width and height set and then use:
margin: 25%;
On the inner divs
I try to outline the div tag. I used border:0.01em solid black but it is not correctly fit.
My script below
<html>
<body>
<div id="color" style="width:100%; height:500px; background:gray;">
<div style="width:50%; height:500px; background:yellow; float:left;"></div>
<div style="width:50%; height:500px; background:blue; float:left;"> </div>
</div>
<div id="border" style="width:100%; height:500px; background:gray;">
<div style="width:50%; height:500px; border:0.01em solid black; float:left;"></div>
<div style="width:50%; height:500px; border:0.01em solid black; float:left;"></div>
</div>
</body>
</html>
That equal sepration of the div id = color tag is fit into the 100% width.
But equal sepration of the div id = border tag is not fit into the 100%
because i added the border to seprate div tags, so size is increase like 50% + 0.01em.
That the reason div id = border tag's sub div tag is not fit into the 100%, so the second sub div tag is fall in down from 100%.
So i want to outline
the div tag not to border it? How can i do it? But i want to seprate by the 50% i not decrese it.
Under the standard box-model padding and borders are added to any defined width.
If you set the box-sizing to border-box then the declared width will include any padding & borders.
It's often seen as part of a Universal Selector:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<div id="border" style="width:100%; height:500px; background:gray;">
<div style="width:50%; height:500px; border:1px solid black; float:left;"></div>
<div style="width:50%; height:500px; border:1px solid black; float:left;"></div>
</div>
This is actually the purpose of the outline property:
<div id="border" style="width:100%; height:500px; background:gray;">
<div style="width:50%; height:500px; outline:0.01em solid black; float:left;"></div>
<div style="width:50%; height:500px; outline:0.01em solid black; float:left;"></div>
</div>
Please try the below code:
<div id="color" style="width:100%; height:500px; background:gray;border:medium solid">
<div style="border-right: medium solid; float:left;width:50%; height:500px;"></div>
This should work with your case.
try
<div style="border-style: solid;border-width: medium; float:left;width:50%; height:500px;"></div>