I have a wrapper with border radius. Inside the wrapper I have a absolute positioned image in the top right corner. My problem is that the image doesn't crop/hide under the wrapper with border radius. I've tried overflow:hidden on the wrapper but it doesn't work. See image below.
Image tag is not affected by border-radius.
Your best bet is to use the picture as a background like:
<div id="someimage" style="background:url('image.jpg');border-radius: 5px; height: 200px; width: 500px;"></div>
The element(in above example a div) should contain the size of the actual image), and unless you use CSS3, the image cannot be resized like <img> tag
You could use a separate absolutely positioned <div> for the border so that you can place the border above your absolutely positioned image. For example:
<div id="wrapper">
<div id="inner">
<img id="i" width="75" height="75" src="http://placekitten.com/75/75">
</div>
<div id="border"></div>
</div>
And some CSS (WebKit border radius properties only, the rest are left as an exercise for the reader):
#wrapper {
position: relative;
}
#inner {
margin: 2px; /* Make room for the border */
width: 200px;
height: 200px;
position: relative;
}
#border {
-webkit-border-radius: 5px;
border: 2px solid black;
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
#i {
position: absolute;
top: 0;
right: 0;
}
And the usual example: http://jsfiddle.net/ambiguous/6e622/
The <div id="border"> is certainly a hack (and I feel a bit dirty for coming up with it) but maybe it will work for you.
Related
Say for example we have an element (let's call it contact-box) that is always on the right of the page and we want a series of different width images to run along side it's left hand side. The right hand edge of each image should always be 20px from the left hand edge of the contact-box.
If we know the width and positioning of the contact-box and we set the right attribute on the images then it calculates from the left hand edge of the image rather than the right. This is not going to achieve the desired result as the images are of variable width.
Is there a way to switch this behaviour on a per element basis to flow from right to left instead or is the only way to grok it in javascript?
Edit: To be clear - The right edge of the images align 20px to the left of the left edge of the contact-box container element. Images are variable width and responsive as is the contact-box.
The image below is an example of how the elements might be positioned.
Now I think I understand! Make the image a child of contact-box. Set contact-box to position:relative, and the child image to position:absolute. Now set the image to right:100% and give it a right-margin of 20px.
<div class="contact-box">
contact-box
<img class="goLeft" src="http://placehold.it/350x150" />
</div>
And in CSS:
.contact-box {
width: 200px;
height: 200px;
float: right;
position: relative;
background-color: #ccc;
}
.contact-box img.goLeft {
position: absolute;
right: 100%; /* aligns the right edge of the image to the left edge of the container*/
margin-right: 20px; /* adds 20px spacing between the image and the container */
}
I floated the contact-box element to the right for the purpose of this demonstration, but it doesn't need to be floated for this to work.
Example:
https://jsfiddle.net/qvgknv4g/
* Alternative Solution *
You can also make use of CSS's direction property, and set it to rtl (for right-to-left). This will use the browser's natural rendering flow, and the image is instead a sibling of contact-box:
<div class="outer">
<div class="contact-box">
contact-box
</div>
<img class="goLeft" src="http://placehold.it/180x150" />
</div>
And the CSS:
.outer {
direction: rtl; /* This makes the magic happen */
border: solid 1px #000;
}
.contact-box {
width: 200px;
height: 200px;
background-color: #ccc;
display: inline-block;
}
img {
vertical-align: top; /* by default the image will render bottom-aligned to the text in conten-box. This fixes that. */
margin-right: 20px;
}
Example:
https://jsfiddle.net/qvgknv4g/2/
You will need to position the image inside the contact box and assign position: absolute; to it. Make sure the contact box container has position: relative; orabsolute`, otherwise positioning of the image will not work as expected.
Then apply the contact box's width + your 20px to the right attribute.
.contactbox {
position: relative;
}
.contactbox img {
position: absolute;
right: 220px; /* example in case your box is 200px wide */
top: 0;
}
Ofc, this only works if your contactbox doesn't have overflow: hidden;.
Your question isn't super clear, but I think this is what you're asking for:
If you can add a wrapper around your images, you can set the wrapper to a width of however far from the left-hand edge you want, then float the images to the right.
In your case it would be something like:
HTML
<div id="contact-box">
<div id="container">
<img src="http://placehold.it/350x150" />
<img src="http://placehold.it/250x100" />
<img src="http://placehold.it/300x100" />
<img src="http://placehold.it/200x150" />
</div>
</div>
CSS
#container {
width:20px;
}
img {
float:right;
}
Here's an example: http://jsfiddle.net/3hxjp89r/
Keep in mind that in the fiddle above I tweaked the numbers just to show how it works. If you truly want the images 20px from the edge and right-aligned, then change the width of the #container div.
if I understand correctly, you have a contact-box on the right of the page, and you want a column of images floated right, and each exactly 20px away from the contact-box.
Sounds simple enough:
#contact-box {
display: inline-block;
vertical-align: top;
position: relative;
width: 20%;
height: 200px;
background-color: #fda;
font-size: 24px;
text-align: center;
}
#images {
display: inline-block;
vertical-align: top;
padding: 0;
margin: 0;
width: 80%;
background-color: #eee;
}
#images > img {
float: right;
clear: both;
margin: 0 20px 20px 0;
border: 1px solid #ccc;
background-color: #123;
font-size: 16px;
color: #fff;
text-align: center;
}
<div id="images">
<img width="200" height="150" alt="one">
<img width="240" height="150" alt="two">
<img width="200" height="150" alt="three">
<img width="360" height="150" alt="four">
<img width="210" height="150" alt="five">
</div><div id="contact-box">
Contact Box
</div>
I need to define a div that is preceded by any number of elements with arbitrary height, but it should fill the remaining space until the bottom of the fold.
The way I thought about doing this is to position the top with relative and the bottom with absolute, but I'm not sure if that's even possible in CSS.
#header {
border: 1px solid green;
width: 100%;
height: 100px;
}
#fill-the-fold {
border: 1px solid red;
position: absolute;
height: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div id="header"></div>
<div id="fill-the-fold"></div>
Basically, I want the red container to start below the green and fill the space to the bottom of the page.
Any help on how to accomplish that, or if there's any easier way to go about it, much appreciated.
This is answered here.
In short - use flexbox if you can. Key items:
you'll need a flexbox wrapper around your 2 divs, with flex-direction: column
add flex-grow: 1 to #fill-the-fold.
Another possibility I couldn't see mentioned in the link above is to oversize the second div and chop off the bottom with a wrapper - fiddle. This is obviously only good when you don't mind losing the bottom of your second div.
You can reach your purpose by applying margin trick.
JSFiddle
HTML:
<div id="header"></div>
<div id="fill-the-fold">
<div id="content">
</div>
</div>
CSS:
html,body{ margin:0px; height:100%;}
div{
box-sizing: border-box;
}
#header {
border: 1px solid green;
width: 100%;
height: 100px;
}
#fill-the-fold {
margin-top: -100px; /* shifting it covers head */
padding-top: 100px; /* shifting the content under the head */
height: 100%;
}
#content{
border: 1px solid red;
height: 100%;
}
Append your red-border part after the head, and shifting it by negative margin. Then write your real content in the inner one.
Is there a way to position an element relative to an img tag?
Of course I can make this image inside a div, and then position the element relative to this div. But let's say the image is already positioned, and i don't want to add other elements.
Here's a sample: http://jsfiddle.net/bortao/MQf3D/
The blue div should go on the left top corner of the image (0px/0px)
HTML
<img class="im" />
<div class="di">Absolute</div>
CSS
.im {
position: relative;
left: 20px;
top: 60px;
}
.di {
position: absolute;
left: 0px;
top: 0px;
border: solid 1px blue;
}
You can actually use the image's class as the parent div of the image and the text:
<div class="outer">
<div class="im">
<img src="http://placekitten.com/200/300">
<div class="di">Absolute</div>
</div>
</div>
Fiddle: http://jsfiddle.net/MQf3D/2/
html code
<body>
<div id="container">
<div id="left">
<h2>rerererere</h2>
</div>
<div id="right">
<h2>sdadsad</h2>
</div>
</div>
</body>
CSS file
div#container {
position: relative;
border: 1px solid #000;
}
#left {
position: absolute;
width: 480px;
height: 480px;
border: 1px solid #0092ef;
/* blue*/
}
#right {
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
width: 250px;
border: 1px solid #783201;
/* brown*/
}
when I only use right div as absolute than there is no problem . But when I use absolute in both left and right div. right div becomes as small as line. I am new to css . So this might be a noob question . Why if I put two absolute div under a relative div does not work ? Please help me out.
Your right <div> collapses because you haven't declared a fixed height for it in your CSS, that's all.
Your right div has no height.
Here is a jsfiddle with your right div with a height
Your right div has no height specified which is why it collapses to the line height.
Plus remove bottom: 10px; on the right div as this is redundant as there is a top value already specified.
I have 3 levels of div:
(In green below) A top level div with overflow: hidden. This is because I want some content (not shown here) inside that box to cropped if it exceeds the size of the box.
(In red below) Inside this, I have div with position: relative. The only use for this is for the next level.
(In blue below) Finally a div I take out of the flow with position: absolute but that I want positioned relative to the red div (not to the page).
I'd like to have the blue box be taken out of the flow and expand beyond the green box, but be positioned relative to the red box as in:
However, with the code below, I get:
And removing the position: relative on the red box, now the blue box is allowed to get out of the green box, but is not positioned anymore relative to the red box:
Is there a way to:
Keep the overflow: hidden on the green box.
Have the blue box expand beyond the green box and be positioned relative to red box?
The full source:
#d1 {
overflow: hidden;
background: #efe;
padding: 5px;
width: 125px;
}
#d2 {
position: relative;
background: #fee;
padding: 2px;
width: 100px;
height: 100px;
}
#d3 {
position: absolute;
top: 10px;
background: #eef;
padding: 2px;
width: 75px;
height: 150px;
}
<br/><br/><br/>
<div id="d1" >
<div id="d2" >
<div id="d3"></div>
</div>
</div>
A trick that works is to position box #2 with position: absolute instead of position: relative. We usually put a position: relative on an outer box (here box #2) when we want an inner box (here box #3) with position: absolute to be positioned relative to the outer box. But remember: for box #3 to be positioned relative to box #2, box #2 just need to be positioned. With this change, we get:
And here is the full code with this change:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
/* Positioning */
#box1 { overflow: hidden }
#box2 { position: absolute }
#box3 { position: absolute; top: 10px }
/* Styling */
#box1 { background: #efe; padding: 5px; width: 125px }
#box2 { background: #fee; padding: 2px; width: 100px; height: 100px }
#box3 { background: #eef; padding: 2px; width: 75px; height: 150px }
</style>
</head>
<body>
<br/><br/><br/>
<div id="box1">
<div id="box2">
<div id="box3"/>
</div>
</div>
</body>
</html>
There's no magical solution of displaying something outside an overflow hidden container.
A similar effect can be achieved by having an absolute positioned div that matches the size of its parent by positioning it inside your current relative container (the div you don't wish to clip should be outside this div):
#1 .mask {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
overflow: hidden;
}
Take in mind that if you only have to clip content on the x axis (which appears to be your case, as you only have set the div's width), you can use overflow-x: hidden.
I don't really see a way to do this as-is. I think you might need to remove the overflow:hidden from div#1 and add another div within div#1 (ie as a sibling to div#2) to hold your unspecified 'content' and add the overflow:hidden to that instead. I don't think that overflow can be (or should be able to be) over-ridden.
If there is other content not being shown inside the outer-div (the green box), why not have that content wrapped inside another div, let's call it "content". Have overflow hidden on this new inner-div, but keep overflow visible on the green box.
The only catch is that you will then have to mess around to make sure that the content div doesn't interfere with the positioning of the red box, but it sounds like you should be able to fix that with little headache.
<div id="1" background: #efe; padding: 5px; width: 125px">
<div id="content" style="overflow: hidden;">
</div>
<div id="2" style="position: relative; background: #fee; padding: 2px; width: 100px; height: 100px">
<div id="3" style="position: absolute; top: 10px; background: #eef; padding: 2px; width: 75px; height: 150px"/>
</div>
</div>