<div id="map1" style=" float: left; margin-left: 150px; border:2px solid grey;">
<div id="red">
<div id="green"></div>
<img id="map_img" src="images/map/location-map-small.gif" alt="map">
</div>
</div>
#map1{
margin-top: 10px;
margin-left: 100px;
width : 400px;
height : 400px;
overflow: hidden;
z-index: 105;
}
#green{
background: url("location-map-large.gif");
background-position: 0px 0px;
background-color: green;
height: 100px;
width: 100px;
position: absolute;
overflow: hidden;
display : none;
border: 2px solid grey;
}
#red{
height: 400px;
width: 400px;
overflow: hidden;
position: absolute;
}
I have two divs showing the zooming effect styled as listed below. The problem is that there isn't any effect of adding "margin-left" style to the "map1" element, what should I do to place it according to my requirement?
Add 'position:relative' to map1 CSS and then use the left property to position green and red.
#map1 {
background: blue;
width : 400px;
height : 400px;
position: relative;
}
#green {
background: green;
height: 100px;
width: 100px;
position: absolute;
left: 50px;
}
See result here:
http://jsfiddle.net/u4j2F/
you can position the element width padding
Live Demo here
this for my successors. :) in this case i used positioning : relative for the id "map1" and used left instead of margin-left and got my job done.
Related
In Chrome 60.0.3112.90(64-bit).
My system is macOS 10.12.4
As you can see, the blue box is overflow. How can I solve this problem? And why does it overflow?
Please check this JSFiddle
or this is my code.
.outer {
width: 200px;
height: 200px;
border-radius: 10px;
border: 1px solid black;
position: absolute;
overflow: hidden;
}
.inner {
width: 200px;
height: 200px;
position: relative;
overflow: scroll;
background-color: lightblue;
}
.inner2 {
width: 200px;
height: 400px;
background-color: lightgray;
}
.inner3 {
width: 200px;
height: 100px;
position: absolute;
background-color: blue;
}
<div class="outer">
<div class="inner">
<div class="inner2">
<div class="inner3"></div>
</div>
</div>
</div>
You can apply z-index: 1 to .outer CSS class.
You can also try this solution, it's used a lot by other guys.
You have here a working demo
i have two divs
first div : text-logo
.text-logo {
width: 250px;
height: 60px;
margin: auto;
border: 2px solid #07a2a0;
border-radius: 15px 50px 15px 50px;
margin-top: 100px;
}
<div class="text-logo"><h4>Just training/cit</h4></div>
second div : image-logo
.image-logo { overflow: hidden; height: 500px;}
.image-logo .left
{
float: left ;
width: 30%;
position: relative;
}
.image-logo .right
{
float: left;
width: 70%;
}
.image-logo .left img
{
width: 180px;
height: 180px;
position: relative;
bottom: 50px;
}
<div class="image-logo">
<div class="left">
<img src="images/logo.png">
</div>
<div class="right">
<h2>Being auomated much more easy than the manual things
</h2>
<hr>
</div>
i cant see the blue logo with the original size, the upper part of the logo is hidden ,
the picture will show you the problem
,
Try to add z-index
.image-logo .left img
{
width: 180px;
height: 180px;
position: relative;
bottom: 50px;
z-index:2;
}
That's because the div .text-logo is above your logo div. You should change the z-index of one of them. It defines which element should be above another element. Use for your z-index a realistic value, to keep your code a bit cleaner.
.image-logo .left img {
width: 180px;
height: 180px;
position: relative;
bottom: 50px;
z-index:5;
}
Check that the element's color is not the same as the background color, as that will obviously make you not to see your element.
I have been a victim of this severally. Hope it helps someone.
I want the blue div (as shown in the fiddle below) to be to the right of the red div. Instead it's below. If I set parent to overflow: hidden, it's still below and just hides it.
EDIT: In simplifying my code, I left out the display: table on my text div. I have added that in here: http://jsfiddle.net/z1385n05/3/
http://jsfiddle.net/z1385n05/
http://jsfiddle.net/z1385n05/1/ (with overflow: hidden)
HTML:
<div class="outer">
<div class="parent">
<div class="child1">1</div>
<div class="child2"><span>Child 2 is longer than the edge, I don't want it to wrap</span></div>
</div>
</div>
CSS:
.outer
{
position: relative;
width: 320px;
height: 480px;
border: solid 1px #cccccc;
}
.parent
{
position: absolute;
top: 100px;
left: 150px;
height: 20px;
overflow: visible;
}
.child1
{
position: relative;
width: 30px;
height: 100%;
float: left;
background-color: red;
}
.child2
{
position: relative;
height: 100%;
float: left;
background-color: blue;
white-space: nowrap;
overflow: hidden;
display: table;
}
.child span
{
position: relative;
width: 100%;
vertical-align: bottom;
display: table-cell;
}
After your updated question you can achieve this if you set parent display:table and .child2 display:table-cell
.parent
{
position: absolute;
top: 100px;
left: 150px;
height: 20px;
overflow: hidden;
display:table;/*Add this*/
}
.child2
{
position: relative;
height: 100%;
background-color: blue;
white-space: nowrap;
display: table-cell;/*Add this*/
overflow: hidden;
}
fiddle
The reason why the blue box is floating below the red box is because there is not enough horizontal space for them to be side by side.
To solve this there are 2 solutions:
1) increase the width of .outer until the boxes are side by side
For example:
.outer
{
position: relative;
width: 620px;
height: 480px;
border: solid 1px #cccccc;
}
Or
2) increase the width of .parent until the boxes are side by side
For example:
.parent
{
position: absolute;
top: 100px;
left: 150px;
height: 20px;
overflow: visible;
width: 620px;
}
Your outer div is too small to accomodate text without wrapping.
Try this, increase width, tested on jsfiddle you posted:
.outer
{
position: relative;
width: 620px;
height: 480px;
border: solid 1px #cccccc;
}
Cheers !!
html:
<div class="outside">
<div class="inside">
</div>
</div>
I have two CSS : #1 and #2
/*CSS#1 does not work*/
.outside{
background: blue;
width: 400px;
height: 400px;
}
.inside{
background: red;
width: 200px;
height: 200px;
position: relative;
top: 50%;
margin: 0 auto;
margin-top: -100px; /*half height of this div*/
}
/*CSS#2 works well */
.outside{
border: 1px solid black;
width: 400px;
height: 400px;
}
.inside{
background: red;
width: 200px;
height: 200px;
position: relative;
top: 50%;
margin: 0 auto;
margin-top: -100px; /*half height of this div*/
}
My aim is to place the 'inside' div at the center of the 'outside' div (both vertical and horizontal). I have a lot of ways to achieve this aim, however I found something strange during the process.
I found that CSS#2 works quite well, but CSS#1 does not work: when setting the 'inside' div 'margin-top: -100px', the 'outside' also moves up..
Here is the demo
So I am wondering why 'border' works well here and why 'background' does not work?
You need to add overflow: auto; to the parent element there, but however your approach is incorrect, you need to position your child element absolute to the parent element and not relative
Demo
Using overflow: auto; or border will fix your issue as it prevents collapsing of the parent margin.
Try this. You need to set top and left as 25 %. I have tested it on ie 11 and crome.It is working fine.
.outside{
background: blue;
width: 400px;
height: 400px;
}
.inside{
background: red;
width: 200px;
height: 200px;
position: relative;
top: 25%;
left:25%;
}
first of all is there a good tutorial about positioning elements which really explains what's going on? I've read multiple but can't get a grip on it.
the specific problem I have is as follows:
I have a header div-element (in red) with underneath 2 columns(white and green). Normally with float:left; i can position the elements next to each-other. But now I want one (the white one) to move a bit over the header als shown.
with relative positioning with a negative top value I can get the white one at the right position but how to position the second column. When adjusting the browser size it al gets messed up.
#Column1
{
float: left;
position: relative;
top: -140px;
background-color: #FFFFFF;
left: 70px;
width: 280px;
min-height: 500px;
padding: 10px;
}
#Column2
{
float: left;
width: 800px;
background-color: #00FF00;
}
Here is JSFiddle that demonstrates your layout without floats using position absolute.
In my experience position absolute is more flexible and made for this kind of layouts, especially when you want to dock elements using top, right, bottom and left.
There are circumstance where you need to fallback on using floats, but in this case it is not needed.
Use floats to float things around it and position absolute to dock things.
The HTML
<div id="Header">header</div>
<div id="Column1">Left</div>
<div id="Column2">Right</div>
The CSS
#Header {
background-color: red;
height: 200px;
}
#Column1 {
position: relative;
background-color: #FFFFFF;
top: -140px; left: 70px;
width: 280px;
min-height: 500px;
}
#Column2 {
position: absolute;
background-color: #00FF00;
left: 350px; top: 200px; right: 0;
min-height: 360px;
}
Update Remove display:none from the .more class in the JSFiddle and see that the containers are flexible as well.
I'm just gonna spitball here:
HTML
<div id="red"></div>
<div id="white"></div>
<div id="green"></div>
CSS
#red {
width: 100%;
float: left;
height: 100px;
position: relative;
background-color: #f00;
}
#white {
width: 20%;
float: left;
margin-left: 4%;
margin-top: -40px;
position: relative;
background-color: #fff;
height: 400px;
}
#green {
width: 76%;
float: left;
position: relative;
background-color: #0f0;
height: 400px;
}
Does it work?
You could just use a minus margin
http://jsfiddle.net/gAKAK/
This is kind of a complex request, so don't feel bad that you weren't able to figure it out. You shouldn't have to set the width of anything other than your sidebar for this solution; my solution relies on an uncommon use of overflow: hidden to achieve this.
http://jsfiddle.net/Wexcode/uBQEu/
HTML:
<div id="header"></div>
<div id="white"></div>
<div id="green"></div>
CSS:
#header {
background: red;
height: 70px;
border: 1px solid #000; }
#white {
background: #fff;
float: left;
margin: -30px 0 0 70px;
width: 100px;
height: 230px;
border: 1px solid #000; }
#green {
background: green;
overflow: hidden;
height: 201px;
border: 1px solid #000;
border-top: 0;
border-left: 0; }