http://www.akebulan.org/index.html
I am trying to get the sidebar to take up the space it has available. If I set both html and body to 100% the div becomes much larger than needed. I want it to match the container on the right. Is this possible? Thanks!
if you want set background on 100% height left side:
set background in div id="main-div" like this background: url('img/Texture2.jpg');
set background in div class="col-lg-8" like this: style="background: #f7f7f7;";
your example: travelletters.ru/test.html
The problem is that your content is bigger than your sidebar.
What you could do is have a 'main-content' div (which contains your sidebar), and you just set your sidebar to height=100%, so it fills the vertical space needed by taking into account the content on the right
Your sidebar is overiding your content, so there needs to be some buffer or add height css
Related
I am building a web site for home made jewelry. I'd like it nice and centered ( for all those ppl with low resolution ) so all of the titles, navigation and content are in a single div, that I positioned in the center. On the left ( inside the div, everything is inside the div ) I have my vertical navigation sidebar div. On the right I have the title and the content. So far so good. Now to the problem:
I would like my sidebar to have a right border all the way from the top of the page to the bottom ( with 1em margins if possible ). The trick is that my content to the right variate from text to pictures and forms and is quite different on every page - when the content is larger then the screen the screen scrolls and in which case I'd like my sidebar border to scroll down with it - I've not been able to do that.
I think I have done quite a reading - my closest solution was to set the border's position to static but this quite obviously isn't working when the site is centered. So to the question - is there any CSS only way to make the sidebar div's height dynamic or something and define it to expand with the content to the right? This way the border will always reach the bottom.
Wrap your navigation in another div. Give this new div a height of 100% and assign it a border-right CSS property. You can also set padding too. Hope this helps.
How about giving left border to the content section Div, instead of Nav menu. so that way the border could change height according to the content area height
body,html{
height:100%;
}
#wrapperdiv{
height:100%
}
#navigation{
min-height:100%
}
I am using :before and :after to create some elemetns outside of my main content block, they have width:100% so they fill the full length of the browser.
Unfortunately they add a scroll bar to the bottom of the screen that I dont want. If I use overflow:hidden, the scroll bar goes but the designs are clipped and I loose the content on the sides of the site.
Any Ideas?
the width of the elements totals 100% + 100% = 200% of the (I am guessing here) body width and then add your main content block width - this is why you get the horizontal scroll bar.
as a general suggestion, post the code on jsfiddle.net so we can have a look and play with it, because it is not possible to help you more without it
I have a fixed size layout where I center the content container.
I want the menu (home, about, contact, login), to span 100% of the screen.
Take a look at this jsfiddle: http://jsfiddle.net/Hxhc5/1/
The result I want is this:
I have tried a to make a 100% width container with the menus, where I would have a container inside to center the menu, but it did not work well, because then the layout is relative, changed with the window size.
Wrap an extra div arround the menu, give it the grey background, remove the extra padding, make the menu bg white:
http://jsfiddle.net/sg3s/Hxhc5/3/
This is problematic when we want to keep the space between the menu and the right col 'open' though.
The easiest way and probably the best is to have a mock image of which the middle is left 'open' and use it as a background. Since a png image of this type is insanely small it is better than more markup, css or a js solution, plus it has no quirks if used correctly:
http://jsfiddle.net/sg3s/Hxhc5/10/
You also showed your actual developement site; if you want to implement this for the menu you will have to make the menu fixed height (everthing else and its width can still be fluid) due to the type of opacity you use in the layer. The same background trick can be made to work with it.
Why not use a background image that spans the entire page instead?
Just add the content of the menu into another div, with width: 500px, margin: auto; and set the menu width to 100%. Here is updated jsFiddle : http://jsfiddle.net/Hxhc5/2/
So I know the first thought is "Sticky Footer", but that's not really the case. It's the footer height that's the variable.
I have a page where the main content is 200px margin from the top... after the content, I need the footer to extend all the way down for the remainder of the browser height; there will be a 1600px background image that will repeat-x
Here's one trick. Make your header, content, and footer as you normally would. Set the height of the footer to 100% and give it the position:fixed attribute, and make sure that you don't give it a top, bottom, etc. attribute. This will take the footer "out of flow" but leave it right where it would be naturally (this removes any ugly scroll bars).
you can see it in action in the example demo here.
Why not just make body have the background-image of the footer?
Then, you can set the main content to have whatever background you like, and the footer will appear to extend to the rest of the page.
http://jsfiddle.net/JFtwD/25/
Here is how you could do it. Don't know if it is the best solution, but it is a solution.
I'm dealing with a text who goes out of its div. I've coded the frontpage. So, no matter how long the main content is, it should force the sub-content (the grey area and the footer) to move down.
You see how the dummy text is acting
URL http://nicejob.is/clients/pizzahollin/www/divproblem.htm
I've accomplish this before but somehow it's not working now.
You've set an explicit height on that div. For it to reshape itself to its content, you'll need to set height:auto. (or never set its height in the first place)
EDIT: As ANeve said, you'll need to remove the height on both .article and .opentext, as well you'll need to put a clear:left on .lower-container to push the footer down.
If you have an element that only contains floating elements, the container's height will be zero. To fix this you can add a clearing div (<div style="clear:both"></div>).
If you add a clearing div at the end of the #under-content section, it will automatically adjust the height of the section to it's contents.
The other issue you have is that you are using relative positioning on your .opentext div elements. When you set a 'top' property, it actually pushes the content down, causing it to overlap with your #lower-container. You're better off using the 'margin-top' property, which will expand the size the .opentext div to fit all the contents.
So in short:
Add <div style="clear:both"></div> at the end of the #under-content <section>
Change the 'top:82px' to 'margin-top:82px' on your .opentext div
I hope this helps!
Just use wordwrap: break-word; for the div and it will break the word to the next line.
You have set the height property of your .article and .opentext divs. If you remove this property, the content should expand accordingly.
However, you will also need to adjust the positioning of your background image. You should set the background image of .footer itself, rather than relying on one statically-sized background image for the entire page.