I have a div that is sized by placing left:260px to make it stay to the right of the menu bar, as seen in Before. but once the user try to highlight something, it went to the right with 260px extra. It is sized for responsiveness so I use 100% but can't get a right percentage to prevent that from happened. Any idea how can I fix that? Preferably CSS directly, not calc or jquery. thanks
Related
Can't for the life of my figure this one out...
Does anyone have any idea why the large red div at the bottom of this page is not flowing below the DIV above it, (but the red div is "appearing" behind it, and getting partially covered)?
I had the same problem with the ABOUT div at the top of the page flowing behind the div above it. The only way I could find to resolve it was to position:relative, and set the top to 45px. Same fix works here, but I would rather figure out why it is not flowing below the content above it than hack it. The Div above it has clearfix applied, and the issue doesn't seem to have anything to do with floats...other than that I am all out of ideas, and still fairly new to CSS...
http://firewalkcreative.com/2012/2012.html
The section (id="work") immediately above it has the styling 'position:relative;top:45px'. This moved it down 45px from where it would otherwise be, covering the top of the following section.
Link to site in question: http://www.christopherwarrington.com/testing_ground
I have a start screen that is set to z-index 100 to make sure it is above all other DIVs. When you click the Enter button, the Start screen slides away.
The Main DIV is set to a z-index of 50.
The problem is that when the Start screen slides away, you can read everything within the Main DIV, but can not necessarily click the links. You can see this in effect at the end of the 3rd paragraph. If you scroll the mouse over the link, the left side will not allow you to click it, but the right side does.
Now, if I change the z-index of the Main DIV to be higher than that of the Start Screen, all links are accessible, but the Start screen slides up and down behind the Main DIV, which is not useful.
I am at a loss. I do not know why when the Start screen slides out of view, why it prevents the links from working. I am sure I am missing something obvious and I appreciate any advise from an extra pair of eyes. Thank you.
The start screen div is covering up the rest of the content so that clicks that appear to be over a link are actually over the start screen, and thus do nothing. Somehow the bottom area of the start div is transparent, so it is covering those links and making them unclickable even though you can't even see it. The easiest way to fix this would probably be getting rid of that transparent part. The easiest way to fix this would be to get rid of that transparent part, which is coming from the div with id="enter_btn_wrapper". The div is currently set to have a height of 500px and a width of 300px, which makes it come down right in the middle of the page over your content. It doesn't cover everything; notice how you can still click links that are farther down the page or far to one side with no problem.
Seeing as all this div does is provide a handle for you to position the actual div with the button as its background 75px about it, you can set its height to 0px and be good to go.
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 have created a div with an image inside. When clicked it resizes the div and places a larger image in. The side effect of this seems to be that the wrapper div moves a little to the left.
I have tried a few things but here is the code. Hope you can help.
http://jsfiddle.net/iamjasonlucchesi/3FuJ6/2/
Please make sure you can see the margin between the body and the Wrapper before testing the code.
Also note images dont work as I have not put them in.
The problem is a Horizontal Jump, caused by no scroll bar being displayed in some browsers.
The link below is how to solve it.
http://css-tricks.com/eliminate-jumps-in-horizontal-centering-by-forcing-a-scroll-bar/
Warning, the page contains some NSFW images.
http://neekeri.com/2012/
I'm trying to make the left div 300px width and the right one to be rest of the page.
I finally figured out how to get them stay next to each other like that, but the fix I used made the heights all weird.
HTML & CSS:
http://pastebin.com/tggteQWg
Any suggestions/ideas?
In your CSS (within div#right), if you remove margin-left : 300px it should fix it. Alternatively, you can remove overflow : scroll.
(Don't remove them both, but try one or the other, both seem to fix your issue)