Misaligned divs

programming web dev
21

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]

22

10px to the right.

What about the text not showing up?

23

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.

24

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

25

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

26 

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

27

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

28

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…

29

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

and wrap your image with a div

30

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

31

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

32

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?

33

Are we building a website for TimmyTots?

34

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

Pay attention! :stuck_out_tongue:

35

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

36

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