Padding not working for my text

Question

html:

<div id="main">
<div style="position: absolute; height: 150px; width: 400px; left: 290px;"><img src="HEAD-IMAGE.jpg" /></div>
<div style="position: absolute; height: 300px; width: 233px; top: 180px;"><img src="LEFT-IMAGE.jpg" />(below head)</div>
<div style="position: absolute; top: 200px; left: 270px;">TEXT (next to left image)</div>
</div>

css:

div#main{
 position: absolute;
 top: 141px; left: 50%;
 height: 100%; width: 960px;
 padding: 10px;
 margin-left: -490px;
 text-align: justify;
 background-color: yellow;
}

my padding from #main works for my images but not for my text (right & bottom padding).

Answer 1

Why is this happening?

In your example, only the text div has a top and left property. The two divs containing the images only contain one of these properties:

• The header div has left: 290px;, so it gets its y-axis position moved by the top padding.

• The left div has top: 180px; so it gets its x-axis position moved by the left padding.

• The text div has top: 200px; left: 270px; so its x and y-axis are not affected by the padding.

To illustrate this, for this example the text div has had its left property removed. It is now affected by the left padding of its container:

("Show code snippet" and run it)

#main {
  position: absolute;
  top: 141px;
  left: 50%;
  height: 100%;
  width: 960px;
  padding: 50px;
  margin-left: -290px;
  text-align: justify;
  background-color: yellow;
}
.header {
  position: absolute;
  height: 150px;
  width: 400px;
  left: 290px;
  background: #F00;
}
.left {
  position: absolute;
  height: 300px;
  width: 233px;
  top: 180px;
  background: #F00;
}
.text {
  position: absolute;
  top: 200px;
  background: #F00;
}

<div id="main">
  <div class="header">
    <img src="http://www.placehold.it/200" />
  </div>
  <div class="left">
    <img src="http://www.placehold.it/200" />
  </div>
  <div class="text">You can't handle the truth, soldier!</div>
</div>

Is position: absolute the best way to layout my elements?

Depends... position: absolute removes elements from the normal flow of the document. That is, each element is essentially invisible to the other. This is particularly problematic if you wish to create a flexible layout, which can re-size in accordance with the users browser height / width.

Can you show me another way to layout HTML elements?

Sure! There are many ways to layout a page without resorting to position: absolute. Here is a basic example using display: flex — a newer way to layout elements. It does not enjoy 100% browser support yet, so this is purely an example of one technique :)

Read more:

• about vw and vh units on the MDN

• about flexbox over on CSS-Tricks - A Complete Guide to Flexbox

• about flexbox browser support

Flex example

Note how the elements resize when the example is made full-screen.

* {
  margin: 0;
  padding: 0;
}
body {
  width: 80vw;
  max-width: 800px;
  margin: 0 auto;
  background: #424242;
}
header {
  background: #e91e63;
  height: 20vh;
}
.wrap {
  display: flex;
}
.left {
  background: #fce4ec;
  flex: 1;
}
.content {
  background: #fafafa;
  min-height: 70vh;
  flex: 2;
}
footer {
  height: 10vh;
  background: #c51162;
}

<header>
  I am header
</header>
<div class="wrap">
  <div class="left">
    I am sidebar
  </div>

  <div class="content">
    I am content
  </div>
</div>
<footer>
  I am footer, hear me roar! RWAR!
</footer>

Answer 2

problem is you give left and top to text div that why not accept padding,simply remove left to text div then it will accept the padding...

Answer 3

Use position: relative; on the child divs to make them account for the parent divs padding.

Answer 4

Define a class .child for your <div>

<div class="child">

and define style accordingly

.child { padding: 10px; }