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...
Related
When I switch off the blog part and sidebars in the terrifico theme in Wordpress I don't seem to be able to place a full width slider anywhere.
The theme looks like this in the form that I'm talking about: http://vpthemes.com/preview/Terrifico/page-full-width/
As you can see all the text is 'bounded' by a box (the black line). Is there any way in which I can make the metaslider go OUTSIDE of this box (i.e. to span the FULL width of the page)? I don't necessarily want to get rid of the box all toghether, the text can stay within it.
I have seen on the Metaslider website that some solutions for certain themes are given (here - but I am not sure how to adapt this to the theme that I'm using.
Thanks in advance!
Disclaimer
Before I suggest a solution, I'd like to point out that what you're asking is to break the Box flow model. I wouldn't recommend that because you're likely to run into inconsistent results across browsers.
That said, what you're trying to accomplish is possible. You could use javascript to do this and it may in fact be easier in some respects but here's a CSS solution.
1. Break out of the box model
float: left;
width: 200%;
margin-left: -50%;
text-align: center;
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.
The width of the container is still relative to its parent so if you use % units to scale it up you would need to compensate for the responsiveness of the parent. Here, I'm just overcompensating.
To ensure that our element remains centered, we use a negative margin that is half of the overflow. That is, we want our box to be 100% wide, we have 100% overflow to ensure that so half the overflow is 50% (comment below if that doesn't make sense).
We use text-align to put the element we add in step 3 in the center of the viewport.
2. Allow Overflows
This is where you may well break themes. The parent elements will hide elements that float outside of them if they have the overflow: hidden property (note overflow can also be used to show scrollbars).
You will need to ensure that the parent elements have:
#post-body, .content-posts-wrap {
overflow: visible;
}
As far as I can see that affects #post-body and .content-posts-wrap
3. Add an element that will be the right size
Now we have an oversized container for our slider but we need it to be the width of the page. Inside the div or whatever it is you want to put your slider into you will need to nest another element that will be the correct width. That element will need the following css:
display: inline-block;
width: 100vw;
text-align: left;
You need display because we are back to the box model now and we want our block to obey the width rule we give to it.
We set our width using vw (viewport width) units to make this a bit easier (but they may not be supported on your target browser). There may be some ingenius way to do this without vw units but I would probably just use javascript if it's not an option for you.
Finally, since we set our text-align above, we need to reset it here.
4. Add a Clearing Div
Because you've broken out of the flow, elements aren't too sure what to do. You probably want to add another element after your parent slider that
specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them. source
It can be as simple as a <div> element with:
clear: both
write your code something like this...
html like that...
<div id="parent_for_slider">
<div id="slider">
//place your slider code
</div>
</div>
Css for that
#parent_for_slider{
position:relative;
}
#slider{
position:absolute;
width:100% !important;
height:auto;
}
i am recommending to use ResponsiveSlides.js for full width slider with responsiveness
I have a div in my page. I set it's width to 500px. but sometimes it's content get space more than 500px. so I set it's min-width property to 500px.
it expect that is takes 500px by default and take longer according to it's content. but it takes whole of the page's width by default.
But if I replace the Div by a Table, it works correctly.
Does anybody know the reason?
Please see the demo.
Demo.
You have to set in css like
min-width: 200px;
width: auto;
float: left;
Normal block and things like tables, floats, inline blocks etc. use different algorithms of calculating width. For the normal block, the width is usually the available width of the container, and min-width is taken into account only if the container is narrower than it. For the latter things, the width algorithm is shrink-to-fit.
But there are several ways to make the normal div behave like a table.
I have have some dynamically created divs in a fixed width parent div and I would like to have them distributed horizontally. As they are dynamically created so I wont know how many are in the container unless I count them with JS, which I am trying to avoid.
I was originally trying out the "Using inline-block and justified text" technique on this page; however it seems to behave a bit erracticly when there are more children than will fit ( ie when there are two rows ), ( see the second row here ) so I don't think that will work.
*Edit: Actually I just realise now that it's not actually erratic, it IS spacing the second line correctly, but what I want instead (in this particular instance anyway ... ) is for the three red boxes on the second line to take up positions under the first three of the first line, leaving two positions free at the end, rather than spacing them out too ) .... so I think in general this technique is not likely to ever work for me.
Are there any suggestions of other ways to achieve the above. I would rather not have to use JS but if there is no other way then I am open to suggestions.
It's not failing, that's the native behaviour of floats.
If you want more to fit per line, made the container bigger or the boxes narrower.
If you don't want them wrapping at all, add overflow:auto to your container's CSS and you'll get a scroll bar.
You need to make remove the width of your container and add display: inline-block; to allow the dic container to have a width of whatever the content inside has. Also add overflow: auto; in order for the div to size to the amount of generated divs in it
#container {
display: inline-block;
background:olive;
overflow: auto;
height: 180px;
}
Perhaps use relative widths rather than fixed widths for the interal divs....
#testcontainer div {
width: 19%;
height: 30px;
display: inline-block;
background: red;
float: left;
margin: 2px;
}
DEMO
I ended up conceding that I need to use JS. I added id's to the fourth child and then in CSS I was able to remove the margin from the fourth child ( all of this I presume could have been done in CSS using nth child if I hadn't needed IE8 support ).
Edit: Finally ended up getting what I want - http://jsfiddle.net/byronyasgur/kUgBA/14/
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?
Look at this fiddle: http://jsfiddle.net/guard/UtpGm/
The w is a wrapper, having both min- and max-width.
The title inside it has a long text inside.
As far as I understand the following happens
the wrapper span/div/whatever (tried both div and span with both block and inline-block display mode) first tries to occupy as much width as it can, and calculates the width sufficient to have the title on a single line (for the sample its 483px)
then the width is compared to the min amd max widths specified, and adjusted - in this case its decreased down to 380px
As a result there's unused space inside of the wrapper.
How can I make it occupy "as few space as possible" for the content to fit (to look the same, but without the unused space), given both the min and max width constraints? In the sample case the proper width is 312px.
Note: I can do really anything with the wrapper. It can be positioned absolutely or relatively, it can be child of any other element, any additional wrappers can be added.
Here's the first solution that comes to my mind that works:
$('#w').css({"width": $('#title').width()});
The fiddle: http://jsfiddle.net/UtpGm/9/
Of course, one would prefer a pure-CSS approach, so I would love to see other answers.
There is no such kind of width calculation in CSS.
The only thing that is close enough in CSS for the moment is to use display:table-cell :
http://jsfiddle.net/UtpGm/13/
When you define table-cell its width:auto value is resolved to
width:max-content-width. Here max-content-width is an internal value that equals to intrinsic max width of the content.
For <p> element its intrinsic max width will be equal to the width of its text when it is replaced in single line. And if <p> has <br>s inside - to longest line.
for some reason this worked:
#w {
border: 1px solid red;
min-width: 10px;
max-width:380px
width: auto !important;
display: inline-block;
}
#title{ max-width:380px; display: inline-block;}
Also bear in mind that some of your sample text ie"longlonglonglong" counts as one word because there are no spaces, so it will automatically jump down to the next line if it can't fit on that line and cause a white-space in the span.
Hope this helps, cheers