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.
Related
I am trying to place a title and description in a out div that will wrap them. I have <div class="category_border"> wrapped around the title and description, but for some reason they are falling out of it. I have created a fiddle to help show what it is doing. Why aren't they falling in <div class="category_border">?
https://jsfiddle.net/0vkzoxm3/
Add overflow: auto to the .category_border class.
Here's your updated demo:
https://jsfiddle.net/0vkzoxm3/3/
The reason your title and description overflow the containing div is because both are styled with float: left. When you float an element it is taken out of the normal flow. Hence, as far as the container div is concerned they don't exist.
The answer is to "clear" the floats. There are many ways to do this. One way is to add overflow: auto to the container. This forces the container to expand to the height of the floated elements.
Here's a bit more if you're interested:
Clearing Floats: An Overview of Different clearfix Methods
How Floats are Positioned
Good luck!
http://codepen.io/anon/pen/Keisz/ <-- simple example
This codepen mimics an issue I'm having. I want the parent elements (outer and inner containers) to fully encompass their content (the content div) - I'm at my wit's end of how to accomplish this and I'm almost certain it's a simple fix.
Applying
box-sizing:border-box;
to the child element is not what I want. I want the parent to resize to child, not the other way around.
Any help you could provide would be most appreciated!
EDIT: I think there is some confusion. I want the parent to dynamically resize to contain the largest child width + padding. The max-height is also a requirement, sadly. :(
Remove the height and width attributes from the content div. Voila
http://codepen.io/anon/pen/pluAk/
Unless you apply box-sizing:border-box; the parent will not take into account the padding while wrapping around the child divs. You need to apply this style. Otherwise the code you've posted works just fine (it neglects the 20px padding on the innermost div and the parent wraps around the width of the child div minus the padding on thew child div).Just remove the max-height from the parent div and you are good to go
Not sure what is the ultimate purpose of why you are doing this, but assuming that it would help, this is an idea
#innerContainer {
display: block;
overflow: hidden;
}
FIDDLE
I'm having some problems with float issues and them floating outside their containers.
I know that you can use clears in this issue but I don't really understand what they do or where they should go to solve the problem.
I've created a clear class so I can use <br class="clear" />
Live site with the problem can be seen here:
http://www.rubytuesdaycreative.co.uk/testsite/shop.html
float means "Move to the side, and let content that follows this element appear beside it"
clear means "If something before me is floating, stay below it".
You can use clear to make a container expand around its floating content — by setting clear: both on a zero height element that appears after the floating content but inside the container — but it isn't the cleanest approach to solve that problem.
Set overflow: hidden on the container instead. This will establish a new block formatting context and cause the container to expand to contain the floated children.
Clear is used in the div that is being invade by the other. So if part of div1 goes into div2 and div one is left of div2, then in div2 insert clear:left.
To fix your problem add overflow:hidden to #content.
#content {
margin-top: 60px;
text-align: center;
overflow: hidden;
}
This is only one possible solution. Just as hint: http://www.quirksmode.org/css/clearing.html
To your question: I do not recommended you to add extra markup to your document to clear floats. It's a bad practice! A quite common and stable solution is the micro clearfix hack introduced by Nicolas Gallagher. You have only to add one class to your #content and you're ready to go.
You should apply clear: both to a block-level element (like div) after the last floated element. That way the cleared element will be positioned below all of the floated elements, and it will push the bottom of its container down to cover them.
I need a little bit of help disciplining my HTML. It seems to be acting up.
Anyway, the content area of a page I'm working on has two columns. To get the multi-column look, I'm not using one containing div for each column because some of the "rows" in the column need to be lined up.
So instead, I'm basically using several "rows" with two inline divs per row -- one for left content, one for right. Most of them are working correctly..but for some reason, my last row isn't. No matter what, it will not listen to me when I give it a width.
Here's what the relevent HTML looks like:
<div id="mainContainer">
<div id="topBar"></div> //full width
<div id="featured"> //this "row" is working fine
<div id="featuredVideos"></div> //these two
<div id="featuredLiterature"></div> //are inline
</div>
<div id="browseButtons"> //this is the "row" that is acting up
<div id="litBrowse"></div> //these two
<div id="vidBrowse"></div> //are inline
</div>
</div>
In the mean time, what types of situations can cause a div to not listen to a width? I even went so far as to give every single child div inside litbrowse and vidbrowse1 the same width that they have, 450px, and no dice. All of the content above it, which has essentially the exact same structure, is working fine. The only difference, maybe, is that the "row" above the row in question is comprised of two floating divs.
Here is a jsfiddle showing the issue. The bottom two divs (Browse lit by category, browse vids by category) should be spaced out, but they're scrunching together because they won't take their 450px width.
The problem is that you are saying that .browseBtn is inline. Inline elements don't take widths, only block level elements do.
Using inline-block instead will do what you want. It is inline enough to make the divs side by side and block enough to allow you to specify the width.
See http://jsfiddle.net/abtFr/2/
SECOND EDIT - Others have responded saying to use display: inline-block instead of display: inline. inline-block is not compatible with IE7. HOWEVER, we can make it compatible by appending
zoom:1;
*display: inline;
to the element using inline-block. To make compatible with IE6, you need to specify a height, so add
_height: [yourheight]px;
The underscore will target IE6 only.
Alternatively you can float the elements left, in which case my original reply may be relevant.
EDIT - I responded without seeing the jsFiddle; this response can probably be largely ignored.
To answer your question, floating an element will cause it to be taken out of the normal layout. If a div is floated left inside another div, it will be placed to the far left of that container, but its dimensions will not be taken into account when sizing that container div; in other words, that container will act like there are no divs inside.
To fix this you need to place another (empty) div inside the container, after the floating divs, and assign the style "clear: both" to it so that it will take the floating divs into account when being positioned. In turn, the container div will see the last cleared div and resize to take it into account.
Alternatively, sometimes you can skip adding the cleared div inside the container, and just add the style "overflow: hidden" to the container itself. This is somewhat of a hack, but a pretty robust one as far as hacks go.
Hope this solves your problem; if not we'll have to wait for more information.
It's simple, yes, you have a div, but you define its display as inline (with .browseBtn definition). So it's not a block-element anymore and it doesn't listen to width definition.
I've corrected the fiddle, although it might have other side effect.
I'm trying to get my wrapper to hold my content but it won't. I've taken out the floats and added "overflow: visible" no no avail. I'm thinking it's because of my z-indexing and negative margins, but have tried taking these out and still no change. Any ideas?
http://www.jenniferhope.com/bio
(the float is still in this example.)
Thanks for any help you can offer!
Try this:
#wrapper {
overflow:auto;
}
I took a look at the code on your site. There are a number of things you will probably want to address. It will be difficult to say exactly what you need to do, since I don't know exactly how you want the site to look. But, in general, here are some pointers:
To contain floated elements, apply overflow:auto; to the parent element, or place something to clear the floats at the bottom of the container, such as: <div style="clear:both;"></div>
Try to avoid using negative margins for positioning. This is OK in a pinch, but usually there is a better way.
If you need to have one element layered over another, you will need to position the element using position:absolute; and a z-index. When using position:absolute; the element will be positioned relative to the nearest ancestor that has position:relative; applied. If no element has this applied, it will be positioned relative to the body element.