/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] moving DIV up between 2 other divs

Copy linkTweet thisAlerts:
May 20.2010

Hi everyone! I hope you are all having a great day. I need some help with an issue I am having with my CSS/HTML in FireFox 3.5. I haven’t even worried about IE yet, since I design first for FF/Safari and then for IE, it seems to solve more of the IE problems.

Anyway, you can view the page here: [url]http://www.aahanet.org/PM_Redesign_052010/PetCare/PetsMatter/landingaa.html[/url]

The style sheet is here: [url]http://www.aahanet.org/PM_Redesign_052010/PetCare/PetsMatter/newPM.css[/url]

You’ll notice how the content is showing below the left blue box and it should be showing next to it in the white space. I can’t use a fixed width in the .Article style since there may or may not be ads running vertically along the right side of the page. For example, if there are ads along the right, then the .Article width style will become smaller. If there are not any ads, then the .Article width style should extend to the right edge of the page.

I’ve been working on this problem for a couple of days and feel like I have tried everything, but to no avail. I’m hoping someone on this forum will have some ideas and help me out?!

Thank you so so much!!

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@aj_nscMay 20.2010 — Without figuring out exactly why, it worked when I removed the following from your CSS:


In the .Article class, remove
<i>
</i>float: left;



Also remove
<i>
</i>.MainArt, .AccArt, .PetPoralArt {float:left;}


If you want everything to float between the left and right columns, also remove:

<i>
</i>.articleSumm {
float:right;
/*width:87&amp;#37;;*/
}
Copy linkTweet thisAlerts:
@hlj71authorMay 20.2010 — Thank you SOOO much AJ! Removing those styles moved the content up between the right and left.

Now, I have a question about how to keep the text from running underneath the gray ad area? So, the content area would have the same width top to bottom, whether there are ads included or not.

Same kind of thing regarding the little red AAHA paw image and orange Pet Portal image. I don't want the text to flow under the images. The articles without the images should also not appear under the images, but lined up 65px or so in.

I'm not sure this can be done, but it is the design which was handed to me.

Thanks again for your help with the initial problem!

HTML: http://www.aahanet.org/PM_Redesign_052010/PetCare/PetsMatter/landingAA.html

CSS: http://www.aahanet.org/PM_Redesign_052010/PetCare/PetsMatter/newPM.css
Copy linkTweet thisAlerts:
@aj_nscMay 21.2010 — No problem.

Specify a width on .Article (80&#37? seemed to work for me:
<i>
</i>.Article {
padding:10px 0 50px 0;
width: 80%;
/*width:596px;*/
/*position:static;
margin:-400px 0 0 210px;
float:left;*/
text-align:left;
}


That will keep it in a single column.


Add overflow: hidden to the following classes in your CSS
<i>
</i>.MainArt, .AccArt, .PetPoralArt {padding-left:25px; overflow: hidden;}


Also, uncomment your styles for .articleSumm, but change the width to 85%
<i>
</i>.articleSumm {
padding-right:10px;
float:right;
width:85%;
}
Copy linkTweet thisAlerts:
@hlj71authorMay 21.2010 — So, I ended up using 2 different DIV classes, one for when there are ads and one for when there aren't. The C# code this is generating this page will be able to differeniate when to use which class. And, this solves my width issues. The code is still online if anyone wants to check it out.

Thank you so much for your help AJ! It is in invaluable! ?
×

Success!

Help @hlj71 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...