trying to learn some html/css and I'm having a problem with fixed position divs. I think if you check my jsfiddle you will immediately see what I'm doing wrong, but here's a breakdown to be specific:
I've got 2 fixed position divs, .menu and .menu-2. I'd like my .middle div to be underneath those, however at the moment its beneath that fixed position divs. Do I have any choice but to use absolute positioning? I'm going to eventually need to float a bunch of stuff inside my .left and .right divs.
I'd just like everything to begin after the fixed position divs. And lastly, my footer div also is underlapping and not being placed after my .middle div. Can someone explain where I'm going wrong here? Thanks!
http://jsfiddle.net/5MW7s/
Add clear: both; to footer.
Add margin-top: 120px !important; to .middle.
Related
I need the border of the title of this page to extend to the right side.
Perhaps there is a better way of doing this but I have used position:absolute and width:100% because the content div underneath needs to overlap.
This causes a horizontal scrollbar to appear. How can I get rid of that?
problem site
Because of your absolute, adding a 100% to the element will extend it the size of the viewport from where it starts.
I believe what you're wanting to do can be accomplished by keeping the absolute there, but also adding a relative positioning to your #content rule:
#content {
position: relative;
}
I have been editing a WordPress website for the first time and now I have had a problem where the main content div overflows the footer and i'm not sure how to deal with this.
Here is the website:
www.twazzle.co.uk/twazzle/wordpress/
Any help would be appreciated.
Your #content and #primary elements both have absolute position, so their dimensions won't affect the layout of anything else on the page, when they grow/contract the other elements don't grow/contract to fit. Start by changing these both to position: relative or static, this will cause some other things to break due to the way the css has been written, but you'll have to take that as a starting point to fix it.
You've got a few problems here. One, you have floated elements inside blocks with no float or clears. Two (and this is your main problem) your #content div is position:absolute but nothing else is. With absolute positioning your divs will ignore others resulting in overlapping and other messiness. To fix, before making an element position:absolute make it's containing block element position:relative. You'll also want to fix that float problem.
#main {
overflow: hidden; //this tells it to contain floated elements inside it
}
#primary {
float: left;
margin: 10px;
position: relative; //this will contain nested absolutely positioned elements
width: 999px;
}
I'm trying to add caption of images on top of the image. These images should be floating in a grid-like system (without an fixed height!) like in the fiddle I made over here http://jsfiddle.net/thomasjonas/GzjuM/3/
You can already see te problem... Because of the absolute positioning of the title and image inside the relative item div, the relative item div doesn't get the appropriate height, but just the height of the border... How can I fix this? I have looked for answers everywhere, but most of the time the problems of others are solved using a different approach. The only other approach I know for my problem is using an image as a background for a div, but then I need to know the width and height of my image... What is the best solution for this problem?
Don't position the images absolute. Instead render the <div class="image"> elements as block (using display:block if you changed your div style somewhere) and set up a margin instead of fiddling with absolute positioning:
.item .image{
display:block;
margin-top: 1em;
margin-left: 1em;
}
JSFiddle
This problem is probably quite easy to solve but I'm not sure what I do wrong.
I have the following code:
HTML:
<div class='absolute'>
<div class='container'>
<span>blabla</span>
unknown number of spans..
</div>
</div>
CSS:
.absolute{
position: absolute;
bottom: 0px;
right: 0px;
}
.container{
float: right;
}
span{
display:block;
float: left;
}
Basically what I want is to have all the spans in one straight line at the bottom right. The absolute div works perfectly and container div float right exactly like I want. The problem is that the spans refuse to line up in one row. I get the following look:
The red is absolute div, the blue the container div and the green the spans. Well you see my problem..
I have tried to give the container div a width. This result in a straight horizontal line, like the one I want, except that the spans float to the left as far as the width of the blue container div. And I can't calculate the width because I don't know the number of spans.
So how do I solve this without changing any order and without setting a width to the container div? Or rather, why does the container div shrink at all and not just stay as wide as the floats wants it to be?
Thanks for any answer!
change display:block to display:inline-block?
Change you span to:
display: inline-block;
should make them go next to each other.
This isn't supported in IE7 or earlier though, if that's important to you, you can do this:
display: inline-block; *display: inline;
Oh and remove the float left on the span.
I have a modal box where I'm trying to put two columns beside each other, and I did that by assigning float: left to one div (.center-columnb) and a float: right to .map-column.
What happens, however is that 'center-columnb' breaks the container div with the grey gradient background as if this div was placed UNDER that container div (notice the rounded edges on the bottom of the grey part, that was meant to be at the bottom of the div.
When I remove float: left from centercolumnb from style.css, everything is ok except that the column on the right does not stay there anymore. Does anyone have any alternatives that could help me? Thanks :)
You have a parent div of #contentholder but it's not containing the floats within it at this point. A floated element, by default, is taken out of the document flow and any parent div will collapse. To make it contain the floats within, you need to give it an overflow property. This should do the trick:
#contentholder {
overflow: auto;
}
Another way is to clear at the bottom of the Question container. For a full cross browser compliant solution, just add before the closing div:
<div style="clear:both"></div>