Membership is FREE – with unlimited access to all features, tools, and discussions. Premium accounts get benefits like banner ads and newsletter exposure. ✅ Signature links are now free for all. 🚫 No AI-generated (LLM) posts allowed. Share your own thoughts and experience — accounts may be terminated for violations.

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!

Premium Members

New Threads

Domain Forum Friends

Our Mods' Businesses

*the exceptional businesses of our esteemed moderators
General chit-chat
Help Users
  • No one is chatting at the moment.
  • Siusaidh AcornBot:
    Siusaidh has left the room.
      Siusaidh AcornBot: Siusaidh has left the room.
      Top Bottom