I'm sorry, I have no other way to describe this and I've frustrated myself to tears trying to figure out how to get it to stop.
I'm trying to make it so that the black div in my image http://i.imgur.com/nyLeL.png increases its width WITH the grey div instead of the grey one overlapping. The red one is just a placeholder for an image, ignore that.
The black and grey divs do not have a height attribute, because I don't want to make them into scrolly boxes, I want their height to increase with the amount of text. The white and red ones do, and I swear I have checked fifty times to make SURE there is no height attribute present in either the black OR grey divs. When I increase the height of the red/white divs the black one also gets bigger.
Ok I think I've provided enough detail, is there a way to fix this?? I've googled for hours and I just can't figure this out, I never post questions on places because I always figure it out before I even get an answer but I'm desperate.
Make sure you had cleared floats after your grey div. You can do something like below:
<div style="clear:both"></div>
Your code is needed to give you the exact solution but I hope this jsfiddle will give you a way to understand how this effect can be achieved and what you might be missing.
If you could provide your code then maybe it is possible to provide an exact solution.
Related
I'm working on a webpage, where I'm getting stuck right now.
If you take a look at this JSFiddle you will probably get the idea of how my design works. I have a div table, and on top of that I have another table as overlay, creating the effect of the div floating above the rest. This is done with absolute position, and as such works as intended. But, I always want to have it beautiful when scaling to smaller screens, and my minimum is 640px, which I try to make every webpage I make, work on.
But, if you now take a look at my JSFiddle, you should pretty much see how it should look like when as intended. Besides missing some fonts, colors etc. Buy besides that, as intended. Now, if you try to change the .content div to:
.content {
max-width:640px;
}
Instead of the 960px it is now, this should make the box smaller, as it would if you had a smaller screen, or scaled your window. But, as you see, the absolute position overlay do not extent with the rest, and is left a bit short.
I've tried multiple things with max-height, min-height etc., but nothing really worked. So I was hoping someone could give me a hint of some sort to how I could create this, with the div overlay scaling with the rest.
Hope you understand what I mean :)
Thanks in advance.
The problem is that the word in your overlay 'hjemmeside' is too long, and causing the div to overflow. You can add html { word-break:break-all; } to fix this issue. See demo here.
first of all I wanted to give you a fiddle instead but as I ran it, it looked correctly so obviously the problem lies somewhere else in my code and I have no idea where.
Basically, I want rounded borders around the 2 div columns above the footer, however they hover over the divs. Additionally as you can see, the rounded border is hidden behind the div background in the bottom corners. How can I fix these?
Link (sorry for the dodgy-looking link but that's the first free hosting website I could find to test the website before I actually get some proper hosting): http://pawel.net63.net/
Put the background image on #featured-product not #bottom-main.
Kind of hard to put into words, so here's the jsFiddle showing it.
When hovering over one of the green blocks, I wanted its background to expand enough that it "touches" the contiguous rectangles (it overlaps their margins). However, when hovering over the last block of each line, the layout goes wild: the line below only shows one element, etc.
The cause seems to stem from the negative margin; since, if the margin for the "expanded" class is set to plain 0 instead of -5, this problem doesn't happen. But of course this would leave a space between blocks.
The size of the parent container doesn't seem to alter this. Note that for now I'm not particularly concerned about the fact that the expanded block isn't well centered and makes the others in its line wobble a bit, although it may be linked to the problem.
Change de padding of the extended into 10px
http://jsfiddle.net/TMXLz/4/
The only way I can see to do what you want is to position each of those blocks absolutely (position:absolute) into the place you want them. You're main issue here is that the changes you want to make to the box are going to cause them to encroach on each others space. So you either need to adjust all their spacing (using js) on each mouseover (which sucks). Or absolutely position the items into place (specific positioning style for each box) then you won't have an issue with them overlapping partially. Just be sure to increase the active ones z-index so its always 'over' the others.
This may be the output you are looking for
http://jsfiddle.net/TMXLz/5/
So basically the website I'm designing has 3 divs inside a container div. One floating to the left. Two to the right one above and one below. They work fine when the browser is maximized. Problem is, when the browser is resized, the right divs wrap below the left div even though I've set min-widths. I want the divs to remain where they are and a scroll bar to appear instead. I did try overflow, no luck. Any solutions?
PS- Initially I had added min-width for the inner divs too. They didn't seem to solve the problem, so I removed them.
A solution or a nudge in the right direction would be really appreciated.
Here's a link to the jsFiddle - http://jsfiddle.net/R62w4/3/
Thank you, Matthew. Although that fixed the wrapping issue, my site now has a thin line of pixels on the right hand side. Any idea how I remove it? It continues from the header till the footer. It isn't affected by any changes to the CSS elements pertaining to the header or navigation bar or footer.
Okay, I found the reason to the extra space on the right side. If I increase my margins for the outer div, the space increases. Is there a way to increase the margins without getting a space?
You might be able to wrap them in this:
<div style="white-space:nowrap;">
</div>
... to prevent that from happening.
It's hard to know exactly where the problem is, could you post some code or make a JSFiddle?
Update:
I believe the problem is that you are using % based widths and px for margins - it's easy to lose track of how much available space you have and subsequently your layout falls apart. Consider that two left floated DIVs of 50% width with 1px of margin each will break on to two lines every time because that's more than 100%.
I changed your fiddle a bit: http://jsfiddle.net/R62w4/5/
... just by moving the left margin from your first DIV and right margin from your other two to the parent container seems to give enough room for everything.
P.S. You can use % based margins and just make sure everything you want to be on one line stays <= 100%.
the simpl css framework shows you how to do percentage based columns with pixel based margins which is what you want.
I need a div placed at the top and center of the page to appear over top of the scrolling content below it, and stay in place at the user scrolls.
However, due to freakishly annoying bug I can not reproduce in jsFiddle (or I'd ask for help with that instead) I can't use position:fixed and I need it to work without JavaScript.
How else can I do it?
I think I understand what you mean and I've made a little example, it's pretty self explanatory but just say if you don't understand anything, sure you will.
And if I've misunderstood, I apologise... jsFiddle 1
EDIT With Real Fix
Since I read the question wrong and a fixed position couldn't be used, I have now altered the code slightly to the following jsFiddle 2
Basically you're placing a transparent fixed div to fill the entire width of the page, and then placing your absolute position div inside that, creating the same effect but hopefully getting round the bug you've come across.