This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
On the page:
http://sooniwill.be/personality-test/
You can click the "Show results" button to see a table with the test results. But as you'll notice, it bleeds into the footer instead of the webpage creating room for the table.
My stylesheet is here:
http://sooniwill.be/personality/main.css (see result-facets)
I know just enough CSS to get myself in trouble. I've done several web searches for similar issues and tried implementing some CSS to fix it. Every once in a while I'll make an edit that displays it properly, but then I reload the page and it overlaps into the footer again. Any suggestions?
There's some javascript that's applying height: 1723px to the #main div. If you disable that it will fix your problem and the #main div will expand to contain the entire table.
Edit:
Alternatively, you could add a rule to your CSS to override the height.
CSS
#main {
height: auto !important;
}
Try this:
In this css document
/* Clear Floats */
.col-full:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
delete the height on this line cause you are adding this class to your <div id="content">
<div id="content" class="page col-full"> at the 255 line on your main document
or try adding a static height
if that does not work add the css overflow: scroll and a static height
Related
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
when i resize the browser, three elements in the middle (It's for everybody, It's one big community, its fun) position dont stay static. the third box goes under the other two boxes.
Here is the link,http://www.archimedus.com/archimedus/
I have been battling with this css issue for a day now.
It could be very simple but still i haven't been able to figure out what mistake i have made.
can someone please advise.
Start by checking your html marckup. You must use bottom_text classes instead of id's . You should not have duplicated id's in the document.
Then you must take a decision about what do you want to happen width your divs
Specific to your question
If the target is to avoid the relocation effect, wrap then in a container div and let them float inside of it. Then set a minimum width to your wraper div. Decide how will behave the overflow of it.
Your floting divs can use relative margins in order to obtain some flexible layout, etc...
The simplest way to fix this would be to give the boxes a max width of 33%.
#content_mass_bottom #bottom_text {
float: left;
width: 425px;
max-width: 33%;
}
You can move your bottom_text divs into the tbox1/2/3 divs.
<div id="tbox1">
<img src="/archimedus/images/everybody.png" class="everybody">
<div id="bottom_text">
<p class="bottom_text">Many hands make light work. Imagine what we can achieve with our collective abilities With Archimedus there is an unlimited amount of knowledge available, waiting to be tapped by you. You’ll never be bored again. Best of all… it’s free!</p>
</div>
</div>
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
all three footers have the same html and css code but actiing differently in each of the three pages. some times its at bottom, at other page its in the middle, at the other its at bottom but making a gap between its previous div (#main)
jsfiddle.net/BBnzW/
jsfiddle.net/6cYQg/
jsfiddle.net/USSds/
any guess why?
Please only answer after making sure in jsfiddle that it works. I have done alot of tries before.
The code is above stackoverflow code limit of 30000chars, so cant paste here.
#main { position: absolute } is causing the footer to position in the middle of your content. And .w1 { padding-bottom: ... } and #footer { margin-top: ... } are producing the extra white space. But I don't think removing that will completely solve your problem.
Seems like you are trying to get a sticky footer. Try this http://jsfiddle.net/fL4XF/18/. Simple css and no extra markup. It works in IE7.
Here's another Sticky Footer that works in IE6. However, it needs extra markup. It's up to you.
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
Having IE7 only issues with spacing on this page: http://chantalorganics.co.nz/wordpress/newsletter/
The image below shows the large space above and below the feature boxes, and above the footer content.
I can see that many people have issues with margins in IE7, but I am using padding. I am also using Eric Meyer's reset.css. However, the content is floated which seems part of the problem.
Appreciate any guidance!
I found that this big blank space is because of margin-bottom added to 'entry-content' class. This class is added to div right under H1. You can remove that margin-bottom and add it to H3 with 'Find out why' text. In my case that solved problem :)
Btw. on Chrome when You hover on Tahini Cookies image the image move's down. That is weird...
EDIT:
To repair footer blank space add in styles display inline-block like below
#footer-container {
display: inline-block;
}
Big blank space above footer is because You have height added to #primary-menu and #container. I tried to remove that but then I noticed that after that menu is not height enough so I modified both heights to min-height: 563px (number is up to You). Is that what You are expecting?
I found help at http://www.cssnewbie.com/double-margin-float-bug/
And today I don't have that wierd jumping Tahini Cookies image. Can You tell me what was that and how did You repaire this?
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 11 years ago.
I'm working on a project and I'm attempting to style a specific link type in the same way as Adi Palaz uses here to define external links. I have my code set up the same as his but for some reason display: inline-block is overflowing the containing <li> element (which has a defined width) so that the list elements stack 2 side-by-side.
Can someone tell me how to go about forcing the link "The Mountain and the Mole Hill" at bottom of this demo, development page (http://dreamstarstudios.net/sandbox/philosimply/sliding_drawer.html) to break lines? I thought inline-block was expressly for the purpose of have text that is displayed as a block level element yet still breaks lines. The even stranger thing is that changing it to display: inline doesn't force a line break but rather just causes the text to overflow the defined width :(
EDIT My apologies for not explaining further. If you look at this link (http://www.adipalaz.com/linksbg.html) you will see how this developer used white-space: nowrap (which is needed) to achieve the desired effect I'm going for. What I really need to know is why it is working for him but not me.
Just remove white-space:nowrap;
http://www.w3schools.com/cssref/pr_text_white-space.asp
in your style sheet 'line 206' you are setting the width, it is doing exactly what you are telling it to do, you will need to make it wider or add clear: both; to the li.
You've set white-space:nowrap on this link. That's why it won't break.
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
I have a sharebox(div containing social site links) that I've been using with a fixed position outside the main container. I realized that when I re-size the browser window by dragging the border it causes my sharebox div to move over the top of the container.
I looked through related posts here but don't think they apply to this so sorry if I missed it somewhere.
Here is an example of the problem: http://metrotechpc.net/test/positionedbox.html
Is there a way, preferably with pure css(no javascript) to make the div stay away from the container on browser window re-size so the user has to scroll over to see it?
I've tried giving it padding, margin, different positions(absolute and fixed).
I am actually inserting this code into the top of the page with genisis_hook function on a wordpress page so that may be an issue but getting it to work in a basic html like the example link would be a great help.
Thanks
There are a few issues with your CSS:
There's a typo in the rule for #container: postition: relative; instead of position: relative;
You should move the sharebox div inside the container div.
Add position: absolute to the sharebox div's CSS and then specify right: 70px to make it start from the right border.
Lastly, there's another typo in the sharebox's CSS: margin: left:20px; instead of margin-left: 20px