How to get my floated element to sit where I want it to?

abtecas · August 29, 2013, 4:02pm

I’m trying to get my image to sit next to an

I floated the in which my image sits in (will apply some JavaScript to it later), but for the life of me I cannot get it to have a space of around 10 or 12px next to the H3 that it sits next to.

I can do it if I apply a margin-right of 130px or so, HOWEVER there are some H3 elements that will not be the same length everytime. I thought I could get the just have an auto width so it would stop whenever the text would stop (like my and elements seem to be doing.), but it seems to be taking up the whole line. So my problem will appear (as you can see) if I apply the margin-right:130px or more because there are subsequent elements that will be longer than “Complexity Factors”.

I wonder if I should sit my elements in that section inside of a div perhaps and set dimensions on that div? In any case, here is my CSS (which with positioning, I am kind of shaky with, admittedly)

here is the page in question:

http://scope-stage.scholastic.com/issues/090113/narrative-nonfiction

here is my code:

/******EXPAND AND COLLAPSE BUTTONS******/

   .expandingBtn img {
  float:right;
  background-image:('expandBtn.png');
  margin-right:115px;
  margin-top:-13px;
  clear:both;

}

and my markup:
<h3 class=“colorScheme”>
Complexity Factors</h3>
<div class=“expandingBtn”>
<img src=“/resource/uploads_scope/img/expandBtn.png” /></div>

ronpat · August 29, 2013, 7:26pm

Hi, abtecas, welcome to the forums.

Of course, I can’t tell which image on the live page you are having a problem with

Please read our posting guidelines

and post a cut-down working example page that demonstrates the problem so we can open it on our computers and hopefully provide an answer for you.

Thanks

abtecas · August 29, 2013, 7:53pm

sorry. The section is on the lower right where it says “Complexity factors” and there is a circle with a plus sign. (I cant take screen shot)
now that is how it should display, but when I put that styling to other pages, it doesn’t work.

If I could just get that H3 to not take the max of the DIV, I would be fine. I’m stuck with using the H3, according to the mockup, unfortunately.

ronpat · August 29, 2013, 8:04pm

The <h3> is set to {display:inline-block}, therefore it does not expand to the width of the column. I gather that this is the desired behavior.

This page apparent does not demonstrate the “broken” behavior, so I cannot tell why this style does not transfer to another page. I will guess that there is another style in the cascade that overrides the inline-block, or maybe inline-block is not being applied on the other pages.

If you read the guidelines, you will understand that you are asking us to “guess” the solution to a problem that we cannot see. Personally, I do not care to use my time “guessing”. We need to be able to see the broken behavior to determine what is not working and why.

abtecas · August 29, 2013, 8:11pm

sorry. trying to explain the best I can…starting to sound like the folks at stack overflow.

abtecas · August 29, 2013, 8:12pm

I’ll figure it out

ronpat · August 29, 2013, 8:58pm

I think your explanation is fine, but we need to see an example where the code is not working so we can diagnose the problem.

abtecas · August 29, 2013, 9:04pm

one sec, please. I’m working it out. But on some pages it still does not work, with the exact same code. I will provide momentarily if I still can’t get it. Thanks

abtecas · August 29, 2013, 9:32pm

it works fine on this page: http://scope-stage.scholastic.com/issues/090113/Narrative-Nonfiction
code is:

.mainRight h3 {
display: inline-block;
}
.expandingBtn {
display: inline-block;
float: none;
}

and markup is
<h3 class=“colorScheme”>
Complexity Factors</h3>
<div class=“expandingBtn”>
<a href=“”><img alt=“view Complexity Factors” src=“/resource/uploads_scope/img/expandBtn.png” /></a></div>
<p>
See how this text will challenge your students.</p>
<!–THIS SECTION WILL BE HIDDEN UNTIL A THE EXPAND BUTTON IS CLICKED–>
<div class=“hidden”>
<h4>
Purpose</h4>
<p class=“times”>
The article has a clear purpose—to inform readers about how a brave teenager stood up to the Taliban—as well as an implicit purpose—to show how just getting an education is difficult for many young people around the world.</p>
<h4>
Knowledge Demands</h4>
<p class=“times”>
Comprehension will be aided by knowledge of current world events and geography. The major topics (free speech, the Taliban, terrorism, girls’ education worldwide, fighting oppression) will be unfamiliar to many students.</p>
<h4>
Language Conventionality and Clarity:</h4>
<p class=“times”>
<strong>Vocabulary:</strong> Many higher academic vocabulary words (e.g., oppressive, pseudonym, unwittingly)</p>
<p class=“times”>
<strong>Figurative language:</strong> Includes personification (“fear was her constant companion”) and metaphor (Malala’s voice is likened to a weapon)</p>
<h4>
Structure</h4>
<p class=“times”>
A nonlinear structure that starts in 2012 then goes back to 2007 and then forward to 2013. Includes narrative and informational passages.</p>
</div>
<!–THIS ENDS THE FIRST HIDDEN SECTION–>
<h3 class=“colorScheme”>
Literature Connection</h3>
<div class=“expandingBtn”>
<a href=“”><img alt=“” src=“/resource/uploads_scope/img/expandBtn.png” /></a></div>
<div style=“clear:both;”>
</div>
<!–THIS SECTION WILL BE HIDDEN UNTIL A THE EXPAND BUTTON IS CLICKED–>
<div class=“hidden”>
<p class=“times”>
Connecting Scope content to your curriculum</p>
<p class=“times”>
<strong>Other texts that deal with crusaders include:</strong></p>
<p class=“times”>
To Kill a Mockingbird by Harper Lee</p>
<p class=“times”>
Uprising: Three Young Women Caught in the Fire That Changed America by Margaret Peterson Haddix</p>
<p class=“times”>
Kids on Strike by Susan Campbell Bartoletti</p>
</div>
<!–THIS ENDS THE SECOND HIDDEN SECTION–>
<h3 class=“colorScheme”>
Skills and Standards</h3>
<div class=“expandingBtn”>
<a href=“”><img alt=“” src=“/resource/uploads_scope/img/expandBtn.png” /></a></div>
<a href=“”> </a>
<div class=“hidden”>
<p class=“times”>
<a href=“”>Common Core ELA Anchor Standards:</a></p>
<p class=“times”>
<a href=“”>R1, R2, R3, R4, R5, R6, R10, W2, W4, W8, SL1, SL2, SL4, L4, L6</a></p>
</div>
<a href=“”><!–THIS ENDS THE THIRD HIDDEN SECTION–></a></div>

now on the pages:
http://scope-stage.scholastic.com/issues/090113/debate-essay-kit
and
http://scope-stage.scholastic.com/issues/090113/lazy-editor

it does not work.

also on the page: http://scope-stage.scholastic.com/issues/090113/you-write-it
the buttons float fine, but the <div class=“hidden”> does not hide the text underneath “Skills and Standards” like it is supposed to do.

I am (forced) to use ezPublisher CMS to edit these files, and every so often I also see weird tags put in like:
<a href=“”> </a></div>
<a href=“”> </a></div>
<a href=“”> </a>

which I have no clue how they get there but they don’t really seem to cause any problem, but why are they there (side point perhaps)

PaulOB · August 29, 2013, 9:54pm

Hi,

In the style block that you are inserting in the middle of the page (!!!) you have a missing bracket which is corrupting the rest of the rules.

Here:


.essentialQuestions {
           background-image: url(/resource/uploads_scope/issues/090113/090113_narrativeNonfiction_essentialQuestions.png) no-repeat;
           background-color:#fff;
	   width:351px; 
           height:103px;

    .essentialQuestions-words {
           position:relative;
	   margin-top:17px;
           margin-left:95px;
	   width:206px;
}

It should look like this:


.essentialQuestions {
           background-image: url(/resource/uploads_scope/issues/090113/090113_narrativeNonfiction_essentialQuestions.png) no-repeat;
           background-color:#fff;
	   width:351px; 
           height:103px;
[B]}/* closing bracket here */[/B]
    .essentialQuestions-words {
           position:relative;
	   margin-top:17px;
           margin-left:95px;
	   width:206px;
}

On some pages the bracket is present which is why it works on some pages.

abtecas · August 29, 2013, 10:04pm

yes I have to do the style in the middle of the page (I’m working with an editor so that’s why they go there until I migrate them to the main style sheet ), but I thought I fixed that problem a few days ago since that is an old part…but thanks for pointing it out.

PaulOB · August 30, 2013, 7:52am

Yes, it’s that bracket that is causing the problems you are experiencing because the missing bracket corrupts the rules that follow and the styles are being missed. One missing bracket can corrupt a whole stylesheet depending where it is.

abtecas · August 30, 2013, 1:29pm

Yes, I need to slow down in my coding and just be a tad bit more detail-oriented. Happens to the best of us. I’m willing to bet that that is what’s causing those weird tags to show up in EZpublisher editing windows as well. Thanks again though.
Cheers