I'm trying to add a very wide div to an existing, non-fixed-size div. Here's a minimal example (jsfiddle):
<html>
<head/>
<body>
<div style="float: right; border: 1px solid green;">
Some content
<div id="problematic-div" style="border: 1px solid red; overflow: auto;">
This_is_a_very_long_unbreakable_string_but_I_don't_want_it_to_have_the_ability_to_stretch_the_div<br/>
It_should_have_a_horizontal_scrollbar_instead
</div>
Some content here too
</div>
Main content goes here
</body>
</html>
What happens is that the large inner div makes the outer div stretch to fit. I'd like the outer div not to resize (instead, to keep the size that it would have if the inner div wasn't there), and instead have the inner div display a horizontal scrollbar.
This is very easy to do if it's possible to know how large the outer div should be, and limiting the inner div's width to that, but here I'd like to make the outer div's size criteria to be "use whatever width would fit all inner elements, except that wide inner div".
In order to do this, my guess is that the inner div needs to ignored from the outer one's size computations for width only, not for height, and that's what I'm not sure how to do. I've tried a few things:
Setting the outer div's position to relative and then setting the inner one's to absolute. This works to the extent that the outer div is no longer stretched by the inner one, but the horizontal scrollbar doesn't appear, its position is at 0,0 from the top-left corner of the outer div, and it overlaps some of the outer div's content
Making the inner div float, and wrapping it between two clear: both elements as follows, which still causes the outer element to stretch:
.
<div style="clear: both;"></div>
<div id="problematic-div" style="border: 1px solid red; float: left; overflow: auto;">
This_is_a_very_long_unbreakable_string_but_I_don't_want_it_to_have_the_ability_to_stretch_the_div<br/>
It_should_have_a_horizontal_scrollbar_instead
</div>
<div style="clear: both;"></div>
Some content here too
Some Mozilla vendor prefixes of width (min-content, fit-content, available), but none of them seemed to have the effect I want
In short, I'd like an effect much like the HTML code listing above on this very page, but this page achieves it by setting a fixed width on the question container. Is such a thing possible?
As I've said in my comments, its not possible to limit a width without actually specifying that limit.
Do you have any guide for the sizing of the columns on your page, such as percentages or setting the main column width? Otherwise the page does not know how much space to allocate to each column and the appearance of your page will be unpredictable.
I gather the reason you don't want to set a width is so you can use the full available width of the screen. Therefore I suggest you use percentages e.g 30% of your side column on the right. This gives a predictable layout, and also allows you to achieve the scrollbar you require on the inner content because you have specified a limit on the outer div. e.g.
<div style="float: right; width:50%">
Some content
<div id="problematic-div" style="overflow-x: scroll; width: 100%;">
This_is_a_very_long_unbreakable_string_but_I_don't_want_it_to_have_the_ability_to_stretch_the_div<br/>
It_should_have_a_horizontal_scrollbar_instead
</div>
Some content here too
</div>
You will need to test that cross-browser but it should work in the majority of browsers)
The only way I can think of doing this without setting a fixed width is to do this:
http://jsfiddle.net/pgRd5/
Set the inner div width to 0, and force overflow to be visible.
Then on the outer div set overflow to auto, and the scroll bar will appear on the outer div.
If you want the scroll bar on the inner div then you're out of luck.
This is not the best solution in the world, so I would suggest setting your sidebar to have a max-width property such as in this example.
Related
I'm sure this is a very simple thing but I've been banging my head against it all day, so I decided to just ask.
I have some divs that I would like to align to the right within their parent div. "text-align: right" works if I don't specify a width:
<div style="text-align: right;">
<div>
This text aligns to the right
</div>
</div>
But if I put a size in pixels on the inner element, it does not:
<div style="text-align: right;">
<div style="width: 200px;">
This div stays on the left
</div>
</div>
What am I missing?
Actually, text-align affects the inline elements including the text.
From the MDN
The text-align CSS property describes how inline content like text is
aligned in its parent block element. text-align does not control the
alignment of block elements itself, only their inline content.
In the first case, the inner div inherits the text-align property from the outer div and applies that to its inline elements,
I.e The inner div is not aligned itself to the right or left. But as it fills the entire horizontal space of its parent, you'll see the text is aligned at the right side of the outer div.
In the second case, the inner div has an explicit width and it doesn't fill the entire horizontal space of its parent anymore, and the text-align is applied to the text not the div itself.
If you want to move the inner div to a side. You have two choice:
Use float: right for the inner and clear the float at the end of the outer div. Working Demo
Use display: inline-block for the inner and text-align: right for the outer div.
Working Demo.
The text in your second example is indeed aligned to the right. The problem is that its containing element is given a specific width so it is aligned to the right of the div with the specified width.
I believe you are looking to float the inner div element to the right since text-align does not apply to block-level elements:
<div style="text-align: right;">
<div style="width: 200px; float: right;">
This div does what I want!
</div>
</div>
In the above code, text-align: right, could also be applied to the inner div and achieve the same result (unless there are other inner elements that need the CSS).
Here is an example of all three methods: http://jsfiddle.net/6KDC4/
Im having trouble vertical aligning 2 divs inside a 100% height div. I googled but failed solving.
pseudocode:
<div container, fixed height>
<img, dynamic height/>
<div inner, 100% height>
<div><img/></div>
<div><img/></div>
</div>
</div>
The two divs in the inner div, i want them to be in the vertical center of the inner div, but i cant find a way. its not possible to know the height of the inner div, its just set to 100% because of the random height of the image above it. The divs inside the inner div will also have dynamic heights.
2 hours of fiddling around gave no results, so im coming here.
The page where you can see it in action: http://pyntmeg.no/?iframe
You can give the parent DIV.container a position :relative property since it has a fixed height.
The inner div can then have a position:absolute and you set its height to 100% or maybe a little lower. you can use the top property to move it around.
Try:
.item {
position: relative;
top: 10%;
}
You may need to adjust top: 10%;
As long as the parent/grandparent divs have the width to work with it you can apply 'float: left' to the grandchild divs style.
vertical-align is meant for table elements, not regular divs, etc. In order to get vertical-align middle to work, the element needs to be set to display:table-cell and it's parent needs to be set to display:table-row
Be careful with that, though, because it really does change the way the element interacts with it's sibling elements, and it could definitely change how your page is laid out.
The best use of this would be something like this:
<div class="table-row">
<div class="td">lorem ipsum</div>
<div class="td">dolor sit amat</div>
</div>
Css:
.table-row {display: table-row}
.td {display: table-cell; vertical-align: middle;}
NOTE
This will not work with elements that are floated left/right, and it will change how the border width effects the overall width of the element.
I would only use this with tabular data, much like I would suggest only using a table.
Basically, I want an outer DIV's height to be dictated by its inner DIVs (specifically a left and right inner DIV) and I want any inner DIV less than that height to be anchored to the bottom of the outer DIV.
Rough sketch:
+=============================================+
| **********|
| * multi *|
|********** * line *|
|* text * * text *|
|********** **********|
+=============================================+
I do not want to specify the height of the outer DIV, I want it to expand to its tallest inner DIV. Also, while in some cases it might be the left inner DIV that needs to be anchored bottom with the right inner DIV dictating height, in other cases it will be the opposite with the left having taller content and the right needing to anchor bottom.
One of my attempts was to use float:left and float:right for the inner DIVs. This nicely grew the outer DIV's height accordingly, but I couldn't find any way to get bottom anchoring for the shorter DIV.
Another attempt was to use position:relative for the outer DIV and position:absolute bottom:0 for the inner DIVs (one with left:0 the other with right:0), but that only works if I give the outer DIV a fixed height instead of having it adjust to its content.
This seems like such an easy thing, and I think it would be easily doable with TABLE, but I try to avoid that at all costs.
EDIT:
Based on the final suggestion below by bookcasey, I was able to achieve what I wanted using display:table[-row|-cell] on my DIV elements and using vertical-align:bottom and text-align:[left|right] like you would with a table. As in...
<div style="display:table;width:100%;">
<div style="border: 1px solid;display:table-row;">
<div style="border: 1px dotted;display:table-cell;vertical-align:bottom;text-align:left;">
text
</div>
<div style="border: 1px dotted;display:table-cell;vertical-align:bottom;text-align:right;">
multi<br />line<br />text
</div>
</div>
</div>
I reverse engineered a table into this. With some tweaking it could work.
div {display:table-row;}
p {display:table-cell; vertical-align:bottom; width:125px;}
I've this code :
.outer
{
width: 1000px;
float: left;
overflow: scroll;
}
.inner
{
width : 500px;
float: right ;
}
<div class='outer'>
<div class='inner'>
.....
</div>
<div class='inner'>
.....
</div>
<div class='inner'>
.....
</div>
</div>
I want to float those inner divs to right , ( one beside the other ) , and enable scrolling on the outer div when inner-Divs' width exceed parent width
Is my question clear ?
Thanks guys.
I think what you want is something like this: http://jsfiddle.net/cWpGS/2/.
Note the properties prefixed with * are needed for IE7. You should apply these two properties with an IE7 specific stylesheet instead of what I did here.
As Alejandro mentions, using floats you cannot achieve what you need. Instead, use inline-block and set nowrap to the parent div. Reset the wrap on the inner divs and you're done.
In the example you posted the inner divs have a width of 500px, and the outer div a width of 1000px, so you will not see any scrolling bars anyway.
Setting the inner divs to 1000px and the outer div to 500px, you should remove the "float:right" attribute to see the horizontal scrollbar. You can place the divs at the right side with a "margin-left:auto;" instead, but in this case it does not make any sense because the inner divs are greater than the outer div
I have come across some methods of centering a div within a div, but those usually requires the element to be centered to have a fixed width and height. Is there a way to do it if the inner div to be centered will be of variable width and height (example: centering an image inside a frame of a fixed size, and the image could be of variable width/height)
horizontal centering can be done with CSS:
#containerDiv {
text-align:center;
}
#innerDiv {
margin: 0 auto;
text-align: left;
}
For vertical centering I use Javascript if the containerDiv doesn't have a fixed height.
The only ways to center variable width in all browsers (that I know of) is with
<table align="center" cellpadding="0" cellspacing="0"><tr><td><div>This div is variable width and is centered.</div></td></tr></table>
or JavaScript
As for center horizontal that would force you to use JavaScript (I think)
IE needs a "text-align: center" on the top-level element.
For example, your body element has "text-align: center",
and your container has "margin: 0 auto".
Then IE will center it.
You can set back "text-align" to left on your container if you don't want its content centered.
Centering the width is easy...you probably already know this, but just set the left and right margin to auto. For height, unfortunately, I've only seen weird positioning work-arounds. You'd think that they'd make a similar margin for top/bottom, but alas, no. I'll try to find a link on the work-arounds.
<div style='width:400px;height:200px;background-color:#CCCCCC;'>
<div style='margin:0px auto;width:30px;height:30px;background-color:#0000CC;'> </div>
</div>
EDIT: Found link that might help on the vertical part:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
You could use the display attribute to make a table-cell out of it:
DIV.container {
min-height: 10em;
display: table-cell;
vertical-align: middle }
...
<DIV class="container">
<P>This small paragraph...
</DIV>
However, this recommendation does not really work for me. But this one does:
https://stackoverflow.com/a/6284195/156481