How to add new div area right above the content?

Question

How to add new div area right above the content?

614 views Asked by caren van At 26 June 2015 at 19:34

I'm trying to add a new div area right above the content section of blogger-dynamic-magazine view like shown in the picture. How can I put a three-div area (like shown in the picture) with red color?

I've tried to insert a <div> right after the <body> tag and before the <content> tag, but it doesn't work.

I've put even below code but doesn't worked.

<div id="container" style="background:black; position:relative; clear:left; top:100px; width:100px; height:100px;">
 <table>
    <tr>
        <td> <div style="background:black;"> Content for div #1</div> </td>
        <td> <div style="background:black;"> Content for div #2</div> </td>
        <td> <div style="background:black;"> Content for div #3</div> </td>
    </tr>    
</table>

EDIT:

In my blogger code, I've

</head>
<body>
<div class='content'>
  <div class='content-outer'>
    <div class='fauxborder-left content-fauxborder-left'>
      <div class='content-inner'>
        <div class='main-outer'>
          <div class='fauxborder-left main-fauxborder-left'>
            <div class='region-inner main-inner'>
              <div class='columns fauxcolumns'>
                <div class='column-center-outer'>
                  <div class='column-center-inner'>
                    <b:section class='main' id='main' showaddelement='no'>

Original Q&A

There are 3 answers

**Amit Jain** · Answer 1 · 2015-06-27 10:49:01

You can use this code:

<<<<<<<<<<<<<< CSS >>>>>>>>>>>>>

<style>
   #container {width:100%; margin:0px; padding:0px;}
   .inner-container {max-width:1140px; width:100%;margin:0 auto;}
   .red {display:inline-block; width:30%; margin:1%;}
</style>


<<<<<<<<<<<< HTML >>>>>>>>>>>>>

<div id="container">
  <div class="inner-container">
     <div class="red red-1"> Content for div #1</div>
        <div class="red red-2"> Content for div #2</div>
        <div class="red red-3"> Content for div #3</div>
    </div>
</div>

**Robert Morschel** · Answer 2 · 2015-10-14 11:57:20

Dynamic Blogger seems to remove any custom html from the template. The only way to do this is to dynamically insert the html using JavaScript and something like jQuery, e.g.

var divstr = "Some content"; $(divstr).insertAfter(".article-header");

**yaakov** · Answer 3 · 2015-06-26 19:41:29

Use a table:

<div id="container">
    <table>
        <tr>
            <td> <div> Content for div #1</div> </td>
            <td> <div> Content for div #2</div> </td>
            <td> <div> Content for div #3</div> </td>
        </tr>    
    </table>    
</div>

CSS for explanatory purposes only.

table tr td div {
    background:red;
}

TechQA.

How to add new div area right above the content?

There are 3 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in BLOGGER

Related Questions in BLOGGER-DYNAMIC-VIEWS

Popular Questions

Popular Tags

Trending Questions