Chris Andrews
asked on
css div - div overlapping another instead of adjusting to available space
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
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
ASKER
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
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
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>
ASKER
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.
ASKER
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...
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.
When you float an element it is no longer part of the normal page flow.
ASKER
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?
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?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Seems to work ok without the ad too :)
I appreciate your time and help and will send points your way :)
Chris
I appreciate your time and help and will send points your way :)
Chris
margin-left:230px