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.
Related
I have been trying so many different solutions to solve this problem without reaching any solution that actually works so I cant post any css (since its not working properly, so I dont even know if its the correct "way" to build further on anyway).
Case: One div with width 100% (its parent varies in size) with two children inside. The div should never exceed hight of one text line/ text row.
<div class="parent">
<div class="child">Text from left</div>
<div class="child">Text from right</div>
</div>
Goal: Make the children divs auto adjust to fit as much text as possible (on that one row) and if the childrens width together exceed its parent div width then hide the overflowing text in second child with ellipsis.
Is this possible with pure CSS? With script I sort it but not with only CSS.
Thanks (sorry for bad english).
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.
I've been trying a few techniques, but I'm getting stuck on this problem. I want to do the whole 100% height columns within a section thing, but one column has an image which needs to scale to fill one column.
So I have one column of text (variable content from WordPress) that is 66% wide and one column that holds an image and is 33% wide. The image can be on the left or the right based on a class.
My HTML:
<section class="page-section color-brand left-image image-third">
<div class="page-section-mid-wrapper">
<div class="image-wrapper left-image image-third">
<img src="img.jpg" alt="">
</div>
<div class="page-section-wrapper">
<div class="page-section-content">
Variable content here
</div>
</div>
</div>
</section>
Most of the CSS techniques do tricks to get a solid background color in both columns. But in this case, I want a scaled image. I'm willing to switch from an img tag to an inline style="background-image" to get the scaling to work, but either way, I'm having trouble getting the column heights to match.
The closest solution was to use display:table, but I don't like that I can't change which side the image is on without changing the HTML. With my current float based design, I can swap the image placement with just a different class (the left-image above for example).
With just floats, here is an example of what I have so far: http://jsfiddle.net/no80ayc2/2/
You'll notice that when the view is narrow, the image is shorter than the overall container height.
I've read something about using relative/absolute positioning, but the only way I could get that to work was with a fixed height for the container. That won't work for me: http://jsfiddle.net/qLa4g7fL/1/
EDIT: To clarify, I want the image to fill the entire space (33% width by 100% height). And I expect it to get cropped as necessary.
Here is an example of how that should look (just a quick idea)
change min-width: 100% into max-width:100% in .page-section.image-third .image-wrapper img
Then your image-wrapper may not have the full height but will stop your image to overflow.
You need to change your min-width to max-width,
Try to look at this link, I just update your code
http://jsfiddle.net/no80ayc2/7/
There's a new amazing css property called object-fit!
https://css-tricks.com/almanac/properties/o/object-fit/
You'll fall in love!
*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'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?