For long time I haven't been able to figure out why the width of my container gets wider when the height of the browser is reached, I mean:
As seen in pictures:
1) Container hasn't reached the bottom of the screen.
2) Container has reached the bottom of the screen.
As you can see somehow in 2nd picture container width gets bigger.
Now, the given example is shown using text only, however the same thing happens if I use columns inside the main container.
Here is the code I'm using:
<form id="exmple" runat="server">
<div class="container well" style="margin-top: 5em;">
<div class="row">
<!--sometext content here-->
</div>
</div>
</form>
What is causing this? No CSS has been modified and no custom CSS files are in use.
If you want the content to "look and have same width/position" whether there is 1 or 1000 lines, do this and there will be a scrollbar all the time.
html {
overflow-y: scroll;
}
max-width will keep the width of your container to a maximum set amount.
Once content is added the width should not be altered.
You can obtain this through CSS
EDIT: if you want the div itself to be scrollable add the following line overflow-y: scroll;
Did not know that was another thing you were looking for.
Related
I have one main div covering the 100% of the available space in webpage, and it contains three others divs, like this:
<div id="container">
<div id="header"/>
<div id="content"/>
<div id="footer"/>
</div>
I need two of them (the yellow ones) to be resizable, because their content is dynamic and sometimes need more than a single line of text. So, what I need is they cover the 20% of the available space but if they need more to resize and make the center div smaller. What should I read about? I don't find the keywords to google it. Thanks a lot!
This is a "not-working demo" haha:
Use the CSS min-height property on the header and footer divs, and remove the height property from the content div.
#header, #footer {
min-height: 20%;
}
I don't believe these answers are understanding the question.
If I get you correctly, you want to have the top and bottom be some minimum height (say 20% each), and the center fill the rest.
In that case you will have to use JavaScript. Find the height of window and set top and bot to have a min-height. This will allow them to scale. From there you will get the height of the head and the foot, subtract them from the height of window, and set the content area to be that height.
I would write you out an example but it sounds like you want to do it yourself, which I commend.
*This is just a general question prior to the development, hence no code provided.
I want a div in the middle of my site to have a background width of 100% in order to go all the way across the screen, but this div is INSIDE the wrapper/container (of which has a 980px width) so it's restricted as normal to the regular content width.
How can this happen without ending wrapper and container, creating the full width div, then making a new set of wrapper/container divs? As w3 validator states to me I should have these particular div's more than once.
Im not sure exactly what you want without examples, but you may want to try something like this:
<style>
#width980{width:980px;height:200px;margin:0 auto;background:#aaa;}
#fullwidth{height:100px;background:#000;position:absolute;left:0;top:50px;right:0;color:#fff;}
</style>
<div id="width980">
width980
<div id="fullwidth">
fullwidth
</div>
</div>
Here, I made you a fiddle: http://jsfiddle.net/Wde8W/
I was looking for a sticky footer with a full height sidebar solution and partially found it here:
yet another HTML/CSS layout challenge - full height sidebar with sticky footer
The post marked as the correct answer explains a neat solution, but I was wondering whether it's possible to turn that fluid content div in a fixed one, same with the footer. (By fixed i mean fixed width).
The content div and footer should cover the entire visible width of the screen, and when resized, they should not resize with the window. They should stay the same and have a scrollbar appear instead.
Also, another particular thing I'm after is to have the sidebar with some additional left-margin. Here's the fiddle:
http://jsfiddle.net/2NbMg/
<div id="wrapper">
<div id="content">
<div id="sidebar">Sidebar<br/>Sidebar<br/>Sidebar<br/></div>
<div id="main">
Content
</div>
</div>
<div class="push"></div>
</div>
<div id="footer"><div id="footer-content">Footer</div></div>
(the CSS can be found on fiddle in order to keep this post uncluttered).
Oh, and if there is a way to make the content span from the right of the sidebar, not from the the window, it would be awesome!
I've been searching and trying to achieve this for two days with no success. I'd really appreciate if someone could help..
Later edit #toninoj:
Thanks again for the input and I apologize for not being so explicit. Basically, I want the footer to take full width especially on widescreens and laptops. The reason why I would like to stay away from 100% width is that I want my footer to still be large when the window is resized (made smaller), not adjust itself on resize or according to the window's size. The footer will have some serious amount of data contained within it, and it would look bad on resize.
I could throw in a high amount of pixels in order to keep its width fixed, but wouldn't that create problems on laptops, for example? (scrollbar appearing although not necessary)
You need to specify exact width of an element, e.g. width:200px; and you should give it position:fixed to make it sticky. also you should give it overflow:scroll;
If you want a fixed width footer without a scrollbar, you just specify something like
width:1600px;
overflow:hidden;
I'd like to set a DIV to 100% of the page width rather than 100% of the window width.
So, if my content is wider than the browser window, I want the DIV to still scale to the full width rather than ending in the middle of the page as it does with width: 100%.
Nesting it into a DIV with width: 200%; overflow: visible; basically works, but has the side effect that you can scroll along all the 200%. And even then, if the content exceeds double the window width, the div will end in mid-air.
Example: http://jsfiddle.net/nm64V/ (please note that the 3000px wide content is just an example, in my project I don't know how wide the content will be and when it will exceed the window width)
How do I achieve the descripted behavior?
I don't believe what you want to do is possible like that. You'll probably need to give a more concrete example of what you want to achieve.
Until then I give one guess that may work: Give the surrounding element (<body> may work, otherwise add one) display: table-cell, since table cells stretch to fit their contents. If you need to support older browsers that don't support display: table-cell, try adding a single celled table around the contents instead.
Example: http://jsfiddle.net/nm64V/2/
From what I understand, you can solve this issue by wrapping all your content in a div set to the size of the content. Using your example:
<div style="margin: 0">
<div style="width: 3000px;">
<div style="width: 100%; border: 1px solid red;"></div>
<div>... Your long content goes here ...</div>
</div>
</div>
Now, whatever width you set the container div to (say, 1500px), both the inner div (with the red border) and your content will be that width, even if it stretches beyond the browser window.
In the case that you don't know what size the container div will be, take out the 'style="width: 3000px;"' line, and it will still work.
Example: http://jsfiddle.net/nm64V/1/
You should probably provide an example of what you're trying to do precisely. As a DIV is a block element, it should always take all the width available, unless it's empty or floated.
Is the "content" you're talking about inside that said DIV or somewhere else in the page?
I'm working on a site which displays a very large data set to the user which they can scroll across horizontally. I'm having some trouble with the behaviour of div widths when implementing this.
Essentially I need an outer div with a horizontal scroll and all the data displayed inside this. I have the following simple code to do this:
<div id="outer" style="height:100px;overflow:auto">
<div id="inner" style="border: 1px solid green;padding:3px;">
<div id="details" style="background-color:red;width: 300%">Test</div>
</div>
</div>
My problem is that the border defined on the "inner" div does not expand around the "details" div giving the result seen in this image: http://img849.imageshack.us/img849/1719/capturepw.png
Any simple solution to this with HTML and CSS?
Update: The "width: 300%" on details is simply to simulate the large dataset. There is no way of knowing how wide this dataset will be beforehand.
Take the width off the details div and add it the inner div
http://jsfiddle.net/jasongennaro/n88tT/
Change the width on inner for 100%, 300px, basically anything but a percentage over 100. Going with 300% will make the element 3 times the width of its parent, but won't influence it.
Edit:
Putting a 300% width won't yield the same reaction from your layout as containing lots of dummy content. Try putting some dummy content in the details element and remove the width. You'll have a more realistic result.