CSS float margins between image and text - css

Question

Apologies if this is something trivial, but I can't seem to find a way around this.
So I have this very simple layout. 2 div elements floated to the left and one to the right. On the right there is an image, while on the left there is the text. At the top of the text part (also on the left) I want to have another div just a one liner, with a different background colour with the article's details, such as the author, the date etc.
<div id="mainarticle">
<article>
<div id="mainimgcontainer">
<img id="mainimage" src="theimage.jpg" />
</div> <!-- #mainimgcontainer -->
<div id="mainarticle_details">
<span id="by">BY JOE BLOGGS</span><span class="mainarticle_date">11/04/2014</span>
</div><!-- #mainarticle_details -->
<div id="maintext">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div> <!-- #maintext -->
</article>
</div> <!-- #mainarticle -->
The right column with the image will be 50% of the screen width. The rest will flow beside it and under it.
#mainimgcontainer
{
width: 50%;
float: right;
margin-left: 10px;
}
div#mainarticle_details
{
background-color: #f7f2e7;
border-bottom: 2px solid #dac397;
display: block;
line-height: 22px;
padding-left: 10px;
padding-right: 10px;
vertical-align: bottom;
overflow: auto;
height: 23px;
}
img#mainimage
{
width: 100%;
min-width: 100px;
margin: 0px;
padding: 0px;
max-height: 32%;
}
Now, in order for the main text not to touch the image, I put a margin-left : 10px; on the image. However, This also puts a gap between the top #mainarticle_details and the image. I wish these 2 to touch each other.
On the other hand, if I add a padding-right or margin-right to just to the #maintext, it only applies to when the text is taking the full width, and the text still touches the image.
Is there any way to make the top #mainarticle_details touch the image, but the text spaced 10px from the image?
I created a jsfiddle here: http://jsfiddle.net/A7uSr/29/
UPDATE
Forgot to mention, this is intended for a mobile website. So it needs to work for varying screen widths. fixed positioning is also very buggy on mobile devices like the stock Android browsers (not Chrome) so keep that in mind too. This will eventually be the landscape view of the article (the portrait view will just have the image at the top and text underneath). For this reason the image has to be on top of the text, and CSS will just move it to the side when the device is turned to landscape mode.
I also added some more details from my real scenario which I realised will effect the solution. Mainly the padding of the containing div and the size of the image.
JSFiddle also updated.

Answer 1

I had success by setting the header to position:absolute and width:100%. This allows the header to extend behind the image, making it appear to touch the image while the text retains a 10px margin.
I moved the image above the header in the HTML to avoid having to set z-index.
I also set a CSS definition for the image, making it respect its container's percentage width.
WORKING EXAMPLE (jsfiddle)
HTML:
<div id="mainarticle">
<article>
<div id="mainimgcontainer">
<img src="http://imgsv.imaging.nikon.com/lineup/lens/specoalpurpose/micro/af-s_vr_micro-nikkor_105mmf_28_if/img/sample/sample_l.jpg" />
</div>
<!-- #mainimgcontainer -->
<div id="mainarticle_details"> <span id="by">BY JOE BLOGGS</span></div>
<!-- #mainarticle_details -->
<div id="maintext">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Nam blandit lectus quis vestibulum blandit. Nunc viverra lectus eget tristique tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc imperdiet porta tincidunt. In vitae felis volutpat nisi pulvinar aliquam. Ut tempor sagittis congue. Aenean at commodo lorem. Ut faucibus tellus egestas facilisis dictum. Quisque eget mi et elit tincidunt porttitor. Pellentesque egestas libero sit amet urna sodales, non hendrerit lorem tempus. Donec risus enim, convallis in hendrerit sed, dapibus at purus. Vestibulum eu nisl at velit placerat mollis sed quis neque. In hac habitasse platea dictumst. Vestibulum venenatis at lacus a ullamcorper. Integer eget lectus id tortor bibendum imperdiet.</p>
<p>Maecenas consectetur eros erat, quis pharetra nulla ornare eget. Nam ac risus porttitor, fringilla quam eu, cursus lacus. Cras adipiscing enim vitae leo dictum, at varius sapien bibendum. Quisque consequat suscipit purus, ac luctus ipsum volutpat ut. Nam fermentum tristique turpis. Sed semper orci et turpis placerat, non tincidunt est eleifend. Aenean a ligula eu libero facilisis scelerisque sit amet fringilla sapien. Aenean dictum ante orci, vel facilisis metus posuere ut. Maecenas sed odio ut velit tincidunt venenatis in ut lacus. Pellentesque condimentum tellus eu mollis hendrerit. Mauris adipiscing arcu ut fringilla aliquam. Nullam ultricies ac est nec cursus. Morbi vitae leo id nisi placerat tincidunt. Ut pulvinar, justo vel euismod aliquet, urna lorem feugiat metus, sit amet sagittis ipsum nibh quis augue. Vestibulum quis convallis turpis. Aenean fringilla ut nulla et laoreet.</p>
<p>Nunc id nibh neque. Fusce ultricies quam vehicula elit dictum convallis. Aenean auctor, massa venenatis ullamcorper semper, ante purus vestibulum lacus, a ullamcorper arcu enim sit amet ante. Nulla aliquet vel lacus eu vulputate. Morbi elit metus, laoreet vel nunc at, consectetur pellentesque lectus. Ut blandit mi in odio sollicitudin, sit amet sodales lorem sollicitudin. Suspendisse lobortis urna sit amet faucibus posuere. Mauris cursus ac neque vitae malesuada. Curabitur a lorem ut nisi vestibulum scelerisque a id risus. Nulla mattis rhoncus congue. Quisque nec dolor nulla. Sed tempus nisl aliquam, pellentesque lacus in, faucibus felis. Nulla sit amet arcu rhoncus, blandit nunc sit amet, tincidunt erat.</p>
<p>Sed vehicula enim velit, vitae fermentum felis consectetur nec. Sed sollicitudin vehicula leo quis laoreet. Mauris lobortis vitae massa id malesuada. Nam sit amet vulputate est, ut adipiscing orci. Quisque non sapien lectus. Nullam dapibus mauris non nisi lacinia, sodales posuere sem pellentesque. Sed tincidunt nibh id lacus rutrum sodales. Sed consequat elementum quam, sit amet tempus lorem ornare quis. Etiam sit amet aliquam ligula, ut feugiat ipsum. Nunc condimentum turpis nibh, vel faucibus arcu pretium ac. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quis justo justo. Nam molestie suscipit velit, et ullamcorper mi laoreet in. Cras congue euismod odio, ut sagittis ligula feugiat sit amet.</p>
</div>
</article>
</div>
CSS:
body {
position:relative;
margin:10px;
}
#mainimgcontainer {
position:relative;
width: 50%;
float: right;
margin-left:10px;
}
#mainimgcontainer img {
width:100%;
}
div#mainarticle_details {
background-color: #f7f2e7;
border-bottom: 2px solid #dac397;
line-height: 22px;
height: 23px;
position:absolute;
width:100%;
}
div#mainarticle_details span {
padding:0 0 0 10px;
}
div#maintext {
position:relative;
padding:23px 0 0;
}
(As a personal note, I think it looks better to keep the margin consistent or to put the header above the image and text.)
UPDATE:
As you mentioned, longer headings were not handled well. If they were too long, they disappeared behind the image.
I realized that position:absolute was not neccesary. I removed it from the heading in order to allow wrapped, multi-line headings. The width:100% part keeps the header background extended behind the image while still allowing the header text to wrap to another line.
I also added a media query to demonstrate how the layout can change for mobile.
<div id="mainarticle_details">
<p id="by">BY JOE BLOGGS AND A LONGER HEADING</p>
</div>
div#mainarticle_details {
background-color: #f7f2e7;
border-bottom: 2px solid #dac397;
line-height: 22px;
position:relative;
width:100%;
}
div#mainarticle_details p {
margin:0;
padding:0 0 0 10px;
}
#media (max-width: 600px) {
div#mainimgcontainer {
float:none;
width:100%;
margin:0;
}
}
WORKING EXAMPLE (jsfiddle)

Answer 2

What's Going On
We need the margin of the image to not affect the header div, so we need to position it absolutely. We also need to set the overall wrapper to position:relative to catch the positioning of the header. Finally, we need to add a padding-top to the text.
Code
#mainarticle article {
position:relative;
}
div#mainarticle_details {
width:47%; /* This could be 46%, but due to sub-pixel issues pointed out in comments, if you put 46%, some browsers will show a tiny break. */
padding:0 2%;
position:absolute;
z-index:-1;
}
#maintext {
padding-top: 15px;
}
Working Fiddle
Result

Answer 3

1). Your mainarticle_details is not touching image because of margin-left: 10px; in mainimgcontainer. Make it 0.
2). Once you do a float:right, it remains on top of whatever content is there behind it. That means, your maintext is behind your image. That means, if you don't want it to touch the image, add padding-right: 52%;. Why 52%, because image is taking 50%, so 52 will give some padding and text will not touch image !
jsFiddle