Probably a very simple fix to this one, been looking at it for a little bit now and cant figure it out.. Here is my code:
margin-top:10px;
width:998px;
min-height:100px;
max-height:300px;
border:1px solid #CCC;
-moz-border-radius: 10px;
border-radius: 10px;
background-image:url(../images/default/page.png);
overflow:hidden;
When the margin-top is set at 10px the div doesn't move at all. If i set the margin-top to be 200px then the div doesn't move. However if i set it to say 500px then it moves down 500 as expected.
I have already tried removing the min & max heights for just a single set height however this doesn't sort the problem. Not that it should cause issues in the first place.
Can anyone see my mistake? I am sure my coding is relatively sound and don' really know how to research solving this issue.
Check the margin and float of other elements. I don't see any problems with the code you provided.
In CSS, adjacent vertical margins collapse, pending certain conditions.
So say you have 2 divs stack 1 on top of another. The top div has a margin bottom of 30px, and the bottom div has a margin top of 20px. In this situation, the margins 'collapse' into the highest value, the 30px margin bottom on the top div.
More info on this can be found here
In your situation, i'd look at the CSS of the surrounding elements to see if changing those values would do what you want.
I have managed to resolved this issue by placing the divs above this one within another container Div and applying a margin-bottom:10px to it.
Its not totally ideal because it takes a little longer to code and adds another div which i don't really want but suppose it will have to do for now until i have a little more time to read up on this issue fully.
Thanks to everyone for your help and potential solutions.
Related
I'm mostly a C++ programmer who's getting involved in HTML5 and Javascript. I'm having some trouble with my layouts and am asking for advice and some criticism of how I'm doing it.
A reoccurring problem I'm having is unwanted scroll bars appearing when I add margin or padding. This is a mockup of a layout I'm working on for a Javascript application.
http://jsfiddle.net/Qy4Xz/
Each box uses class 'text-line' to produce a line that my controls go in. I wanted to add a margin so the costs box items would have some space around them. When I add a 5px margin to text-line, my geometry box has scroll bars in each left/right panel.
http://jsfiddle.net/LD5TS/
Here is where I'm adding the margins:
.text-line {
font-size: 1.6em;
box-sizing: border-box;
width: 100%;
margin: 0px; /* no margins */
}
This is probably a newbie mistake, but what am I doing wrong and how can I fix this? I run into this problem a lot, I've read a lot of material, but I'm missing something. If I'm making any other major layout mistakes can you point them out? Thank you!
Since the .text-line elements have width:100%; they will naturally overflow the container if they have margin too, since margin does by default not get included in the width value.
What you could do if you want both space around the content and have the element fill its parent in width, is removing the margin:5px and adding this code to .text-line:
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:5px;
What the code above does is including the padding in the width value, thus you can add padding and the element will still only get the width value you declared.
try to add padding instead of margin and it will work fine. To understand exactly what's happening, please take a look at css box model
I run into this problem a lot when making grids of thumbnails, etc. When you try to center using margin: auto;
Normally, I will just use PHP and a counter to style the last object in each row without a margin on the right. But this is somewhat complicated, and I was hoping there might be a simpler way to do it using a CSS trick or something.
I've whipped up a stupid little example of the problem here http://jsfiddle.net/convoke/kFzg5/27/
And here's what I'd like it to look like http://jsfiddle.net/convoke/NZR9X/3/
Subtle difference to the centering of the parent object, but hopefully you see what I mean.
I replaced floats to inline-blocks + justified "text":
http://jsfiddle.net/kFzg5/28/
Warning: older browsers does not love this technique, and the last row looks fugly.
Second "solution" with extra wrapper div and much overflow: hidden:
http://jsfiddle.net/kFzg5/29/
http://jsfiddle.net/ZGWHT/
Use td + td to target a td if there is a td to the left of it (ignores the first td).
you could center then offset the parent container with a negative left margin, margin-left:-10px and then set your image containers to margin:0 0 10px 10px.
On this site:
http://stmc.modulemedia.co.uk/HossIntropia
I have code that's generated by a CMS, I have stripped things back as much as possible, removing the .net code and things generated by the CMS, but still cannot see why the text (that starts Hoss Intropia...) is overlapping.
There are basically two DIVS LeftCol and RightCol, that I have moved from being side-by-side to LeftCol being above RightCol.
This is a project I'm taking over, so I'm limited as to what can be changed.
Thanks for your help!
I think you just need to increase the height of the div inside #LeftCol that is containing stuff.
Try changing the height on .menu to height: 480px. Or perhaps even remove the height.
div.Menu has a height property, and since the content is spilling out beyond that height, it overlaps the div#RightCol content.
if you remove the height from div.Menu, it works
settting the margin of the right cols should solve the problem:
#RightCol {
margin:120px 0 0 0 !important;
}
Have a look at this fiddle: http://jsfiddle.net/h4VS7/
How do I make the yellow element align (horz) with the grey background no matter how the window is resized? I refuse to believe it can't be done with css. Yes, js hacks and Scroll Follow plugin works but lags.
Please, anyone?
Edit:
Found a solution. If the container margins are expressed as percentages the content part can be expressed as the remainder percentage. See here: http://jsfiddle.net/h4VS7/1/
Though not sure why it doesn't align perfectly. It should I think. Could be jsfiddle margin/padding related.
It's not particularly difficult if you don't mind adding an extra element to wrap .top:
http://jsfiddle.net/Ud3ZQ/
And also, a properly aligning (well, almost) version of your solution:
http://jsfiddle.net/h4VS7/3/
The problem was that jsFiddle loads http://fiddle.jshell.net/css/result-light.css:
body {background: white; padding: 10px; }
Anything is more specific than * (including body), so the padding was being applied, regardless of * {padding:0; margin:0}
I have been using a lot of position:relative; in my design, I just find it the easiest way to get everything where I need them to be.
However, the more items I add on my site (each one with their individual div) each one ends up further and further at the bottom of my page, so I have to manually position them higher.
This leaves a lot of empty space at the bottom, and I thought that adding height: 1000px; would limit the scrolling a bit, but this method doesn't seem to work.
I've even tried adding height: 1000px; to the wrapper and it's still not working.
How can I limit vertical scrolling, to the number of pixels I choose?
Thanks so much in advance.
Wait, so you are creating a div, using position relative to move the content of the div to the correct location, and the issue being that the div tag itself is still in the same place and creating a vertical scroll even though there is no content there?
If so you should look into floats.
Here are some tutorials.
Floatutorial
Learn CSS Positioning in Ten Steps
You can specify both the height and the overflow:
.someClass
{
height:1000px;
overflow:scroll;
}
The most common values for overflow are scroll, auto, and hidden.
To limit the distance someone can scroll, I think you'd need to use JavaScript. I'm not sure how, but I can't think of anything in CSS that would do that.
If you are looking to set when something should scroll instead of just be cut off or expand the tag, use overflow:auto;.