9 replies [Last post]
crazycrisuk
Offline
newbie
Last seen: 10 years 10 weeks ago
Timezone: GMT+1
Joined: 2010-04-26
Posts: 5
Points: 6

Hi,
I have a page that is resizes depending on the browser screen, and have 3 images side by side that need aligning.

One needs to stick the the left, one to stay central and the other to stay right. As the page resizes I can't sidestep this by just setting a margin between them.

I tried creating a div for the centre image and setting margins to auto but it still seemed to want to stick left. Any ideas?? I'm new to CSS if you haven't already guessed, aha Smile Thanks

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 43 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Quote: I'm new to CSS... The

Quote:

I'm new to CSS...

The best way for you to grow, is to research and discover. Please go to the following URL's to begin your journey!! Also, to answer your question, research floats and lists. The next time you post, be sure to read the posting guidelines Smile

http://www.htmldog.com
http://www.w3schools.com/default.asp

crazycrisuk
Offline
newbie
Last seen: 10 years 10 weeks ago
Timezone: GMT+1
Joined: 2010-04-26
Posts: 5
Points: 6

I've been trying to figure

I've been trying to figure this out for nearly 6 hours my friend, signing up to a forum was my last point of call, anyway, how do you think I found this place unless I was already google'ing for the answer????

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 43 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Quote: how do you think I

Quote:

how do you think I found this place unless I was already google'ing for the answer????

Thats where you're getting it wrong. You dont google for the answers, but rather for the tools to gain understanding and knowledge. If you're new to css, then you need to take a few steps back, and learn it. The sites above are good places to start. And if you read my response, it tells you what you need to research in order to solve your current issue.

gary.turner
gary.turner's picture
Online
Moderator
Dallas
Last seen: 5 min 19 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

CTJ, don't you think he's

CTJ, don't you think he's made an effort? Sometimes you know what you want but don't know how to phrase the query. Sometimes you don't recognize a solution because 1) it doesn't directly address your issue, and 2) you may not be familiar enough with what you're shown to recognize the possibilities.

crazycrisuk, there are a couple of methods that come to mind.

<p><img src="img1.jpg" alt=""><img src="img2.jpg" alt=""><img src="img3.jpg" alt=""></p>
===============
p {
  text-align: justify;
  }
This is fuzzy. The specs say the last line may align left. An only line is a last line by definition. So, depends on the browser.

The next solution is more robust.

<p id="picbox"><img id="n1" src="img1.jpg" alt=""><img  id="n3" src="img3.jpg" alt=""><img id="n2" src="img2.jpg" alt=""></p>
===============
#picbox {
  overflow: hidden;   /*encloses floats in case float images are
                        taller than the middle, in-the-flow image*/
  }
 
#n1 {
  float: left;
  }
 
#n2 {
  float: right;
  }
 
#n3 {
  display: block;
  margin: 0 auto;
  }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 43 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

gary.turner wrote: CTJ, don't

gary.turner wrote:

CTJ, don't you think he's made an effort?

I didnt think so. He came looking for us to do it for him. He didnt provide any code what-so-ever. I told him what to research, and he complained about it. I thought this forum wasnt in the practice of hand-holding. Point them in the right direction, and allow them to grow. If they still struggle, help them along.

crazycrisuk
Offline
newbie
Last seen: 10 years 10 weeks ago
Timezone: GMT+1
Joined: 2010-04-26
Posts: 5
Points: 6

Hi Gary, thanks for the

Hi Gary, thanks for the response.

I've tried what you've posted but it appears the centre image is pushing the right image to a new line so to speak. Here's a link to the site...

www.mkpcfix.co.uk

the content in question is in the header, phone number, title, etc.

Let me know if you want some code posting but tbh I'm just using what you suggested atm, Smile

Many Thanks

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 43 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

First, clear out all the

First, clear out all the padding from the parent divs. Then implement a simple list like I suggested above. You'll want to move the inline css to a style sheet. You can adjust margins to place each li where you want it.

li {display: inline;}

<ul>
<li style="float: left;"><img src="/images/topleft.png"></li>
<li><img src="/images/headintro.png"></li>
<li style="float: right;"><img src="/images/topright.png"></li>
</ul>

gary.turner
gary.turner's picture
Online
Moderator
Dallas
Last seen: 5 min 19 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

My bad

:Oops:

Edit the css like so:

#picbox {
  overflow: hidden;   /*encloses floats in case float images are
                        taller than the middle, in-the-flow image*/
  text-align: center;
  }
 
#n1 {
  float: left;
  }
 
#n2 {
  float: right;
  }
 
#n3 {}

I disagree that this is a list. They are not particularly related items.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

crazycrisuk
Offline
newbie
Last seen: 10 years 10 weeks ago
Timezone: GMT+1
Joined: 2010-04-26
Posts: 5
Points: 6

Thanks for the help! Works

Thanks for the help! Works perfect now!

Just so I understand you've contained all 3 images in the 'picbox' and set them all to centre, then told the left and right ones to float left and right respectively leaving the middle one centred?

I never would of worked it out myself, so thanks again, you've been a big help Smile