How can I add text to a div without affecting the surrounding text?

Question

I'm trying to add the burger button icon to my header. Before I add it, my Example Title is centred. After I add the icon, Example Title is pushed a little to the right.

I want Example Title to remain centred even with the icon in place.

I have put

* {
margin: 0;
padding: 0;
}

In my style sheet, but it doesn't help in this case.

Here is a visual example of my problem.

Before icon

After Icon

* {
 margin: 0;
 padding: 0;
}

body {
 text-align: center;
}

#navbut {
 cursor: pointer;
 font-size: 20px;
}

#title {
 width: 100%;
 background-color: #373737;
 color: #f4f4f4;
 padding: 5px 0;
 display: table;
 text-align: center;
 font-size: 4em;
}

#title p {
 display: table-cell;
 vertical-align: middle;
}

<div id="title">
<span id="navbut">&#9776;</span>
<p>Example Title</p>
</div>

`margin-left:-20px` as it's pushed 20px right . Or if you say you have to add more content into your div and still have the title in centre then you can consider to do sometbing like a watermark. It's done by overlapping divs. Have title in one div and other contents in other div then use z-index and position absolute to overlap divs — Rajshekar Reddy, Nov 16 '16 at 03:51
@Reddy `margin-left:-20px;` has no effect when placed in `#title p` and it removes the burger icon from the screen when placed in `#navbut` — oneman, Nov 16 '16 at 03:54
Items will almost always affect their siblings unless positioned absolutely. I'd suggest putting `position: relative;` on `#title` and make use of `display: block; position: absolute;` along with `top` and `left` for your button. — Tyler Roper, Nov 16 '16 at 03:54
Link:-http://stackoverflow.com/questions/5662178/opacity-of-divs-background-without-affecting-contained-element-in-ie-8 — Razia sultana, Nov 16 '16 at 03:54

score 2 · Accepted Answer · answered Nov 16 '16 at 03:55

position: absolute; will help.

* {
 margin: 0;
 padding: 0;
}

body {
 text-align: center;
}

#navbut {
 position: absolute;
    left: 0;
    top: 0;
}

#title {
    position: relative;
 width: 100%;
 background-color: #373737;
 color: #f4f4f4;
 padding: 5px 0;
 display: table;
 text-align: center;
 font-size: 4em;
}

#title p {
 display: table-cell;
 vertical-align: middle;
}

<div id="title">
<span id="navbut">&#9776;</span>
<p>Example Title</p>
</div>

score 1 · Answer 2 · answered Nov 16 '16 at 03:59

Use absolute positioning to #navbut and relative positioning to #title.

Just like:

#navbut {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

#title {
  position: relative;
}

* {
 margin: 0;
 padding: 0;
}

body {
 text-align: center;
}

#navbut {
 cursor: pointer;
 font-size: 20px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

#title {
 width: 100%;
 background-color: #373737;
 color: #f4f4f4;
 padding: 5px 0;
 display: table;
 text-align: center;
 font-size: 4em;
    position: relative;
}

#title p {
 display: table-cell;
 vertical-align: middle;
}

<div id="title">
<span id="navbut">&#9776;</span>
<p>Example Title</p>
</div>

Hope this helps!

It does work, but @Ron.Basco posted first so will get the accepted answer. But thank you anyway — oneman, Nov 16 '16 at 04:00

score 1 · Answer 3 · answered Nov 16 '16 at 04:08

I grab your problem and make a solution better from my side hope it will help you.

* {
   margin: 0;
   padding: 0;
  }

  body {
   text-align: center;
  }

  #navbut {
   cursor: pointer;
   font-size: 20px;
   position: absolute;
   top: 30px;
   left: 20;
  }

  #title {
   width: 100%;
   background-color: #373737;
   color: #f4f4f4;
   padding: 5px 0;
   display: table;
   text-align: center;
   font-size: 4em;
   position: relative;
  }

  #title .exapmle-title {
   display: table-cell;
   vertical-align: middle;
  }

<div id="title">
 <div id="navbut">&#9776;</div>
 <div id="example-title">Example Title</div>
</div>

score 0 · Answer 4 · answered Nov 16 '16 at 04:02

Elements will most often be affected by their siblings unless you take them "out of the flow". In your case, you'd probably want to make use of display: block; for making sure the div responds to your position attributes, position: absolute; to allow it to be independent of siblings, and position: relative; to position the span relative to its parent, rather than the page.

Something like this:

#navbut {
    cursor: pointer;
    font-size: 20px;
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
}

#title {
    width: 100%;
    background-color: #373737;
    color: #f4f4f4;
    padding: 5px 0;
    display: table;
    text-align: center;
    font-size: 4em;
    position: relative;
}

#title p {
    display: table-cell;
    vertical-align: middle;
}

How can I add text to a div without affecting the surrounding text?

4 Answers4