I have a container with a height of 100% so the height will be dynamically changed to text inside the container.
anyway, the container have a background with a custom image (using background-image).
now, when I create a < div id=blabla" > with { float:left; width: 100px; height:100%; }, the background which defined in my container doesnt show on the div.
but if I remove the float:left, the background does shows up
any ideas what the problem could be ?
To fix this, add the following as you mention to the container element.
overflow: hidden;
If you are still seeing this issue in IE6/7, you will need to enforce hasLayout, this is done by adding this to the container element.
zoom: 1;
Hope the IE6/7 addition helps you out.
It's a little unclear from your question but I'm assuming the floated div is a separate div inside of the container div? By default a floated item is not "contained" by the container. This is just the way floats are supposed to behave. If you put "overflow:auto;" on the container div then you will generally get the behavior you desire, but read a more thorough discussion of the topic here: http://www.ejeliot.com/blog/59
I made it.
The solution was to add
overflow:hidden;
to the container div.
Related
I've got a Quasar layout, and a component that I need to fill 100% of the height of the q-page-container element. The problem is that the container does not fully expand to cover the entire height (unlike the drawer, which, using absolute positioning, does).
All CSS-tricks I've seen to tackle this problem interfere with the properties of the parent containers, which I'm reluctant to do to make sure I don't break any properties necessary for internal Quasar layout. Setting the child div of the container to height: 100% has no impact, setting it to an absolute value such as 100px does correctly set the height, but I need it to adapt to the browser viewport.
I've set up a fiddle to illustrate the problem here.
In this case I'd like #troublemaker to fill entire height of its container - or rather, its grandparent minus the header height, since the parent container simply expands to whatever content is inside.
PS: CSS layout and positioning have always seemed counter intuitive to me, so if anyone has some good advice on resources to learn how to better understand the logics of it I would appreciate it immensely!
If you have a div inside a q-page, I found the proper way to do this is to let the div inherit the min-height CSS property from the q-page component.
I updated the fiddle to show it: https://jsfiddle.net/u39qbrpj/4/
#troublemaker {
min-height: inherit;
background-color: green;
}
I think q-page-container need a q-page.
So just replace your div by a q-page and it's work.
here is your fiddle fixed: https://jsfiddle.net/uab1rnjh/2/
Or if you really want to work with a div.
You can do the trick with css: height: calc(100vh - 50px);
Here is your fiddle with a div: https://jsfiddle.net/yghL6so8/2/
In the documentation, you can see QPageContainer encapsulates a QPage.
at: https://quasar.dev/layout/page#QPageContainer-API
Using a q-page inside a q-page-container is certainly the most common way. Per the doc a q-page must be in a q-page container. However, if you want to put a div in a container and have it fill the container you can use class="fit" and the div will fill the entire container.
I'm trying to center an absolute div and at the same time also set the width of this div, but apparently only one these two things is possible at the same time. I've managed to center the absolute div rather painlessly, but setting a min-width adds this useless horizontal scrollbar for no reason: https://jsfiddle.net/pietertje1/ze7472ge/
The weird thing is, if I stretch the div to its desired width by adding in a single line of characters, it behaves perfectly.
anyone any idea how to fix this?
It looks like your min-width rule is causing this. Expand your fiddle output window and you'll see it go away. If you need that min-width you can target elements and apply overflow rules to them. For example
body {
overflow-x: hidden;
}
JSFiddle Link - your example with this rule
Edit
Per discussion, if you simply wish to center an element, apply the following margin rule
margin : 0 auto;
Updated JSFiddle
I have been searching for the answer to this question for a while now but here is my issue.
I am trying to create a div that hugs the left side of the browser window and when it is hovered over, it will expand and hold more divs/text.
My question is, how do I make it so when the expanding div covers text, it does not move it, also how to make it so the text within the expanding div shrinks/grows with the div.
I have tried
position: relative
position: absolute
and all
text-align
possibilities
Here is my JSFiddle
Any help would be greatly appreciated! (Sorry if this question has been posted/answered in the past)
Updated fiddle: http://jsfiddle.net/nqm9ksv8/
Moving text below
Try absolute positioning for your .grow:
position: absolute;
That way, it'll not get into the way of other elements, instead be drawn on top of them.
Shrinking text inside
To keep the text inside from shrinking, add another div inside, which has already the desired, fixed width. Add overflow: hidden; to the .grow container. That way, the contents will be layouted, but what does not fit the container is not being displayed.
Just use min-width to prevent div from resizing.
.Site-Content-Container{min-width: 960px;}
Edited: or maybe not. position: absolute; is an option. To be honest, it is not clear which text is not meant to resize.
change your "float:left;" in .grow to "position:absolute;"
is that what you are aiming for?
I know this is very simple, but i've been struggling for a while and I just can't make it work. I thought someone here might be able to give me a quick answer.
I'm trying to make a div float and align with another div. I'm trying by changing the float and display css attributes but with no luck.
I've set up a jsFiddle: jsFiddle
Thanks in advance
Here: jsfiddle
I just changed the height of the div for the example to appear better but you can set it back to your heights for your site.
I'd set the margin-top on the whole container div so that you only define that property once instead of setting it for both the menu and the content separately: anytime you're defining a value twice, you should try to put a wrapper and define it only once.
Your code works well if the screen is wide enough. Only if it's not the #content gets pushed under the submenu. To fix that give your #container a width that can accomodate both - http://jsfiddle.net/zaRqz/11/
#container {
width: 1040px;
overflow: hidden;
}
I'm trying to get the div wrapper to surround all the divs within it so depending on the amount of content the height of wrapper will grow.
I guessed that the way of doing this would be to set height: 100% but as you can see from the screen grab below, this is not the case.
Where it says 'No :-(' is what having height: 100% is doing where ideally I would like wrapper to be at the bottom where it says 'Yes' and I have drawn a red line.
Any help is much appreciated.
If you are using floats, giving the container overflow:hidden might fix the problem. If no fixed size is given to the div, this makes it stretch over the floated elements.
If you have absolutely positioned elements inside the container, it would be good to see the html/css for a solution.
Sounds like you need a clearfix.
http://css-tricks.com/snippets/css/clear-fix/
You'll want to define the clearfix class (as stated in the above link) add .clearfix to the #wrapper.
Can you post a link to the css?
The first thing that comes to my mind is the position attribute of the divs inside the wrapper. If they are set to float or absolute they will not be contained in the wrapper. That is intended behavior.
i.e. Here is a nice article about containing floats:
http://complexspiral.com/publications/containing-floats/
If, as is likely, that is the problem, you can either relative-position the inside divs or, if you are using floats, you can add an invisible block-displayed hr at the end of the wrapper, like so:
<div id="wrapper">
/*All divs to be contained here*/
<hr style="display:block;clear:left;visibility:hidden;">
</div>
The clear:left; is what gets rid of the "floating" of the previous elements. THe 'left' should be changed according to your floats.
More in the article above, this is the method i like best.