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?
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.
So if I take a div and add this to it:
<div class="dongs">test</div>
<div class="dongs">test</div>
<div class="dongs">test</div>
.dongs {
background-color: blue;
max-width: 500px;
display: inline-block;
}
It will make the div's line up beside each other with a blue background BUT the max width will
appear to not be working for some reason.
The reason why I need max-width to work is because if I have those beside each other and lets say
a user comes a long with a small browser it will resize the div's and squish them in so that they
are smalled which is what max-width does. Allows the container to become smaller but not larger.
However, if I remove the inline-block; the div's wont be next to each other BUT the max-width
will work and they will resize. Please, I need help. Thanks
EDIT: I did research a lot but cannot seem to find the answer. I did see one stackoverflow post but
it did not make sense to me and didnt help. Here
You can achieve what you want by using the below code:
.dongs {
background-color: blue;
max-width: 33%;
display: inline-block;
}
Explanation: Since we are not setting any explicit width at start, the browser will assign the minimum width required to fit the contents of the element for all the elements (like you can see for the 2nd and 3rd div's the width is different based on content). However, setting the max-width: 33% means that the browser at any point of time would only allocate a maximum of 1/3rd of the parent element's (or body if no other parent) width to this element. So, if the content is anything more it would start wrapping around.
You would also want to set either overflow: hidden; or word-wrap: break-word; in addition. The first makes the overflowing content get hidden (would be helpful when they are very lengthy words) while the second break's lengthy words and then wraps it around to the next lines. Either one can be used depending on the needs.
Demo | W3C Spec for Min/Max Width
I believe it's because you haven't specify the actual width, and instead of using display: inline-block, it would be better to use float: left and add some margin if you need any space between those div. But, don't forget to change the width property.
Check out my JSFiddle...
i have a div inside its parent div and code is shown below
<div style="width:100%;height:400px;"><!--main_div-->
<div id="left_container" style="width:float:left;width:220px;height:1000px;"></div>
<div id="middler" style="float:left;width:800px;height:800px;background-color:#333;"></div>
</div><!--end_of_main_div-->
this code is perfectly HTMLized in browser
But when i resize browser(change the width of the browser window) the div(middler) is weirdly pushed below the main div .. why is it happening
like this page is perfectly spread even when the browser is re-sized
http://www.youtube.com/watch?v=YcpwaeP11pY
Because of this:
float:left;
What it's telling the browser is: Put these on the same line if there is enough room. If there isn't, drop it a line.
You're giving it set pixel widths, so it will always drop to the next line when changing window size.
Instead of using widths set by pixel, try using percentages instead.
Because float:left will only try and hug the adjacent div if it can. It's is no guarantee that the div will align to the right of the first div. It will only do so if it has enough space within the browser window.
If you want to keep the div entitled 'middler' to the right of your other div, you'll have to either use percentages or used fixed/absolute positioning.
The question alone is none-too specific, in my opinion.
You also have an error in your syntax on line 2:
This:
width:float:left;
Should really be this:
float:left;
But this probably won't solve your issue.
Because if the browser width is ess than 1020px, there is no longer enough room to fit both boxes side-by-side, so one of them has to give.
Try setting the size in percentages.
Like someone already said, if you set it to pixels the size is static and if the browser doesn't have space to fit both horizontally it will try to fit them vertically.
You could set a static min-width for your main div:
<div style="width:100%; min-width: 1020px; height:400px;">
Note: when you add a padding, margin or border to #left-container or #middler you should add that number to the min-width from your main div.
I have this:
http://jsfiddle.net/UHrLH/1/
I set the height on the box element to auto, but min-height is 200px;
Now if i try to make more content in the first box, the height expands but it creates a big white space under it. I do not want that, i want to have the box under eachother like you can see above, where the height on all boxes is 200px
See the issue here:
http://jsfiddle.net/UHrLH/2/
http://jsfiddle.net/chricholson/UHrLH/10/
This will give you boxes inline but unfortunately the pairs will not extend to match the height of it's partner. To do this you will need to use tables or a javscript overwrite to capture the height. Also, bear in mind display: inline-block will not work on divs in IE7 and below, it would work on a span though: http://www.quirksmode.org/css/display.html#t03
http://jsfiddle.net/UHrLH/11/
I have added an additional div if that is ok for you...
<div class="box_Container">
I have a page with two divs on it which should fill the entire screen.
Both of them have width = 100%
The upper one's height should be defined by its content (the minimal possible height that fits all content) and never show any scrollbars.
The lower one should fill the rest of the screen. However, if its content does not fit the div, it should display the vertical scrollbar.
Like this:
<div id="header">This block should not display the scrollbars</div>
<div id="content">This block should fill the rest of the screen and show the vertical scrollbar if the content does not fit</div>
How do I do it with CSS?
Update:
I'm looking for a solution that would not require me to set the fixed height for the upper div.
Is that possible?
this should fix your problem
#header{ overflow: hidden }
#content{ overflow-y: auto }
edit: you have to define the height of the divs aswell
In order to do it with CSS you need to define a height on the bottom div, and then add overflow:auto.
.content {
height:90%;
overflow:auto;
}
Unfortunately, this means that your top div will need a height defined as well, because content will have to take up a predefined amount of space on the page. If you use percentages for height, then you will need to define a height for your header div so stretching and shrinking the browser window doesn't cause issues.
The only way I can see you achieving this is through Javascript. I know you didn't tag/ask for JS but I can't think of a straightforward, elegant CSS solution.
With JS you could capture the onpropertychange event of the header div, check to see if the property changed was offsetHeight/clientHeight and adjust the top style property of the content div. The content div would also need to have position:absolute; and bottom:0px;.
Sorry if you're not interested in a JS solution, I just don't think there is a CSS one without accepting a user experience below what you're trying to achieve.
You should define fixed width for second div and use overflow css property to define scrollbars.