# Misaligned divs

**URL:** <https://forum.kirupa.com/t/misaligned-divs/264374>\
**Category:** web dev\
**Created:** [June 25, 2008, 3:31pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374 "2008-06-25T15:31:53Z")\
**Posts on this page:** 16\
**Page:** 2

<div class="post-metadata">

**Author:** ![redelite](https://avatars.discourse-cdn.com/v4/letter/r/dc4da7/32.png) [@redelite](https://forum.kirupa.com/u/redelite)\
**Post date:** [June 25, 2008, 6:08pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/21 "2008-06-25T18:08:07Z")

</div>

Well one problem is you wrapped the \<span class=“more”\> around the \<h4\> and \<p\> so your margins are performing double time…

if your going to wrap the span around them then change your css to this…

```auto

.my_list li h4,
.my_list li p {
  [COLOR=Red]/* remove the margin-left that was here */[/COLOR]
  font-size: 80%;
  line-height: 1.5em;
  color: #444;
}

.more {
  display: block;
  [COLOR=Red]margin-left: 455px;[/COLOR]
  border: 1px solid #101010;
  height: 300px;
  padding: 10px;
  font-size: 80%;
  line-height: 1.5em;
  color: #444;
}

```

[COLOR=Red][COLOR=Black]\*take out the margin-left from the h4 and p and subtract 10px from the .more one

Although I’m not fully understanding what you want to accomplish, do you want the box with the gray border flush against the image or 10px to the right of the image?  
[/COLOR] [/COLOR]

---

<div class="post-metadata">

**Author:** ![Timmytots](https://avatars.discourse-cdn.com/v4/letter/t/bc8723/32.png) [@Timmytots](https://forum.kirupa.com/u/Timmytots)\
**Post date:** [June 25, 2008, 6:19pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/22 "2008-06-25T18:19:24Z")

</div>

10px to the right.

What about the text not showing up?

---

<div class="post-metadata">

**Author:** ![redelite](https://avatars.discourse-cdn.com/v4/letter/r/dc4da7/32.png) [@redelite](https://forum.kirupa.com/u/redelite)\
**Post date:** [June 25, 2008, 6:22pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/23 "2008-06-25T18:22:39Z")

</div>

It is showing up its just WAAAAAAY to the right and [SIZE=1]really small[/SIZE]… the problem is you have your HTML like this:

```auto

<span class="more">
  <h4></h4>
  <p></p>
</span>

```

and your CSS states:

```auto

.my_list li h4,
.my_list li p {
  font-size: 80%;
  line-height: 1.5em;
  [COLOR=Red]margin-left: 465px;[/COLOR]
  color: #444;
}

.more {
  display: block;
  [COLOR=Red]margin-left: 465px;[/COLOR]
  border: 1px solid #101010;
  height: 300px;
  padding: 10px;
  font-size: 80%;
  line-height: 1.5em;
  color: #444;
}

```

…so your margins are doubling up. So to fix it get rid of the margin-left on the first css statement and the text will be there.

---

<div class="post-metadata">

**Author:** ![Timmytots](https://avatars.discourse-cdn.com/v4/letter/t/bc8723/32.png) [@Timmytots](https://forum.kirupa.com/u/Timmytots)\
**Post date:** [June 25, 2008, 6:45pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/24 "2008-06-25T18:45:14Z")

</div>

it’s just shunted 10px to the right now, that’s the only problem.

---

<div class="post-metadata">

**Author:** ![lunatic](https://avatars.discourse-cdn.com/v4/letter/l/73ab20/32.png) [@lunatic](https://forum.kirupa.com/u/lunatic)\
**Post date:** [June 25, 2008, 6:48pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/25 "2008-06-25T18:48:04Z")

</div>

[QUOTE=redelite;2349001]do you want the box with the gray border flush against the image or 10px to the right of the image?  
[/QUOTE]

[QUOTE=Timmytots;2349009]10px to the right. [/QUOTE]

Isn’t that what you wanted when asked? :h:

---

<div class="post-metadata">

**Author:** ![redelite](https://avatars.discourse-cdn.com/v4/letter/r/dc4da7/32.png) [@redelite](https://forum.kirupa.com/u/redelite)\
**Post date:** [June 25, 2008, 6:51pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/26 "2008-06-25T18:51:03Z")

</div>

```auto

.my_list li {
  clear: both;  
  display: block;
  [COLOR=Red]padding[/COLOR][COLOR=Red]: 0;[/COLOR]
  width: 736px;
 }

```

The padding on the LI is causing it, change it to 0 instead of 10. :thumb2:

---

<div class="post-metadata">

**Author:** ![fasterthanlight](https://avatars.discourse-cdn.com/v4/letter/f/ecc23a/32.png) [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)\
**Post date:** [June 25, 2008, 6:52pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/27 "2008-06-25T18:52:40Z")

</div>

lol, good catch lunatic

and timmi, you shouldn’t wrap block level elements with inline elements like span

span should go INSIDE \<h4\> and \<p\>

also, [www.getfirebug.com](http://www.getfirebug.com)

---

<div class="post-metadata">

**Author:** ![redelite](https://avatars.discourse-cdn.com/v4/letter/r/dc4da7/32.png) [@redelite](https://forum.kirupa.com/u/redelite)\
**Post date:** [June 25, 2008, 6:53pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/28 "2008-06-25T18:53:15Z")

</div>

> [@lunatic;2349030](#):
>
> Isn’t that what you wanted when asked? :h:

Think he’s now talking about the entire block is 10px [COLOR=Red] **right** [/COLOR], not the space between them. 😉

\*Edit: I need to go back to kindergarden…

---

<div class="post-metadata">

**Author:** ![fasterthanlight](https://avatars.discourse-cdn.com/v4/letter/f/ecc23a/32.png) [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)\
**Post date:** [June 25, 2008, 7:01pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/29 "2008-06-25T19:01:40Z")

</div>

I still think you should replace \<span class=“more”\> with a div,

and wrap your image with a div

---

<div class="post-metadata">

**Author:** ![redelite](https://avatars.discourse-cdn.com/v4/letter/r/dc4da7/32.png) [@redelite](https://forum.kirupa.com/u/redelite)\
**Post date:** [June 25, 2008, 7:05pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/30 "2008-06-25T19:05:11Z")

</div>

[quote=fasterthanlight™;2349040]I still think you should replace \<span class=“more”\> with a div,

and wrap your image with a div[/quote]

+1, Originally there wasn’t a div and the span was the “View More” text link, but instead he wrapped the \<h4\> and \<p\> in it so I just went with it to fix it. He could easily change it since hes using just a class to define the block (.more).

But I agree with faster, you should use a \<div\> instead of a \<span\>.

---

<div class="post-metadata">

**Author:** ![lunatic](https://avatars.discourse-cdn.com/v4/letter/l/73ab20/32.png) [@lunatic](https://forum.kirupa.com/u/lunatic)\
**Post date:** [June 25, 2008, 7:05pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/31 "2008-06-25T19:05:16Z")

</div>

Ahhhh, I see. Wish I knew CSS. ☹

---

<div class="post-metadata">

**Author:** ![Timmytots](https://avatars.discourse-cdn.com/v4/letter/t/bc8723/32.png) [@Timmytots](https://forum.kirupa.com/u/Timmytots)\
**Post date:** [June 25, 2008, 7:05pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/32 "2008-06-25T19:05:41Z")

</div>

now there’s no space vertically between the images and text of image1 and 2. shall i put margin-bottom: 10px; in the my\_list li?

---

<div class="post-metadata">

**Author:** ![Syous](https://avatars.discourse-cdn.com/v4/letter/s/57b2e6/32.png) [@Syous](https://forum.kirupa.com/u/Syous)\
**Post date:** [June 25, 2008, 7:07pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/33 "2008-06-25T19:07:42Z")

</div>

Are we building a website for TimmyTots?

---

<div class="post-metadata">

**Author:** ![lunatic](https://avatars.discourse-cdn.com/v4/letter/l/73ab20/32.png) [@lunatic](https://forum.kirupa.com/u/lunatic)\
**Post date:** [June 25, 2008, 7:12pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/34 "2008-06-25T19:12:38Z")

</div>

No, we’re (well, not really me) helping him with a spacing problem he is having.

Pay attention! 😛

---

<div class="post-metadata">

**Author:** ![Timmytots](https://avatars.discourse-cdn.com/v4/letter/t/bc8723/32.png) [@Timmytots](https://forum.kirupa.com/u/Timmytots)\
**Post date:** [June 25, 2008, 7:13pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/35 "2008-06-25T19:13:29Z")

</div>

yep, it’s perfect now. Thanks for all your help guys. Sorry to be dumb.

---

<div class="post-metadata">

**Author:** ![redelite](https://avatars.discourse-cdn.com/v4/letter/r/dc4da7/32.png) [@redelite](https://forum.kirupa.com/u/redelite)\
**Post date:** [June 25, 2008, 7:15pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/36 "2008-06-25T19:15:18Z")

</div>

No problem, GO TEAM! Later homeslice! :thumb2:

[Previous page](https://forum.kirupa.com/t/misaligned-divs/264374.md?page=1)