Two text columns and one image as third over div - html

Question

I have in general 3 areas in a WEB page (title and subtitle, 2 text columns and test in left and image at right). I would like to get following result:
However I do not know how to make it, I think it has to do with z-index of wine image, but how to do it?
I have this:
my current code is:
<header>
<div class="inner-header">
<h1><a title="title">titlw</a></h1>
<h2>subtitle</h2>
</div>
</header>
<section id="tagline">
<div id="tagline-content">column 1 and its text.</div>
<div id="tagline-content-middle">column 2 and its text.</div>
</section>
<section id="product">
<article class="product">
<img src="http://hmimexico.com/noir.png" alt="Girl" />
<h3>title</h3>
<p>Lorem Ipsum .</p>
</article>
</section>
css:
header {
margin-top: -40px;
height: 165px;
}
header .inner-header {
height:165px;
text-align:center;
}
header h1{
padding-top: 45px;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
margin-bottom:0;
}
header h2 {
color:#111111;
font-size: 19px;
line-height: 22px;
font-weight: bold;
letter-spacing: 1px;
margin-top:-2px;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.15);
text-transform:uppercase
}
#tagline {
padding: 10px 0 10px 0;
background:#111 ;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
}
#close-open-top {
margin: -9px auto;
text-align: center;
width: 50px;
}
#close-open-top a {
width:100px
}
#close-open-top:hover {
margin-top:-11px;
padding-bottom:2px
}
#tagline-content {
color: #FFFFFF;
text-align:left;
font-size: 10px;
font-weight: normal;
letter-spacing: 1px;
line-height: 100px;
text-transform: uppercase;
}
#tagline-content-middle {
color: #FFFFFF;
text-align:center;
font-size: 10px;
font-weight: normal;
letter-spacing: 1px;
line-height: 100px;
text-transform: uppercase;
}
#product {
text-align:center;
margin:16px auto;
padding-top:10px;
width:960px;
}
#product img {
float: right;
margin-left: 15px;
}
.product {
width:100%;
display:block;
margin:0;
text-align:left;
}
.product p {
color: #4F4F4F;
font-size: 16px;
line-height: 21px;
margin-bottom:38px
}
please take a look at the fiddle:
http://jsfiddle.net/2aEGp/1/
How can I get result as shown in image 1?

Answer 1

I believe this is what you are looking for (jsFiddle). I used a combination of the following:
width:33.3% and float:left on your columns. I set the first 2 to 33.3% even though there is not a third column but the product image takes the place of the third column.
overflow:hidden on the column containers, since the columns are now floating we need to set overflow on it wrapping #tagline div.
Negative margin-top on the product image, so that it goes above the column wrapper. There was no need to add z-index.
You can also view the jsFiddle fullscreen to see how it would look like in a browser window.

Answer 2

Here's a fiddle for you image on top
and here's the css and html code
<header>
<div class="inner-header">
<h1><a title="title">titlw</a></h1>
<h2>subtitle</h2>
<div class='imgCont'>
<img src="http://i.stack.imgur.com/Ava65.png" alt="Girl" />
</div>
</div>
</header>
<section id="tagline">
<div id="tagline-content">column 1 and its text.</div>
<div id="tagline-content-middle">column 2 and its text.</div>
</section>
<section id="product">
<!-- Main content area -->
<article class="product">
<h3>title</h3>
<p>Lorem Ipsum .</p>
</article>
</section>
css
header {
margin-top: -40px;
height: 165px;
}
header .inner-header {
height:165px;
text-align:center;
}
header h1{
padding-top: 45px;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
margin-bottom:0;
}
header h2 {
color:#111111;
font-size: 19px;
line-height: 22px;
font-weight: bold;
letter-spacing: 1px;
margin-top:-2px;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.15);
text-transform:uppercase
}
#tagline {
padding: 10px 0 10px 0;
background:#111 ;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
}
.imgCont{
height:100%;
width:30%;
float:right;
}
#close-open-top {
margin: -9px auto;
text-align: center;
width: 50px;
}
#close-open-top a {
width:100px
}
#close-open-top:hover {
margin-top:-11px;
padding-bottom:2px
}
#tagline-content {
color: #FFFFFF;
text-align:left;
font-size: 10px;
font-weight: normal;
letter-spacing: 1px;
line-height: 100px;
text-transform: uppercase;
width:100%;
}
#tagline-content-middle {
color: #FFFFFF;
text-align:center;
font-size: 10px;
font-weight: normal;
letter-spacing: 1px;
line-height: 100px;
text-transform: uppercase;
width:100%;
}
#product {
text-align:center;
margin:16px auto;
padding-top:10px;
width:auto;
}
#product img {
float: right;
}
.product {
width:100%;
display:block;
margin:0;
text-align:left;
}
.product p {
color: #4F4F4F;
font-size: 16px;
line-height: 21px;
margin-bottom:38px
}
.product img{
position:relative;
}
I adjusted some designs with % so that it can get a bit responsive. You can try it in browser since fiddle uses and iframe so it some how behaves a little different than atual page in responsiveness.

Answer 3

I believe you should use css positioning to achieve this. Take a look at the following example
http://jsfiddle.net/2aEGp/5/
The css which makes this happen is the following
.product img {
position: absolute;
right: 50px;
top: 100px;
}
I have also rearranged the product section like the this
<section id="product">
<!-- Main content area -->
<article class="product">
<h3>title</h3>
<p>Lorem Ipsum .</p>
<img src="http://hmimexico.com/noir.png" alt="Girl" />
</article>
</section>

Answer 4

I think we can solve the above problem by applying float:left to #tagline-content and to #tagline-content-middle divs and using either clear:both(after the two divs in an empty div) or overflow:hidden(to parent div) to clear the floats.
We can also put the image at the apporpriate position using negative top margin or setting position as absolute and giving right and top values(keeping article position:relative;)