csscss-positionabsolutefluid-images

CSS - absolute positioning and fluid width


I have a div floated next to an image, it's a list of posts. The right div holds information about that particular post in a bulleted list. The div isn't completely fluid but does change width at certain breakpoints. The div I want to have minimum height of what the image is which is always the same size. There are images inside the div at the top and bottom between the content, filigre which I want to display at top and bottom of the div.

I can either have the box extend the length of the image and the position: relative the bottom image so it's fluid OR I can have the image be position: absolute inside the div which is position: relative. That kills the fluidity though.

Can I have both?

Here's my fiddle: http://jsfiddle.net/4Kyye/1/

And the css:

* {
    box-sizing: border-box;
}

.specials-module-inside {
margin: 30px auto 30px auto;
width: 720px;
overflow: auto;
}

.absolute {
    position:absolute;
    bottom: 5px;
}

h3 {
text-align: center;
margin-bottom: 20px;
color: #231f20;
font-family: steelfish, helvetica, arial, sans-serif;
font-size: 30px;
letter-spacing: 3px;
text-shadow: 1px 1px 0 #ffffff, -1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px -1px 0 #ffffff, -2px 2px 0px #d9c09e;
}

.info-box-small {
float: right;
margin: 0;
padding: 5px;
width: 286px;
color: #231f20;
border: 1px solid #5a5655;
min-height: 220px;
position: relative
}

.full-width-image {
width: 100%;
}    

Solution

  • Solved it. Apparently it's a bug but if you relative position the html tag in your css it's fluid AND absolute positioned within the parent container.