Alignment news list

I am trying to create a nice alignment voor the newslist on my homepage.

I have added an arrow, which automatically moves the newslist to the right. Only when the title covers two lines, the next line starts at the beginning.

http://www.pukt.nl/fokvereniging

I would like to have a straight alignment. But i cannot achieve it.
Anybody any ideas?

(Same goes for the agenda list, the date makes it move aside, but the next line starts far left.)

Thanks heaps!

Just make your <a> links a block element:

Code:

---

.newslist_main a {
display: block;
/* rest of your styles */
}

---

Note you also have a padding-bottom applied to this element. Doing the above will kick this style into action, so if this is not what you want you may have to adjust accordingly.

You'll have to do your agendas differently -- "float: left" your date and "float: right" your anchor tag on these. Also you will have to "clear: both" the surrounding DIV for each item to prevent any layout issues. Finally on the surrounding DIV for each item, you MAY also want to apply an "overflow: hidden" (and "zoom: 1" if you are supporting IE6 -- but as a warning that won't validate). Normally when an element has children that are all "floated", the element collapses. So these last two will fix that.

Thanks a lot! That did the trick!

Something strange is happening with my agenda list.
I have never encountered this before.

In my browsers (ff, ie 6,7,8 etc) all is displaying perfect.

But someone send me a screendump how it displays with her (ff)

http://www.pukt.nl/tl_files/de-mannetjes/agenda.jpg

Code:

---

.mod_upcoming_events {
overflow:hidden;
width:250px;
clear:both;
}

.mod_upcoming_events a{
position:relative;
height:100%;
float:right;
width:175px;
margin-top:-15px;
margin-left:5px;
margin-bottom:5px;
}

.event {
position:relative;
float:left;
}

---

It is really hard for me to get rid of the error, since I cannot see and thus test it on my own comp!

I see what she sees in FF3.5.

Try this -- may not be perfect because there is some trial and error needed to get it perfect, but it should get you close.

Code:

---


.mod_upcoming_events {
overflow:hidden; <--- Remove - Not Necessary
width:250px;
clear:both;
}

.mod_upcoming_events .event  {
position:relative;
float:left; <--- Remove
clear: both; <--- Add
overflow: hidden; <!--- Add
zoom: 1; <--- Add
}
/* The last 2 lines are what I was referring to in my previous email. Since all children of .event are floated, these 2 lines prevent .event's height from collapsing. */

.mod_upcoming_events .event a {
position:relative;
height:100%; <--- Remove - Not Necessary
float:right;
width:175px;
margin-top:-15px; <--- Remove
margin-left:5px;
margin-bottom:5px;
}

---

Hey Thank you!!!

That did the trick! I only had to add:

Code:

---

.mod_upcoming_events .date {
float:left;
}

---

Thank you so much!