Misaligned divs

Why don’t my columns of text on the right line up with my images? There’s a <br> between the images and the text divs.

http://www.timothy-clark.com/portfolio/art/

I’m not a div person but it looks like there is more space between some images than others.

Instead of doing two full columns like you’re doing now, you can just do “rows”


<div class="row">
<div class="my_image">
<img src="some_image.jpg"/>
</div>
<div class="my_text">
Lorem ipsum
</div>
</div>

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

Why not try something like this instead of trying to 2-column line everything up:

Example HTML:


<ul class="my_list">
  <li>
    <img src="#" />
    <h4>Drawing</h4>
    <p>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.</p>
    <span class="more">View more</span>
  </li>

  <li>
    <img src="#" />
    <h4>Drawing</h4>
    <p>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.</p>
    <span class="more">View more</span>
  </li>
</ul>

Example CSS:


.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. :wink:

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]

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!

[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! :wink:

Hahahahh yea, hey you’re a pretty fast typer too! You got in there whilst i was editing… you sneaky devil you

I’m struggling with this. I’ve added your code Redelite but it hasn’t worked.

http://www.timothy-clark.com/portfolio/art/

What do i need to do?

It looks right to me. Which image are you referring to?

the first 2 images are with the new code and it’s all out/wrong.

don’t forget to clear your floats


  <li>
    <img src="datascapes.jpg" width="455" height="322" />
    <h4>Drawing</h4>
    <p>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.</p>
    <span class="more">View more</span>
**    <div style="clear:both;"></div>**
  </li>

your could use <div class=“clear”></div>

and add a .clear class to your stylesheet

.clear { clear: both; }


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




■■■■ you and your better way of doing things!

That’s what I get paid for! :wink:

it’s still all pushed over 20-40 px to the right.

.my_list {
list-style-type:none;
[COLOR=“Red”]padding:0;[/COLOR]
}

[quote=fasterthanlight™;2348963].my_list {
list-style-type:none;
[COLOR=Red]padding:0;[/COLOR]
}[/quote]

Oops, forgot that! Good catch. :lol: :bounce:

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.

ok, ive been playing around with it and it’s OK now. One problem though, the text doesn’t show up. Why not?

actually it’s not OK. It’s shunted about 10px to the right.