How to add new div area right above the content?

Question

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'>

http://jsfiddle.net/yak613/8kf3zuur/ indubitably obvious **:)** — yaakov, Jun 26 '15 at 19:39
@indubitablee sorry, I've tested many times then erased. Blogger doesn't have revision control so I cannot give you. — caren van, Jun 26 '15 at 19:41
there is a **revert widgets** button, but that might not help — yaakov, Jun 26 '15 at 19:44
@carenvan Hi Caren, and welcome to Stack Overflow. Unfortunately, your question is missing *code*. Code is a requirement for questions asking "How can I do X". While pictures or URLs to live sites may clearly indicate your needs, those pictures or URLs might die over time. Please edit your question to include your actual HTML/CSS. Otherwise, this question risks being closed. — TylerH, Jun 27 '15 at 01:14
@TylerH I've put the code. threating a girl with closing her inquiry is easy but helping's hard — caren van, Jun 27 '15 at 09:05
@carenvan No one threatened anyone with anything. All questions need to follow the guidelines set out by the [Help Center](http://stackoverflow.com/help), regardless of who asks them! No need to take it personally. — TylerH, Jun 27 '15 at 21:02

score 0 · Answer 1 · answered Jun 26 '15 at 19:41

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

score 0 · Answer 2 · edited Jun 27 '15 at 11:01

0

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>

edited Jun 27 '15 at 11:01

methode

5,348
2
31
42

answered Jun 27 '15 at 10:49

Amit Jain

11
2

Amit, where should I put your code? Could you just look the question? I've added some new piece of code from my blogger. – caren van Jun 28 '15 at 11:41

score 0 · Answer 3 · answered Oct 14 '15 at 11:57

0

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

answered Oct 14 '15 at 11:57

Robert Morschel

341
3
11

How to add new div area right above the content?

3 Answers3