### Author:  [@Timmytots](https://forum.kirupa.com/u/Timmytots)
#### Post date: [June 25, 2008, 3:31pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/1 "2008-06-25T15:31:53Z")
Why don’t my columns of text on the right line up with my images? There’s a \ between the images and the text divs.
[http://www.timothy-clark.com/portfolio/art/](http://www.timothy-clark.com/portfolio/art/)
---
### Author:  [@lunatic](https://forum.kirupa.com/u/lunatic)
#### Post date: [June 25, 2008, 3:33pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/2 "2008-06-25T15:33:59Z")
I’m not a div person but it looks like there is more space between some images than others.
---
### Author:  [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)
#### Post date: [June 25, 2008, 3:44pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/3 "2008-06-25T15:44:27Z")
Instead of doing two full columns like you’re doing now, you can just do “rows”
```auto
```
and then you float my\_image to the left, and my\_text to the right
and then add a bottom margin to the rows to separate them
This will make each row line up perfectly
---
### Author:  [@redelite](https://forum.kirupa.com/u/redelite)
#### Post date: [June 25, 2008, 3:53pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/4 "2008-06-25T15:53:25Z")
Why not try something like this instead of trying to 2-column line everything up:
Example HTML:
```auto
-
Drawing
As it contradicts my Art objectives, I have no
desire to model in the mainstream if, of course,
I were adequate. These images are primarily for
documentation purposes and to showcase my look.
View more
-
Drawing
As it contradicts my Art objectives, I have no
desire to model in the mainstream if, of course,
I were adequate. These images are primarily for
documentation purposes and to showcase my look.
View more
```
Example CSS:
```auto
.my_list {
list-style-type: none;
}
.my_list li {
display: block;
padding: 10px;
width: (width of area available in content area minus 20px for padding);
}
.my_list li img {
float: left;
}
.my_list li h4,
.my_list li p {
margin-left: (width of image + 10px);
}
.more {
display: block;
margin-top: 10px;
}
```
It doesn’t necessarily have to be exactly like this, but the general idea is to group your images and corresponding text together in 1 block and just float the image to the left. This helps you in more than one way: (1) You can easily get everything to line up properly; and (2) It’s a lot better for someone that comes along with a text browser. 😉
Hope this gets you headed in the right direction, if you need some more help just let me know! :thumb2:
\*\* Edit: Or you can do what fasterthanlight did, same concept as what I have, group them together in 1 block and float them inside of that ‘container’.
[SIZE=1] sigh faster, you type too quick :lol: :P[/SIZE]
---
### Author:  [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)
#### Post date: [June 25, 2008, 3:56pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/5 "2008-06-25T15:56:33Z")
lol, i think i like your idea of lists more, but something inside of me makes me want to put separate divs around the image and the text within the list and to float those … i dont know why, cause your way accomplishes the same thing. I think I have this preconceived notion in my brain about only applying floats to block-level type things
Maybe I’m succumbing to divitis and i don’t even know it!
---
### Author:  [@redelite](https://forum.kirupa.com/u/redelite)
#### Post date: [June 25, 2008, 3:57pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/6 "2008-06-25T15:57:30Z")
[quote=fasterthanlight™;2348910]lol, i think i like your idea of lists more, but something inside of me makes me want to put separate divs around the image and the text within the list … i dont know why.
Maybe I’m succumbing to divitis and i don’t even know it![/quote]
The only perscription is more div’s baby! 😉
---
### Author:  [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)
#### Post date: [June 25, 2008, 3:59pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/7 "2008-06-25T15:59:02Z")
Hahahahh yea, hey you’re a pretty fast typer too! You got in there whilst i was editing… you sneaky devil you
---
### Author:  [@Timmytots](https://forum.kirupa.com/u/Timmytots)
#### Post date: [June 25, 2008, 4:25pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/8 "2008-06-25T16:25:25Z")
I’m struggling with this. I’ve added your code Redelite but it hasn’t worked.
[http://www.timothy-clark.com/portfolio/art/](http://www.timothy-clark.com/portfolio/art/)
What do i need to do?
---
### Author:  [@actionAction](https://forum.kirupa.com/u/actionAction)
#### Post date: [June 25, 2008, 4:29pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/9 "2008-06-25T16:29:30Z")
It looks right to me. Which image are you referring to?
---
### Author:  [@Timmytots](https://forum.kirupa.com/u/Timmytots)
#### Post date: [June 25, 2008, 4:35pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/10 "2008-06-25T16:35:04Z")
the first 2 images are with the new code and it’s all out/wrong.
---
### Author:  [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)
#### Post date: [June 25, 2008, 4:37pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/11 "2008-06-25T16:37:32Z")
don’t forget to clear your floats
```auto
Drawing
As it contradicts my Art objectives, I have no
desire to model in the mainstream if, of course,
I were adequate. These images are primarily for
documentation purposes and to showcase my look.
View more
****
```
your could use \\
and add a .clear class to your stylesheet
.clear { clear: both; }
---
### Author:  [@redelite](https://forum.kirupa.com/u/redelite)
#### Post date: [June 25, 2008, 4:40pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/12 "2008-06-25T16:40:58Z")
```auto
.my_list li {
[COLOR=Red]clear: both;[/COLOR]
display: block;
padding: 10px;
width: (width of area available in content area minus 20px for padding);
}
.my_list li h4,
.my_list li p,
[COLOR=Red].more[/COLOR] {
margin-left: 465px;
}
```
---
### Author:  [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)
#### Post date: [June 25, 2008, 4:43pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/13 "2008-06-25T16:43:37Z")
■■■■ you and your better way of doing things!
---
### Author:  [@redelite](https://forum.kirupa.com/u/redelite)
#### Post date: [June 25, 2008, 4:47pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/14 "2008-06-25T16:47:44Z")
> [@fasterthanlight™;2348948](#):
>
> Damn you and your better way of doing things!
That’s what I get paid for! 😉
---
### Author:  [@Timmytots](https://forum.kirupa.com/u/Timmytots)
#### Post date: [June 25, 2008, 5:12pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/15 "2008-06-25T17:12:42Z")
it’s still all pushed over 20-40 px to the right.
---
### Author:  [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)
#### Post date: [June 25, 2008, 5:15pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/16 "2008-06-25T17:15:59Z")
.my\_list {
list-style-type:none;
**[COLOR=“Red”]padding:0;[/COLOR]**
}
---
### Author:  [@redelite](https://forum.kirupa.com/u/redelite)
#### Post date: [June 25, 2008, 5:26pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/17 "2008-06-25T17:26:56Z")
[quote=fasterthanlight™;2348963].my\_list {
list-style-type:none;
**[COLOR=Red]padding:0;[/COLOR]**
}[/quote]
Oops, forgot that! Good catch. :lol: :bounce:
---
### Author:  [@actionAction](https://forum.kirupa.com/u/actionAction)
#### Post date: [June 25, 2008, 5:38pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/18 "2008-06-25T17:38:36Z")
Just as some friendly advice, you really should consider brightening your text. It is unreadable on a CRT (methinks you design on an lcd). I seriously had to highlight your text with the mouse to see that it was just filler gibberish.
---
### Author:  [@Timmytots](https://forum.kirupa.com/u/Timmytots)
#### Post date: [June 25, 2008, 5:45pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/19 "2008-06-25T17:45:27Z")
ok, ive been playing around with it and it’s OK now. One problem though, the text doesn’t show up. Why not?
---
### Author:  [@Timmytots](https://forum.kirupa.com/u/Timmytots)
#### Post date: [June 25, 2008, 6:03pm UTC](https://forum.kirupa.com/t/misaligned-divs/264374/20 "2008-06-25T18:03:09Z")
actually it’s not OK. It’s shunted about 10px to the right.
[Next page](https://forum.kirupa.com/t/misaligned-divs/264374.md?page=2)
