I have a div that holds some text, it has a background with a border, but for some reason the box is not expanding to the text, even with overflow: auto; here is my script for the box as well as a picture:
.box { background: #ffdcba; border: 1px solid #f78d25; display: block; clear: both; margin: 4px 0px; padding-left: 15px; overflow: auto; }
the divs inside are just floating, left and right, and have display: inline on them. heres a picture:
http://i45.tinypic.com/2woj1br.gif
A floated box will not expand to fit its contents. You need to add a clearing element after your content. <br> is usually good.
YOu don't specify the exact construction of the HTML, but I"m asssuming you've got something like this:
<div class="box">
<div style="float: left">test subject></div>
<div style="float: right">
<div>ASD</div>
etc...
</div>
</div>
Floating elements removes them from the regular flow and will cause the "overflow" you are seeing. You need to add a non-floated element below the floated parts to force the containing div.box to "expand" to contain the floats:
<div class="box">
<div style="blah blah" ....
etc....
<br style="clear: both" />
</div>
As well, the overflow: auto will not have any effect on your .box style, because it does not specify any height or width - it will naturally just expand to contain whatever content you put in there. To force a scrollbar to appear, you need to put in either height or width styling, and enough content to exceed either of the limits.
Related
I have been reading widely about this but haven't been able to solve it to my satisfaction.
I have a div (<section>) that contains one <p> and 3 <div>s. I would like to distribute the 3 divs equally in one line so that the left border of the 1st div is on the left border of the document (<body>) and the the right border of the 3rd div on the right border of the document.
I don't want to use float because the backround-color would vanish.
I have tried flex but justify-content did not yield the expected outcome.
Here's the code on JSBIN.
Thank you!
You can use display: flex on the container, and set the width of the three div elements to take up one third (or as close as we can get) of its container. The container must have a set width (either pixel or percentage) for it to work.
#container {
display: flex;
height: 600px;
width: 600px;
background-color: lightgreen;
}
#container div {
border: 1px solid black;
margin: 0 10px;
width: 33.333333%;
}
#container div img {
width: 100%;
}
<div id="container">
<div id="content1">
I'm some content. Regardless of the width of this div, the content will move to the next line and stay within the div instead of overflowing.
<img src="http://i.imgur.com/P8z2H80.jpg">
</div>
<div id="content2">
I'm some more content. Regardless of the width of this div, the content will move to the next line and stay within the div instead of overflowing.
<img src="http://i.imgur.com/NfnBZAI.jpg">
</div>
<div id="content3">
I'm even more content. Regardless of the width of this div, the content will move to the next line and stay within the div instead of overflowing.
<img src="http://i.imgur.com/W8M37N2.jpg">
</div>
</div>
I have a container with 3 children elements.
<div class="container">
<img />
<div class="element1"></div>
<div class="element2 bottom"></div>
</div>
They must be positioned as shown on the diagram below:
image is in the top of the left column and nothing goes below it (it is the only element in the left column)
element1 is in the top of the right column
element2 is stick to the bottom of the right column (and must not collide with the element1 which is above it)
Does somebody know how to achieve such layout using pure CSS? Ideally I wouldn't like to add any markup, but I can do that if that's the only possible way.
The biggest problem I'm facing here is how to stick that second element (non-image) to the bottom of the container without removing it from the flow. Because if I use position: absolute and remove it from the flow, the elment above it can collide with it (both elements have unknown height).
Here's a pen to work on: http://codepen.io/anon/pen/yNwGvQ
I would suggest you to use two columns in your html and then use the property display: flex; for your right column as suggested in the article A Complete Guide to Flexbox.
http://codepen.io/AlexisBertin/pen/QboYyY
All the HTML:
<div class="container">
<div class="column column-left">
<div class="image">This is an image</div>
</div>
<div class="column column-right">
<div class="element1">This container has dynamic content so it's height is unknown and may change.<br/><br/> Some random content to make it larger. Some random content to make it larger. Some random content to make it larger. Some random content to make it larger. Some random content to make it larger.</div>
<div class="element2">This container also has dynamic content so it's height is unknown and may change</div>
</div>
</div>
Part of this CSS:
.column {
float: left;
height: 100%;
}
.column.column-left { width: 100px; }
.column.column-right {
width: calc(100% - 100px);
display: flex;
flex-direction: column;
justify-content: space-between;
}
Hope you get the idea. Good Luck'.
EDIT:
The easiest way to achieve this without declaring height to the container seems to only create a third parent div to the first block of the second column and define it as flex: 1; while the second block of this same second column would be define as flex: 0;.
http://codepen.io/anon/pen/yNwZmJ
More details explained in the comments.
The easiest solution I figured out is this one:
First you create this CSS:
.container {
width: 400px;
padding: 10px;
border: 1px solid red;
background-color: white;
}
.container > img {
float: left;
}
.container > div {
position: relative;
overflow: auto;
padding-left: 5px;
min-height: 120px;
}
.container > div > .bottom{
position: absolute;
bottom: 0;
display: block;
}
And then use these divs, depending on your content. The first one you use when you know your text is short:
<div class="container">
<img src="http://placehold.it/120x120">
<div>
<div>
<p>This container has dynamic content so it's height is unknown and may change.</p>
</div>
<div class="bottom">
<p>This container also has dynamic content so it's height is unknown and may change</div>
</div>
</div>
The second one you use when you know your text is long
<div class="container">
<img src="http://placehold.it/120x120">
<div>
<div>
<p>This container has dynamic content so it's height is unknown and may change.</p>
<p>Some random content to make it larger. Some random content to make it larger. Some random content to make it larger. Some random content to make it larger. Some random content to make it larger.</p>
</div>
<div>
<p>This container also has dynamic content so it's height is unknown and may change</p>
</div>
</div>
</div>
The difference is that you remove bottom class from the last div in your div that has long text.
Also in your CSS you can see .container > div{... min-height: 120px; ...}, you should set it to height of your image. In case you want the bottom text more down then you have to increase min-height to be bigger than your image height.
Here is it in action: http://codepen.io/anon/pen/YXgBXx
I'm looking for the simplest way to achieve a type of layout that looks simple:
...but actually involves a lot of criteria, many of which involve non-trivial CSS issues:
Vertically centred content in a div...
...where the content is of variable length (so distance from top and bottom can't be hard coded)...
...where the div is inside a selection of floated divs...
...where those divs have percentage widths to fill the screen on a responsive layout...
...where there is a fixed pixel gap between each div...
...where the divs have solid background colours or images and the background behind the divs isn't a known solid colour that can be re-applied
Various elements of this have been addressed in separate questions (for example vertically aligning floated divs, and pixel gaps between responsive percentage-width divs), but I couldn't find anything combining them.
Simplest means:
As few HTML wrappers as possible
Minimal extra Javascript (none if possible)
Minimal CSS that needs to change when breakpoints change the number of divs on each row
Minimal code, quirks, or fragile CSS trickery (e.g. relying on browser quirks that could change in future)
Minimal cross browser issues (ideally, should work on IE8+ with minimal IE-specific markup)
Here's the simplest I can come up with. Code snippet below. It's basically an existing method for vertically centring floats, putting the background on the middle wrapper, and setting fixed pixel gaps using padding on the outer wrapper rather than margins with box-sizing: border-box;.
JSBIN demo
Three HTML elements per block - which seems to be the minimum for any floated vertically centred content where the inner content doesn't have a known height.
No JS
Only the % width needs to change to change the number of blocks per line
If the text content is too big for the div, the div expands slightly without breaking the layout - overflow: hidden; can be applied if this is undesirable
Works on IE8 with no issues (fails on IE7 if any poor souls still need to support IE7)
.box-outer {
box-sizing: border-box;
float: left;
/* editable */
width: 50%;
height: 110px;
padding: 1px 1px 0px 0px; /* sets gap */
/* Padding does't collapse like margins - 1px all round gives 2px gaps */
}
.box {
width: 100%;
height: 100%;
box-sizing: border-box;
display: table; /* height doesn't fill without display: table */
/* editable: */
background: #99ffff;
padding: 8px;
}
.box-inner {
vertical-align: middle;
display: table-cell;
}
.boxes-container {
padding: 0px 0px 1px 1px; /* opposite of each box's padding */
/* editable: */
background: #ffffff url('http://freedesignfile.com/upload/2012/10/sky_clouds_03.jpg');
}
<div class="boxes-container clearfix">
<h2> Title </h2>
<div class="box-outer">
<div class="box">
<div class="box-inner">
Box content
</div>
</div>
</div>
<div class="box-outer">
<div class="box">
<div class="box-inner">
Box with longer content
</div>
</div>
</div>
<div class="box-outer">
<div class="box">
<div class="box-inner">
Box
</div>
</div>
</div>
<div class="box-outer">
<div class="box">
<div class="box-inner">
Box with significantly longer textual content
</div>
</div>
</div>
<br/>
<p style="text-align: center;"> <--- responsive width ---> </p>
</div>
I have 2 columns of divs (left and right) contained in the parent div. I want the parent div height automatically adjusts when either left or right div height expand. The problem I have now is that the height of parent div just expands when the left expand, it does not work for the right. I have height:auto for all divs.
Are there anyone have solution?
you can do this by float for example
<div class="parent" style="float:left">
<div class="child" style="float:left"></div>
<div class="child" style="float:left"></div>
</div>
You are probably using float to move the right div to the right side. Floats do not automatically adjust the parents height, you must add the following code right before the end of the parent div.
<br style="clear:both;" />
This will mark the end of all floats on the same level.
You are probably floating your divs to keep them next to each other. By doing so, you 'remove these divs from the flow', i.e. the parent does not take them as content anymore.
You can 'by-pass' this effect by giving overflow: hidden to the parent or by adding a clear div.
Example w/ overflow: http://jsfiddle.net/BramVanroy/LJTGh/
Important CSS:
#wrapper {
height: auto;
width: 77%;
margin: 20px auto;
overflow: hidden; /*THIS IS IMPORTANT */
border: 1px solid;
}
OR
Example w/ clear: http://jsfiddle.net/BramVanroy/LJTGh/1/
Important CSS:
.clear {clear: both;}
The first option needs a line more of CSS, the second one a line more of HTML and a line more of CSS.
<style>
div#float {
text-align: center;
float: left;
width: 150px;
height: 150px;
border: 1px solid blue;
background: gold;
}
div.content {
background: yellow;
border: 1px solid purple;
height: 150px;
}
</style>
<div id='float'>
Float text.
</div>
<div class='content'>
Content text.
</div>
<div class='content'>
Content text.
</div>
can anyone explain how the 2nd div content is on the newline ? while the 1st div is inline with div#float?
By default, divs will take up the entire width of the block. Your first one is just beginning after the floated div because that's where it can begin. Since both your content divs are block-level elements, they will take up the entire width available to them.
There are lots of ways to control this, but I'm not sure what you're after.
The second div is displayed as a block-element. Block elements have a width of 100%, so there is no room left for the first div to appear on the left size of your second div.
try switching the "display" css property to "inline-style"
The first <div class='content'> is 150px tall, the same as the #float one, so it's pushed down exactly one line. If you wanted the #float to "span" both lines, give it more height, e.g.:
div#float {
text-align: center;
float: left;
width: 150px;
height: 300px;
border: 1px solid blue;
background: gold;
}
You can try it out here.
As becomes clear with above answers, this is not an issue specific about divs. It's about something called "The flow" within html-pages.
DIV's render default as an block element, which gives it a maximum width. When you float such an element, it loses this effect. Block elements however do not automatically clear floats. Thus, the first contentdiv takes all space available next to the float. The other contentdiv starts at the newline.
It's behaving exactly as it should. The first div in the markup is floated and thus taken out of the flow. It'll take up the 150x150 slot up in the top left corner and anything that comes after it in the markup will try to squeeze in the left over space to the right of the floated div which is what the first content div does. div's are block level elements so they will take up the entire width of the available space. Unlike an inline element, they will not shrink to fit the rendered text.
The first content div will stretch out till the rightmost edge of the window. If you're wondering why the first div (float div) did not behave like a block level element, it's because it was floated, which will cause it to shrink to fit it's contents (in your case you gave it an explicit width of 150px).
Once the browser has rendered the float div and the content div, it has exhausted the left over space so it goes to the next line and starts from the very beginning of that line for the second content div.
Looks like you are trying to set up a navigation bar followed by content. If you wrap your content in a div and float that div to the left, you will stay to the right of the gold div but a column drop will occur when the browser is resized too small to accommodate them. So you need a parent div with a width for both the float and content divs. I added an 800 pixels outerwrapper div to your markup.
.....
div#contentwrapper {
float: left;
width: 550px;
}
#outerwrapper {
width: 800px;
}
</style>
</head>
<body>
<div id="outerwrapper">
<div id='float'>
Float text.
</div>
<div id="contentwrapper">
<div class='content'>
Content text.
</div>
<div class='content'>
Content text.
</div>
</div>
</div>
.....
You might also want to use a different name than the css reserved word "float" for your divs. For more CSS float tutorials.