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
Related
This question already has answers here:
Is it possible for flex items to align tightly to the items above them?
(5 answers)
Closed 5 years ago.
I want to layout variable-height but fixed-width divs inside a fixed-width and variable-height container, so that the child divs look stacked on one another in a masonry kind of pattern, taking 2 or more columns.
Here's what I want:
And here's what I get with floats or FlexBox:
Here's the code pen: http://codepen.io/anon/pen/xOLwVJ
<div class="container">
<div class="item">
</div>
<div class="item" style="height:250px;">
</div>
<div class="item" style="height:150px;">
</div>
<div class="item" style="height:200px;">
</div>
<div class="item" style="height:180px;">
</div>
</div>
This code is only in reference to CodePen, not meant to represent the 2 images here.
Neither Flexbox nor Floats seem to work. The closest I have come to making it work is using columns, however they cut of child divs in the middle - it's ok for text, but not so for actual boxes.
I want HTML/CSS only solution with no JavaScript.
Turns out it is possible with CSS columns after all. The trick was to set display:inline-block on child elements to prevent child divs being cut in the middle on column wraps.
<div class="container">
<div class="item">
</div>
<div class="item" style="height:250px;">
</div>
<div class="item" style="height:150px;">
</div>
<div class="item" style="height:200px;">
</div>
<div class="item" style="height:180px;">
</div>
</div>
And the CSS:
.container {
margin: 0 auto;
width:600px;
background:#ddd;
display: block;
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.item {
margin:10px;
background:red;
width:270px;
height:100px;
display:inline-block; /* this is to prevent div being cut in the middle when it flows onto the next column */
}
Codepen: http://codepen.io/anon/pen/GqvoBO
this is jsfiddle for your question i hope this is useful for you (https://jsfiddle.net/ahe128/anhw21rj/)
<div id="main">
<div id="coloumn1">
<div id="row1_1">
</div>
<div id="row1_2">
</div>
<div id="row1_3">
</div>
</div>
<div id=coloumn2>
<div id="row2_1">
</div>
<div id="row2_2">
</div>
</div>
</div>
#main{
height:500px;
width:500px;
border:1px solid black;
margin:10px;
}
#coloumn1{
height:400px;
width:200px;
float:left;
margin:10px;
border:2px solid black;
}
#row1_1{
height:150px;
width:150px;
border:1px solid black;
margin:10px;
}
#row1_2{
height:100px;
width:150px;
margin:10px;
border:1px solid black;
}
#row1_3{
height:50px;
width:150px;
margin:10px;
border:1px solid black;
}
#coloumn2{
height:400px;
width:200px;
float:left;
border:2px solid black;
margin:10px;
}
#row2_1{
height:200px;
width:150px;
border:1px solid black;
margin:10px;
}
#row2_2{
height:150px;
width:150px;
margin:10px;
border:1px solid black;
}
Im trying to overlap an element with a absolute position .tools outside of its uppermost parent element #canvas_area which has an overflow:scroll, however this doesn't seem to work, but it does work if you remove the overflow:scroll attribute.
HTML:
<div id="canvas_area">
<div class="container">
<div class="blocks">
<div class="tools">
x
</div>
</div>
<div class="blocks">
<div class="tools">
x
</div>
</div>
</div>
</div>
CSS:
#canvas_area{
overflow:scroll; // remove this and it works
height:400px;
width:400px;
background-color:black;
margin: 0 auto
}
.container{
position:relative;
}
.blocks{
overflow:hidden;
width:200px;
height:100px;
background-color:white;
margin-bottom:10px;
}
.tools{
position:absolute;
color:green;
left:-40px;
}
I need #canvas_area to have a scroll, is their a way around this?
here is the jsfiddle: https://jsfiddle.net/2exn6oq5/
remove overflow:scroll from #canvas_area and you will see the green x outside the body, which is what I want it to do.
I'm trying to align a div within my page so that it sits directly in the centre at all times. I've searched the site, but can't see any solutions for centring in the page rather than just a div.
Using bootstrap (3.2.0) I can centre it horizontally, but not vertically!
Here is my code so far:
HTML
<div class="slide">
<div class="container">
<div class="row">
<div class="logo col-md-4 col-md-offset-4">
<p>Test</p>
</div>
</div>
</div>
</div>
CSS
.logo {
border: solid;
border-color: red;
border-width: 5px;
height: 200px;
}
I tried verticle-align: middle;, margin:auto; & margin-top:auto; margin-bottom:auto; to no effect.
The closest I can get is to use margin-top: 20%; but this doesn't shrink as the page height does.
There is no magical way in bootstrap to do it. You need a helper div wrapper in order to immolate a table structure.
<div class="slide">
<div class="container">
<div class="row">
<div class="logo col-md-4 col-md-offset-4">
<div class="helper">
<span>Test</span>
</div>
</div>
</div>
</div>
</div>
.logo {
border: solid;
border-color: red;
border-width: 5px;
height: 200px;
}
.helper{
background:#ccc;
width:100%;
height:100%;
text-align:center;
display:table;
}
span{
display:table-cell;
vertical-align:middle;
}
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.
This question is best explained with a screenshot:
http://i42.tinypic.com/2ccvx91.jpg
The wrapper div has a background image of a city.
#wrapper {
background:url('city.jpg');
}
Inside that div is a bunch of other divs of class 'square':
.square {
width:40px;
height:40px;
background-color:#27272f;
opacity:.8;
margin:2px;
}
You can see through the squares to the city because of the opacity. But you can also see through the spaces in between the squares, which I don't want it to do. I want to only be able to see through the divs to the element behind it, with the spaces between them being solid black. How can I do this?
Thanks.
best bet is remove margin.. and give your div border of 2 px..
What about setting the border and using a wrapper div to hide the corners. You have to have a negative margin for the overlap to work though
Here is the adapted jsfiddle from animuson:
<div id="wrapper">
<div class="hidingborder">
<div class="square"></div>
</div>
<div class="hidingborder">
<div class="square"></div>
</div>
<div class="hidingborder">
<div class="square"></div>
</div>
<div class="hidingborder">
<div class="square"></div>
</div>
<div class="hidingborder">
<div class="square"></div>
</div>
</div>
and here is the css
#wrapper {
background:Green;
font-size:0;
}
.square {
width:40px;
height:40px;
background-color:#27272f;
opacity:.8;
border:2px solid black;
border-radius:5px;
display:inline-block;
margin:-2px;
}
.hidingborder
{
border:#27272f solid;
display:inline-block;
}