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)
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/
I have been looking for tutorials on this for a while now and am coming across a problem. I have a layout with a fixed header at 100px in height and a fixed footer at 50px in height. In my content, I have a menu on the left at 200px wide and content on the right that fills the rest of the screen. My header, footer and menu all have styles applied for background colours and borders.
What I want is for my footer to remain at the bottom of the window, or at the bottom of my content, if the content is longer. I want for the menu to be the same height as the content, so that the styles I have applied will remain intact. What I get is either the footer sticks to the bottom of the content because the content is shorter than the menu, or there is a gap between the bottom of the menu and the top of the footer.
Every tutorial I have found fixes this, but requires the menu to have no background (it takes the background styles from the <body> tag. As I said, the styles I have applied are attached to the menu. Is there a way to fix this?
UPDATE: My source can be found at http://jsfiddle.net/53SZd/3/. That is what I have now (apologies if the floats cause all manner of headaches), but if there are ways to have it looking how I want, I am very open to suggestions.
UPDATE 2: I think my way of explaining this is wrong. I have uploaded some images of what I want to my Google Drive that should explain what I want.
Whilst I do sincerely appreciate the help that I am getting here, there is always one caveat that appears. Many thanks to Waz for his help, I do really appreciate it, but I am coming across one issue or another with each answer. I never realised that getting the effect I want could be so hard -_-"
seems that u might be using float property on the menu, if that is the case you would have to clear float with the footer or a div, but seeing the codes would be great help for your answer
one way to do it is to put a margin-left on your content of 220px (200 for the menu +20 for it not to be just aside the menu)
had the same problem, this solved it.
for the footer, the solution of james is the best ( put clear : both on your footer)
here is how it works : http://jsfiddle.net/53SZd/19/
EDIT : I understood the prolem was for the content.
give your menu top= 111px(100 size of header, 11 for padding) and bottom=51px (50 height footer,1 border) and your footer bottom=0px;
How can I put the height of side by side DIVs?
When I change the width of browser, sometimes the left div get higher or shorter than the left.
I want that automatically the left or the right div grows up to became with the same height of the other one.
Setting a display table-row is the best solution for this?
Take a look at the image of the page I want to develop.
http://i.imgur.com/BhvV2.png
I solved the problem using display=table-row, table and table-cell. I've added one div to be the table.
Now it is perfect! Take a look.
http://jsfiddle.net/tcWCC/47/
Here's a solution, also found on SO
http://jsfiddle.net/kaAjW/
Here is the link to original post
How do I keep two divs that are side by side the same height?
The technique is called Faux Columns and here is an article about it
http://www.alistapart.com/articles/fauxcolumns/
I solved the problem using display=table-row, table and table-cell. I've added one div to be the table. Now it is perfect! Take a look.
http://jsfiddle.net/tcWCC/47/
If what you are trying yo do is to place the content in a grey box with rounded conrners then your divs don't need to be of the same height. Just move the background-color and border-radius to the enclosing div: http://jsfiddle.net/tcWCC/41/
I think you won't be able to do that without using a html table.
I have a topbar with position:fixed which also contains anchor links (jdjd).
The problem is that the target is placed in the top of the viewport (behind the fixed topbar).
how can I fix so the the browser scrolls so that the target is shown just below the topbar?
As far as i know there is no clean soloution. If you use inline scrollbar it can be achieved, but it needs a fixed height then.
2 soloutions found using CSS: http://css-tricks.com/hash-tag-links-padding/
Else you could pretty easy use JQUERY to measure the users height, put it into a container div, and have scrolling on that.
See: http://jsfiddle.net/jpGdu/
Another soloution could be giving the element ur linking to a padding top (if it's h1 or whatever) :)
Not sure why you're being downvoted, it seems like an honest a good question.
I'd put a margin-top on the viewport, equal to the height of the fixed topbar.
http://jsfiddle.net/justiceerolin/KfMLJ/ as an example
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.