Misaligned divs

[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.

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ā€¦


.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]

10px to the right.

What about the text not showing up?

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:


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

and your CSS states:


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

itā€™s just shunted 10px to the right now, thatā€™s the only problem.

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


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

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

Think heā€™s now talking about the entire block is 10px [COLOR=Red]right[/COLOR], not the space between them. :wink:

*Edit: I need to go back to kindergardenā€¦

I still think you should replace <span class=ā€œmoreā€> with a div,

and wrap your image with a 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>.

Ahhhh, I see. Wish I knew CSS. :frowning:

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?

Are we building a website for TimmyTots?

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

Pay attention! :stuck_out_tongue:

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

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