?
Solved

css div - div overlapping another instead of adjusting to available space

Posted on 2014-03-16
9
Medium Priority
?
831 Views
Last Modified: 2014-03-16
This may be a bit tricky, I'm not sure.

I am using a wordpress theme that has a toggle-div so that certain content can be hidden or opened by the user.

It works.

However, the div for the toggle bar overlaps other divs if used side by side.

I don't know if the solution is going to involve css or a fix in the javascript? I'm thinking probably the css.

It's hard to explain - but you can see a sample of the problem here: http://shoutkey.com/trip 

Fill free to view the source code, which contains the css.

Thanks for any help you can provide on this -

Chris
0
Comment
Question by:St_Aug_Beach_Bum
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
9 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39932841
Just give the toggler a left margin

margin-left:230px
0
 

Author Comment

by:St_Aug_Beach_Bum
ID: 39932908
Hi Gary,

Thank you. The problem is that if I do that, if the toggle is in a location where there is not a div to the left, it leaves a blank space to the left.

Chris
0
 
LVL 58

Expert Comment

by:Gary
ID: 39932931
Then wrap everything on the right in a div container

<div>
<p>The text seems to be in the correct place, it's just the 'bar' that stretches across and in front of the left floated div:<br><br></p>

<div style="" class="toggle  close"><h3 style="display: none;" class="toggle-head-open"> Spoiler</h3><h3 style="display: block;" class="toggle-head-close"> Spoiler</h3><div style="display: none;" class="toggle-content">
Whoa - here's a spoiler!
</div></div>

<p><br>If it was just me writing, I just wouldn't put the toggle next to an ad. But I have writers that won't think about it and just put it anywhere, so I need some kind of solution so this can be used without this issue cropping up.<br><br><br><br></p>
</div>

Open in new window

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:St_Aug_Beach_Bum
ID: 39932951
I'm not trying to be a problem... but that doesn't work either - the toggle will be placed in different locations in different articles. So it needs to work (take up the available horizontal space without overlap) wherever it is used in the article.
0
 

Author Comment

by:St_Aug_Beach_Bum
ID: 39932958
ie: sometimes there will be a div to the left, sometimes there won't be. It would need to work and look good either way...
0
 
LVL 58

Expert Comment

by:Gary
ID: 39932983
Then its not really possible with css - you cannot tell an element to be 100% and float another element next to it.
When you float an element it is no longer part of the normal page flow.
0
 

Author Comment

by:St_Aug_Beach_Bum
ID: 39933005
I've been experimenting and experimenting.

It seems like this:

display:inline-block;

added to .toggle works.

I have not tested it across browsers yet.

The only thing is that I have to manually set the width, otherwise it ends up squashed. I'd rather have it take up the space horizontally automatically, but I can live with setting a width.

What do you think?
0
 
LVL 58

Accepted Solution

by:
Gary earned 1000 total points
ID: 39933024
If you are setting a defined width then its easy enough, but how will that work if you have no advert.
0
 

Author Comment

by:St_Aug_Beach_Bum
ID: 39933142
Seems to work ok without the ad too :)

I appreciate your time and help and will send points your way :)

Chris
0

Featured Post

[Webinar] How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question