CODEWITHSUNDEEP
htmlcss
edgarmtze
edgarmtze

Reputation: 25048

Two text columns and one image as third over div

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:

enter image description here

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:

enter image description here

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?

Upvotes: 2

Views: 760

Answers (4)

user2594152
user2594152

Reputation: 485

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;)

Upvotes: 1

Anobik
Anobik

Reputation: 4899

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="https://i.sstatic.net/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.

Upvotes: 2

Josnidhin
Josnidhin

Reputation: 12504

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>

Upvotes: 1

doitlikejustin
doitlikejustin

Reputation: 6353

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.

Upvotes: 5

Related Questions