how would I go about placing an image vertically between 2 section divs so that I can accomplish the following:
Set the exact width in which the image overlaps the section. Example - I want 30% of the height of the image to be part of the top div and 70% of the height of the image to be on the bottom div
Have consistency on all screen sizes/browsers for the above goal
Here's an example to illustrate what I mean:
From what I've read and seen, a lot of people just set margin to be a negative pixel amount or use top/bottom and set a pixel amount but i dont think this is compatible across screen sizes
thanks a lot for the help, it means a lot
Try this you can insert image in div having id img
#div1{width:400px;height:100px;background:red;}
#div2{position:relative;width:400px;height:100px;background:yellow;z-index:1;}
#image{width:40px;height:40px;background:green;position:relative;
margin-left:180px;margin-top:-20px;margin-bottom:-20px;z-index:2}
<div id="div1"></div>
<div id="image"></div>
<div id="div2"></div>
USING % FOR WIDTH
#div1{position:relative;width:50%;height:100px;background:red;z-index:2;}
#div2{position:relative;width:50%;height:100px;background:yellow;z-index:1;}
#image{position:absolute;bottom:-20%;/* 2/3=66.6 */
left:35%;z-index:4;
width:30%;
height:30%;background:green;
}
<div id="div1"> <div id="image"></div></div>
<div id="div2"></div>
You can add 2 parents around the image element, one with position:relative; and another (nested div) with position:absolute;. then for img tag, apply margin-top:-30%; to place it at desired position.
To center the image: we set left:50% to inner div (parent of image) and set margin-left:-50%; for image as shown here:
#div1 {background: #e0f0e0; padding: 1em;}
#div2 {background: #e0e0f0; padding: 1em;}
#divImg {position:relative; border:1px solid red; }
#divImg2 {position:absolute; border:1px solid blue; left:50% }
#divImg img { margin-left:-50%; margin-top:-30%; }
<div id="div1">Section 1<br/>Contents of div1 ...<br/><br/>123<br/>456<br/></div>
<div id="divImg">
<div id="divImg2">
<img src="http://triptopersia.com/wp-content/uploads/2016/04/Iranian-Cheetah-2.jpg" style="width:150px" />
</div>
</div>
<div id="div2">
Section 2<br/>Contents of div2 ...<br/>
<br/>
ABCD<br/>EFGH<br/>
123<br/>456<br/>
</div>
The red line indicates border of first position:relative div (divImg)
The blue line indicates border of second position:absolute div (divImg2)
The final position of img element is shifted relative to second div by margin-left:-50%; margin-top:-30%;
Related
I have got a ul list which has several li elements which need to be floated left.
Each li contains an image of variable height either 150px or 200px. So what we get is multiple boxes(li) with images inside them.
This is the exact html inside an li
<li class="photo">
<a href="#" class="photo-link">
<img src="http://familytrees.genopro.com/MrSpock/pictures/200x150.jpg" class="photo-img">
<span class="photo-title">MrSpock</span>
</a>
</li>
Now if an image in any of the li elements is of height 200px and the adjacent li has an image of height 150px, the li with image 150px height stacks up on the top right edge of the li with 200px height. ( Remember both are floated left)
I want the li elements to stack up as if they were boxes of diff height kept on a floor.
Restrictions : I cannot change this html, there can be multiple li elements in which case the images flow to the next row. We do not know in advance if all the images in a row will be of same or diff height.
Is there a CSS only solution possible for this ? Heres a link to my problem :
https://dl.dropboxusercontent.com/u/88049315/home.html
I want the containers in the first row to all align at the bottom.
What about this fiddle?
<div id="container">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
#container
{
width:200px;
height:200px;
background-color:#333;
display:table-cell;
vertical-align:bottom
}
.content
{
width:48px;
height:48px;
background-color:red;
float:left;
margin: 1px;
}
As long all the floating content together does not have a width larger then the container everything is fine. After that the float functionality takes over and positions the first line one row above the bottom.
Otherwise you could rotate the conainer div so all content in it goes with it. This is more of a hacky way and can cause issues further down the line. The Fiddle
I need to place 2 fixed width DIVs side by side inside another big fixed width DIV and it is working. This is the code that I have written :
<div id="mainDiv">
<div id="divLeft"> <img src="bla bla bla" > </div>
<div id="divRight"> Normal Text Here..... </div>
</div>
This is the CSS:
#mainDiv { width:1100;overflow:hidden; }
#divLeft { width:720; float:left;}
#divRight { width:380; float:right;}
The problem is, when I placed the image of size 720X480 into the first DIV, the height of the first DIV ("divLeft") is becoming 485. Why its giving an extra
5px ?
You can view the page here : http://www.touchmedia.ca/TestPos.php
Please Note the following:
I did overflow:hidden for the main div, b'cos, otherwise, the float will remove the effect of outer div.
I have hardcoded only the width and not the height.
main div width (1100) = left div width (720) + right div width (380)
Thanks a lot,
Isaac
Add:
#divLeft img {
display: block;
}
add this to your style sheet:
body{
margin:0;
padding:0;
}
Why does the parent div of the image have a few extra pixels at the bottom. How can I remove the pixels without hard code the parent div height.
http://jsfiddle.net/6x8Dm/
HTML
<div class="wrapper">
<div class="column">
<img src="http://www.lorempixel.com/200/200/" />
</div>
</div>
CSS
.wrapper {
width:200px;
margin:0 auto;
}
.column {
width:100%;
background:#cc0000;
}
img {
width:100%;
}
That space actually is a result of descender elements in fonts. You can get rid of it in a number of ways:
add a vertical-align:top rule to the image jsFiddle example
add font-size:0; to the containing div jsFiddle example
add display:block; to the image jsFiddle example
One way is by setting display:block on the img, causing it to fill the parent.
jsFiddle here - it works.
img {
width:100%;
display:block;
}
Alternatively, if you don't like that approach, you can also change the vertical alignment, as the default is baseline.
I want a border of Div to be less than the width of div. How to implement that in CSS?
Following image will give you more Clarity:
http://imageshack.us/photo/my-images/440/divkr.jpg/
This is not possible with plain CSS.
You could however use two div's to get this effect.
<div class="outer">
<div class="inner">
text
</div>
</div>
.outer
{
background-color:blue;
padding:20px;
width:200px;
}
.inner
{
border:solid 1px white;
height:150px;
color:white;
}
http://jsfiddle.net/RreTH/
http://jsfiddle.net/RreTH/1/
That is not possible.
Border is always the outside of element's box model. However there might be a workaround you would like.
<div>
<div id="inner" style="border:5px #000 solid;">
</div>
</div>
Now, in this example, the border of #inner, will never exceed that of the parent.
As for the demonstration part, check this.
You will notice, the outer div has a thin red line to mark its border, but the inner div's border can act as outer div's inner border.
Hope it helps
<style>
.header {
float:left;
width:50%;
border:1px solid black;
}
</style>
<div style="width:100%;">
<div class="header">Hello</div>
<div class="header">World</div>
</div>
I want the two inner divs to appear beside each other fitting perfectly inside the parent. This happens when there is no border set on them, but when I do set a border, the second div wraps and appears below. How do I avoid that?
The reason this happens is because 50% x 2 is already 100%. The 2 px borders make the width 100% + 4 px. To undo this, use negative margins of 1px on either sides.
Demo: http://jsfiddle.net/rfSMX/1/
You may run into the 100% combined width issue in IE.
Essentially, what is happening is that your div's are sized 50% + 2 pixels (one for each border) wide. Because (50% + 2 pixels) * 2 is wider than your 100% container, it forces the floats to wrap.
Applying a -1 pixel margin to the left and right sides of your .header div's should do the trick.
Add an extra div inside the divs that need a border called header-inner.
<style>
.header {
float:left;
width:50%;
}
.header-inner {
padding: 10px;
border: 1px solid #ccc;
}
</style>
<div style="width:100%;">
<div class="header"><div class="header-inner">
Hello
</div></div>
<div class="header"><div class="header-inner">
World
</div></div>
</div>
This could work:
because you don't need to float the second div it should fill up any space that is left after the first div. This allows you to add a border and still have them flush side-by-side