Membership is FREE, giving all registered users unlimited access to every Acorn Domains feature, resource, and tool! Optional membership upgrades unlock exclusive benefits like profile signatures with links, banner placements, appearances in the weekly newsletter, and much more - customized to your membership level!

photo alignment text wrap problem

Status
Not open for further replies.
Joined
Nov 25, 2006
Posts
2,686
Reaction score
27
This is doing my nut in .....

I have a page that has bios of several people.

Each bio has a pic, aligned left at the start of each paragraph HOWEVER when you add more than one pic to the page it screws up the alignment with all the pics going diagonally across the page rather than each one aligning on the left.

Help or solution to this v. much appreciated and beer tokens to whoever gets it sorted or charity donation.

cheers

Howie
 
Sounds like something to do with "floats" and "clearing"? Hard to say without seeing anything - you could try strategically placing the following after each bio to test:

HTML:
<br style="clear:both; margin: 0; padding: 0;" />
 
This is doing my nut in .....

I have a page that has bios of several people.

Each bio has a pic, aligned left at the start of each paragraph HOWEVER when you add more than one pic to the page it screws up the alignment with all the pics going diagonally across the page rather than each one aligning on the left.

Help or solution to this v. much appreciated and beer tokens to whoever gets it sorted or charity donation.

cheers

Howie

Sounds like you've got <div>s adding together going down the page. Try clearing the relevant CSS between each picture using something like:

<div class ="resetcss"></div>

Then add this to the page CSS:

.resetcss {
clear: left;
font-size: 0px;
line-height: 0;
margin: 0px;
padding: 0px;
}
 
Sounds like something to do with "floats" and "clearing"? Hard to say without seeing anything - you could try strategically placing the following after each bio to test:

HTML:
<br style="clear:both; margin: 0; padding: 0;" />

Sounds like you've got <div>s adding together going down the page. Try clearing the relevant CSS between each picture using something like:

<div class ="resetcss"></div>

Then add this to the page CSS:

.resetcss {
clear: left;
font-size: 0px;
line-height: 0;
margin: 0px;
padding: 0px;
}

Nice one :D

Between you both you've sorted the problem.

Tokens or charity? (if latter name it)

TVM

Howie
 
Status
Not open for further replies.

Rule #1: Be Respectful

Do not insult any other member. Be polite and do business. Thank you!

Members online

Premium Members

Latest Comments

Upcoming events

New Threads

Domain Forum Friends

Lastest Listings

Our Mods' Businesses

*the exceptional businesses of our esteemed moderators
General chit-chat
Help Users
  • No one is chatting at the moment.
      There are no messages in the current room.
      Top Bottom