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.
Related
I have been really stumped on coding this mybb theme. So first off there seems to be a constant padding around the entire container. With firefox I used the identify and the container is only reading my screen to be like 1583 wide while my screen in actuality is 1,600. It has padding for the height as well. Also it seems that whenever I adjust the width to a smaller width it is weighted to the left. I don't want everything floating to the left.
http://img689.imageshack.us/img689/4378/3xeu.png
In this photo provided I have all container, and body set to 100% width. The menu seems to go past it only because I said the width of that to 9,000px wide. But it refuses to go any more left.
it's a margin, not a padding, it's set in some browsers by default in the body tag, just add this to your CSS:
body{margin:0}
To add to the answer above, you should really considering using and adding normalize.css with all your projects/code in order to avoid these issues in the future.
http://necolas.github.io/normalize.css/
Here's a sample of what's not working: http://jsfiddle.net/EJuzv/29/
I need to wrap everything within a div so that I may give a width, and center with margin:0 auto;. As it is, works in every browser except IE6. Everything I try results in losing my sweet divs that extend 100% to the stick footer.
Can anyone crack this case?
You may very well have tried this approach already, but maybe it'll help you crack this problem. Absolute-positioning the header against the top-left corner is unnecessary and just forces you to pad the "container" holding your three colored elements.
http://jsfiddle.net/piersadrian/mKQ89/1/
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)
I have a website built with divs floated to various parts of the pages to create the look I want. My problem is, when I make my browser smaller the floats all cram to the left side instead of holding their positions and simply giving a scroll bar.
All I want is for my pages to hold their form when the browser is not maximized.
I suggest you put a min-width on the div wrapping all your floating divs.
Than all your div will be floating as normally, but when the browser will be smaller you will have a scroll bar.
Yeah the code would really help, but a solution (I think) would be to wrap all your floated divs in a div that has a defined width.
I've been digging around in here and none of what I've tried yet has worked. I have a page where the containing div will not stretch to the bottom of the page when the content gets too long. I am almost sure the problem has to do with the div soup that was handed to me.
http://www.edjetest11.com/supremeshowsupply.com/products.php?catid=1&subcatid=1
Can anyone help me, please?
The style for #box_inside has a height set, which keeps it from expanding. If you remove that, it will expand to contain its children, and the outer divs will also expand.
Now your problem is that the background image is made to fit that exact size...