I have problem with the CSS. I'm changing dynamically one div's content. The problem is, it protrudes outside the main frame, as below:
This's the result I expect. How to achieve that ?
Edit
jsFiddle's code
Give maxwidth to your div:
div
{
max-width: 100px;//The width of your div
}
use word-wrap:break-word for the container element
Related
I created an imagemap inside a div, but the div doesn't fit the image. Considering the div is inside a template I can't edit, how do I fix this so the image fits inside the div and not outside it?
Raja dance links
add
overflow:auto;
to #templatemo_welcome_area for the div to "overflow" the image.
Looks good in chrome and FFox now for me.
Supposing you are talking about #templatemo_welcome_area, you could start by adding display:inline-block to it.
Since your image is floating, it's normal that your div doesn't fit.
If you want to keep your float:right, you should add this to your CSS :
#templatemo_welcome_area:after {
content: '';
clear:both;
}
So here's what it looks like:
http://www.whybaguio.com/php/visit/attractions.php
How can I put on three images per row without using the float element. If I use the float, the background of the wrapper gets removed :( I have no idea how to fix this, I tried using the display: inline, using of span instead of div but nothing didn't work :(
Please help!
Thaanks.
Just add overflow: hidden; to the #wrapperatt div as the floated children elements are out of the document flow causing the container to collapse - this is pretty typical float behaviour and is why you see the background disappear.
I want a div to go inside another div even if it is somewhere else.how can I do this ?
<div id="main">
</div>
<div id="sub">
</div>
How can I put the div "sub" inside the div "main" without actually writing the div "sub" inside "main".But I want to do this in a relative manner so that if the content of the sub increase the main also increases.Is there any way to do this ?
I don't know about css but this may be helpful to you. You can achieve this by creating a JQuery function with variables as height and width of the div elements (as well as positioning). Keep those variables in relation so that whenever the div elements are resized or changed there respective div elements will change. Thus the sub div element will act as a child div.
For example:
var mainHeight = $('maindiv').height();
var mainWidth = $('maindiv').width();
var subHeight = $('subdiv').height();
var subWidth = $('subdiv').width();
/*and then implement your own function*/
Check this fiddle - http://jsfiddle.net/bXaXS/24/.
It is not a perfect solution as you wanted but it does change the height and width of #main div on changing the height and width of #sub div
Please see this link and see the push and pull classes These classes may give you the idea. You need to do something like left: -40px; etc. As I know it is usually done for SEO purpose
I'm trying to do jquery pagination, however I'm having a problem keeping the navigator on the bottom, even with clear: both.
The problem is that the navigation div <div class="alt_page_navigation"></div> needs to be right where </ul> ends and cannot be in another div, or else the pagination get's broken.
Another problem is that because the page is dynamic, I don't know the width of the alt_page_navigation beforehand.
Here's a live page example, I've tried everything google spit up, to no avail.
If anyone knows of a simple solution, please let me know :)
Thank you :))
Clear won't work with your inline-block display, but you need that for centering.
Try this solution for creating a clearing div, then put
<div class="clearfix"></div>
between your products and your pager.
Put padding at the bottom equal to the height of your nav, and position like so:
.wrapper { position:relative; padding-bottom:1.5em }
.nav { height:1.5em; position:absolute; bottom:0 }
For example: http://jsfiddle.net/CwrMq/
But there's no reason to use absolute positioning, either; just make it a proper display:block item. For example: http://jsfiddle.net/CwrMq/1/
Your .alt_page_navigation div has display: inline-block set on it. If you delete this line in css - your div will clear the floats. If you want its content to be in the center of the page simply add text-align: center to it and make sure that its content is inline-block (now your a are block-level). You can see the working example here: http://jsfiddle.net/6FNH6/
Here is a solution i tend to use in situations like this.
Your paginator needs to go inside a container that positions it horizontally
See this fiddle - http://jsfiddle.net/94MwF/1/
Basically you are using text-align to horizontally center it, and position absolute to put it at the bottom.
My page looks like this: http://ink-12.terc.edu/index.cfm
I want to get the picture (kids' drawings) on the left to follow the rest of the centered content, when the window expands:
Per the suggestions I found in other answers, I added an outer div (#maincontent) to hold my two divs that I want to scroll instead of wrap (#tbltframe and #drawings), and some additional coding (overflow:auto; display:inline-block; white-space:nowrap).
Now my page looks like this:
http://ink-12.web5test.terc.edu/index.cfm
So now it doesn't wrap (great!), but it cut off my drop shadow on the right side (you can still see it on the bottom). And I need to get the main content centered again (following the centered header and footer)--similar to the first webpage I listed. After the changes, the main content aligns left. I tried adding margin-right and margin-left:auto, as well as text-align:center, but neither did it. I also added a min-width, which doesn't seem to do it either. I can see the drop shadow again when I change the min-width to something significantly larger (74em), then but I don't know why, because #tbltframe (50em) and #drawings (14em) = 64em total.
Any help would be very much appreciated. Suggestions to move forward with the code on either webpage I listed would be fine. Thank you!
Please try the below css on skeleton.css line 64
#maincontent {
display: inline-block;
overflow: auto;
white-space: nowrap;
width: 1169px;
}
It will increase the width of the main content div so the images will not cut from sides..
Found a solution: http://www.search-this.com/2008/08/28/lets-all-get-inline-in-a-block-in-a-block/
Have to:
Create a min-width or width on the outer div (#maincontent)
Make #maincontent a block element with display:block
Center #maincontent with text-align:center
Make the inside divs (#drawings and #tbltframe)not wrap in #maincontent with white-space:nowrap;
Make the inside divs inline block elements with display:inline-block
Then make the text inside wrap again (if you want) with white-space:normal