parent div don't wrap child div
Try assigning display:inline-block
to your innercontainer
element. Try this code.
.innercontainer {
background-color: #f3f3f3;
display: inline-block;
}
Parent div not wrapping child element with float attribute
Try adding float:left
and display:block
to the outer div
see updated example - http://jsfiddle.net/jordanlewis/gDtSZ/1/
Parent div not wrapping child div when screen is resized
I managed to find a solution to my problem. The problem was not my invalid markup; it was actually the CSS for my #topnav ID. Here's how I changed that ID to get the result I wanted:
#topnav {
background-color: #EDEDED;
height: 50px;
min-width: 1050px;
position: absolute;
left: 0;
right: 0;
top: 0;
}
The key changes are below the height property.
Why is container div not wrapping the child divs (which are overflowing the container)
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!
Tightly wrap multiple child divs with a parent div
Set the display
-attribute of the outer div #toolbar
and the list #toolbar ul
to inline-block
:
#toolbar {
overflow:hidden;
padding:5px;
background:#FFF;
border-radius:5px;
border:1px solid #AAA;
margin-bottom:15px;
display:inline-block;
}
#toolbar ul {
overflow:auto;
list-style:none;
margin:0;
padding:0;
display:inline-block;
}
I hope it helps...
EDIT: You said "tightly wrap". You have a padding in the toolbar-div. So if you really want to have it with no space towards the outer div, remove the line padding:5px
.
Keeping parent div to width and height of wrapping children
So you want the parent to shrink again to fit the width of the children each time a child wraps. I'm afraid there is no pure CSS way to do that.
Not to change your spec, but I'd suggest keeping the parent at 100% width, and stretching/shrinking the children to fit the parent. I, of course, don't know if that's an option for you, or if the width of the children must be fixed. If it is an option, flexbox or media queries are two good ways to go about it. If it isn't, you'll have to resort to JavaScript.
Here's an example using media queries and calc()
:
.cal { box-sizing: border-box; position:relative; display:inline-block; min-width: 100%; border:3px solid yellow;}.month { box-sizing: border-box; float:left; width:calc(100% / 12); height:170px; border:3px solid red;}@media (max-width: 900px) { .month { width: calc(100% / 6); } }@media (max-width: 600px) { .month { width: calc(100% / 4); } }@media (max-width: 400px) { .month { width: calc(100% / 3); } }
<div class="cal"> <div class="month">Jan</div> <div class="month">Feb</div> <div class="month">Mar</div> <div class="month">Apr</div> <div class="month">May</div> <div class="month">Jun</div> <div class="month">Jul</div> <div class="month">Aug</div> <div class="month">Sep</div> <div class="month">Oct</div> <div class="month">Nov</div> <div class="month">Dec</div></div>
How to make divs wrap *only* at their max-width, and not because its parent container is being overflown?
Don't use left
to position the element but consider translate instead. The left property will restrict the width of your element.
/* Relevant parent and child styles */
.parent {
position: relative;
width: 500px;
height: 400px;
}
.child {
position: absolute;
max-width: 250px;
}
/* Individual positioning of child elements */
#fine {
top: 30px;
transform: translateX(100px);
}
#wrapped {
top: 90px;
transform: translateX(400px);
}
#unwrapped {
top: 200px;
left: 170px;
}
#extra {
top: 300px;
left: 170px;
}
/* The rest is only styles to make the example easier on the eye */
body {
background-color: hsl(0, 0%, 90%);
margin: 0;
padding: 24px;
}
.parent {
background-color: white;
border: 2px solid grey;
}
.child {
padding: 12px;
background: yellowgreen;
}
<div class="parent">
<div id="fine" class="child">
Text should be wrapped normally with the max-width of the child, like this
</div>
<div id="wrapped" class="child">
This text will be wrapped much earlier though because it is running out of the parent container
</div>
<div id="unwrapped" class="child">
"white-space: nowrap" only prevents *all* wrapping
</div>
<div id="extra" class="child">
short text
</div>
</div>
Remove excess width on parent when child elements wrap
Creating "pseudo-backgrounds"
I have just come up with a somewhat... creative solution:
The parent is not given a background, only padding and
overflow: hidden
Each child div is given a
::before
pseudo element that will create a "pseudo-background" (z-index: -1
moves it behind the divs background)The pseudo-background is positioned with
top
,left
andright
with negative values that drag them into the divs padding.The
height: 1000%
can be any absurd number, as long as it is tall enough to cover every row of divs. The excess is cleanly cut off withoverflow: hidden
on the parent div
This is what each div looks like, the black border is the edge of the parent which is where the yellow "pseudo-background" is cut off:
it becomes this:
Note: This is a purely visual thought experiment, which may be useful in some cases. The div is still taking up the same width, it just has no background color.
Example
Resize it, see how the "pseudo-background" works at all widths.
.wrapper {
overflow: hidden;
padding: 10px 0 0 10px;
width: 70%;
}
.wrapper > div {
height: 40px;
background: #F00;
margin: 0 10px 10px 0;
width: 200px;
float: left;
position: relative;
}
.wrapper > div::before {
content: '';
position: absolute;
background: rgba(255, 255, 0, 1);
left: -10px;
right: -10px;
top: -10px;
z-index: -1;
height: 1000%;
}
<div class="wrapper">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
How do i wrap a parent div to the width of a child div (dialog)?
For young browser you may use :
1) display:flex;
property (includes centering) DEMO
.backdrop {
position: fixed;
top:0;
}
.backdrop {
width: 100%;
height: 100%;
z-index: 100;
background-color: rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.dialog {
margin:auto;
position:relative;
}
2) max-content
as value for width
and not set any width to inner
content . (exept some padding to keep room for the close button) :
DEMO
Info on W3C about those new keywords value, soon avalaible i hope.
CSS updated
.dialog {
width: max-content;
z-index: 101;
margin: auto;
/* basic way t o center */
top:50%;
left:50%;
margin:-80px -150px;
}
.titlebar {
height: 50px;
line-height: 50px;
background-color: #000000;
border-radius: 10px 10px 0px 0px;
}
.title{
color:#FFFFFF;
font-size: x-large;
padding:0 50px 0 10px;
}
.close_button {
position: absolute;
right: 0px;
top: 0px;
line-height:30px;
padding: 5px;
margin: 5px;
border-radius: 10px;
background-color: #ffd549;
color: #000000;
}
.content {
background-color: #FFFFFF;
}
.content-width {
background-color:#FFF000;
}
or as already said , use the display:
table
, inline-table
Related Topics
Fixed Position Relative to Parent Container
Angular - Show Empty Row by Default in Drop Down List and Disable Button
Add Line Break Within Tooltips
Fixed Headers on Scroll Inst Working Correctly in Angular Application
Htmlspecialchars() Expects Parameter 1 to Be String Array Given
What Does Enctype='Multipart/Form-Data' Mean
Is Putting a Div Inside an Anchor Ever Correct
Two Submit Buttons in One Form
List of Html5 Elements That Can Be Nested Inside P Element
Angular (Typescript): How to Set Option of Selected to 'Selected' If Two-Way Binded
How to Disable Hover Effect for Active Link
Css Height 100% Is Not Always Equal to the Direct Parent
How to Set Maximum Height for Table-Cell
How to Make a Div 100% Height of the Browser Window