PDA

View Full Version : Right floating in elastic layout


LarDiDah
03-16-2010, 05:15 PM
Hey,

The picture wont float to the right when previewed. Even though it'ss in the CSS it still comes up on the left. Any ideas on why?


CSS:
.FirstBoxHomePage {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1em;
color: #000;
background-color: #FFF;
padding: .625em;
border: 0.125em solid #999;
line-height: 1.25em;

}
p img src={"../Pics/MrsBodianCroppedBig.jpg"
width: 22.5em;
height: 15.125em;
margin: 0 0.625em 0.625em 0;
float: right;
}

HTML:
<div id="mainContent">
<p class="FirstBoxHomePage"><img src="../Pics/MrsBodianCroppedBig.jpg" alt="Mrs Bodian">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam

Thanks

Corrosive
03-16-2010, 05:43 PM
Well I have never seen img src used in CSS. url maybe. Try this;

.FirstBoxHomePage img {
width: 22.5em;
height: 15.125em;
margin: 0 0.625em 0.625em 0;
float: right;
}

LarDiDah
03-16-2010, 06:12 PM
Hey,

Thanks for your help.

Tried this and it works but it resizes the other images, like my banner, even though they are using a different CSS.

Is there a way of giving each one an identifier so it doean't happen to them all.

I tried numbering them and than brings back the problem of not floating right but sorts out the resizing problem.

Banner CSS:
.ElasticBannerBoarder {
background-color: #FFF;
width: auto;
border: 0.125em solid #999;
padding-top: 1.25em;
padding-right: 15.875em;
padding-bottom: 1.25em;
padding-left: 1.25em;
}
p img1 {
width: 28.75em;
height: 4.9375em;
margin: 0 0.625em 0.625em 0;
float: left;
}

HTML:
<div id="header">
<p class="ElasticBannerBoarder"><img src="../Pics/Yok Xam Xam banner4.jpg" lt="Banner" /></p>

Content CSS:
.FirstBoxHomePage {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1em;
color: #000;
background-color: #FFF;
padding: .625em;
border: 0.125em solid #999;
line-height: 1.25em;

}
p img2 {
width: 22.5em;
height: 15.125em;
margin: 0 0.625em 0.625em 0;
float: right;
}

HTML:
<div id="mainContent">
<p class="FirstBoxHomePage"><img src="../Pics/MrsBodianCroppedBig.jpg" alt="Mrs Bodian" />

Corrosive
03-16-2010, 06:17 PM
What I tend to do is make two classes;

.float-left {float: left; margin 0 10px 10px 0}
.float-right {float: right; margin 0 0 10px 10px}

(the margins are to give images breathing space. Change if you want to)

And then apply to the image;

<img class="float-right" src... etc.

It may not be everyone's cup of tea but it works for me.

domedia
03-17-2010, 01:36 AM
It's my approach as well. With some extra markup for image captions.