Please help me to understand why the image-div of the following code flows out of the box-div.
<body>
<div id="box" style="border: 2px solid green;">
<div id="image" style="height: 200px; width: 200px; background: red; float: left;"></div>
<div id="text" style="background: yellow;">This is some text</div>
</div>
</body>
In other words, I expected the green border to fully enclose both inner divs and not only the yellow one.
When a children its floating the parent doesn't wrap it. You can use two solutions for this:
#box{
overflow:hidden;
}
Or
#box{
float:left;
}
You can also use display:inline-block for the #box but that doesn't work on IE6
setting overflow to hidden is not always an ideal solution, as if you do have content which is larger than the container, it will not be displayed.
by adding a clearing element at the bottom of the container, you should see that the floated elements fit inside the parent.
<body>
<div id="box" style="border: 2px solid green;">
<div id="image" style="height: 200px; width: 200px; background: red; float: left;"></div>
<div id="text" style="background: yellow;">This is some text</div>
<div style="clear: left; height: 0; margin: 0; padding: 0"></div>
</div>
</body>
Obviously, you'll want to make a generic class for this and set the CSS in an external stylesheet - but the principle works.
Floated elements are allowed to extend beyond their parent element. To keep the floated element inside the containing element, you will need to add an empty element at the end that clears the float:
So inside the element with id="box", add something like this:
<div style="clear: left;"></div>
You have to use an element to "clear" the floated object, using style="clear: left;"
Related
I have the following HTML: http://jsfiddle.net/fMs67/. I'd like to make the div2 to respect the size of div1 and scroll the contents of div3.
Is this possible?
Thanks!
UPDATE-1:
This is the more advanced case that I oversimplified when I asked the question: http://jsfiddle.net/Wcgvt/. I need somehow that header+it's sibling div to not overflow the parent div's size.
Adding position: relative to the parent, and a max-height:100%; on div2 works.
<body>
<div id="div1" style="height: 500px;position:relative;">
<div id="div2" style="max-height:100%;overflow:auto;border:1px solid red;">
<div id="div3" style="height:1500px;border:5px solid yellow;">hello</div>
</div>
</div>
</body>
Update: The following shows the "updated" example and answer. http://jsfiddle.net/Wcgvt/181/
The secret there is to use box-sizing: border-box, and some padding to make the second div height 100%, but move it's content down 50px. Then wrap the content in a div with overflow: auto to contain the scrollbar. Pay attention to z-indexes to keep all the text selectable - hope this helps, several years later.
If you put overflow: scroll on a fixed height div, the div will scroll if the contents take up too much space.
Instead of overflow:auto, try overflow-y:auto. Should work like a charm!
Is this what you are wanting?
<body>
<div id="div1" style="height: 500px;">
<div id="div2" style="height: inherit; overflow: auto; border:1px solid red;">
<div id="div3" style="height:1500px;border:5px solid yellow;">hello</div>
</div>
</div>
</body>
http://jsfiddle.net/fMs67/1/
i have just added (overflow:scroll;) in (div3) with fixed height.
see the fiddle:- http://jsfiddle.net/fMs67/10/
I created an enhanced version, based on Trey Copland's fiddle, that I think is more like what you wanted. Added here for future reference to those who come here later.
Fiddle example
<body>
<style>
.modal {
height: 390px;
border: 5px solid green;
}
.heading {
padding: 10px;
}
.content {
height: 300px;
overflow:auto;
border: 5px solid red;
}
.scrollable {
height: 1200px;
border: 5px solid yellow;
}
.footer {
height: 2em;
padding: .5em;
}
</style>
<div class="modal">
<div class="heading">
<h4>Heading</h4>
</div>
<div class="content">
<div class="scrollable" >hello</div>
</div>
<div class="footer">
Footer
</div>
</div>
</body>
The simplest way is as this example:
<div>
<div style=' height:300px;'>
SOME LOGO OR CONTENT HERE
</div>
<div style='overflow-x: hidden;overflow-y: scroll;'>
THIS IS SOME TEXT
</DIV>
You can see the test cases on:
https://www.w3schools.com/css/css_overflow.asp
function start() {
document.getElementById("textBox1").scrollTop +=5;
scrolldelay = setTimeout(function() {start();}, 40);
}
function stop(){
clearTimeout(scrolldelay);
}
function reset(){
var loc = document.getElementById("textBox1").scrollTop;
document.getElementById("textBox1").scrollTop -= loc;
clearTimeout(scrolldelay);
}
//adjust height of paragraph in css
//element textbox in div
//adjust speed at scrolltop and start
<html>
<head></head>
<body>
<div>
<div style="float: left; width: 300px; border: 1px solid black;">
testomgsgo<br/>
testete<br/>
testete<br/>
testete<br/>
testete<br/>
</div>
<div style="float: left; width: 300px; border: 1px solid black;">
<div style="background: #FF0000; width: 50px; height: 50px; margin-left: auto;"></div>
</div>
<div style="clear: both"></div>
</div>
</body>
</html>
With the above code the left hand side will have variable content and I need the div in the right hand div (the red box) to site at the bottom so its bottom edge is flush with the bottom of the left div height.
I've tried using auto top margin but I believe the problem is that I can't get the height of the right side div to match the left side div.
Is there some way with CSS to do this or do I have to resort to javascript to match the heights?
Is this what you're looking for?
http://jsfiddle.net/7b3Pc/
Basically, the variable div controls the height of all other sibling divs through its parent div. Siblings absolutely positioned and height:100%.
<html>
<head></head>
<body>
<div>
<div style=" width:600px; border: 1px solid black; position:relative">
<div style="width: 300px;">
testomgsgo<br/>
testete<br/>
testete<br/>
testete<br/>
testete<br/>
</div>
<div style="width: 300px; height:100%; position:absolute; top:0;left:300px; border: 1px solid black;">
<div style="background: #FF0000; width: 50px; height:100%; margin-left: auto;">
</div>
</div>
</div>
</div>
</body>
</html>
Have you tried
margin-top: 0;
Is this what you're looking for: http://jsfiddle.net/htfRw/
Tested in Safari, Firefox
EDIT:
Here it is inside a container: http://jsfiddle.net/htfRw/2/
You really don't need to use float here at all. I'd recommend using display: inline-block instead, because you can then rely on the vertical-align property to vertically position your second <div> instead of using margin .
HTML:
<div>
testomgsgo<br/>
testete<br/>
testete<br/>
testete<br/>
testete<br/>
</div><div class="second">
<div></div>
</div>
Note that there is no space between the closing </div> and <div class="second">. Because both of these elements are inline elements, any whitespace in the markup will cause there to be small, horizontal space between the two elements.
CSS:
body > div {
width: 300px;
border: 1px solid #000;
vertical-align: bottom;
display: inline-block; }
.second div {
background: #FF0000;
width: 50px;
height: 50px; }
Preview: http://jsfiddle.net/Wexcode/FwD3Q/
I've been having trouble creating parent DIVs that encloses the floating child DIVs.
<div id="parent">
<div class="child1">content</div>
<div class="child2">content</div>
<div class="child3">taller content</div>
</div>
...where #parent would expand vertically (with padding if it was styled that way) to accomodate .child3. And If I added a border around #parent it would enclose all three child DIVs.
What's the best way to style this arrangement to ensure this behavior?
Looking for the best practice.
You can add a "wrapper" div inside the parent, and a "clear: both" element in there as well. Check this jsFiddle http://jsfiddle.net/yvVP8/
<div id="parent">
<div id="wrapper">
<div class="child1">content</div>
<div class="child2">content</div>
<div class="child3">taller content lala lala lalal lala</div>
</div>
<div class="clear"></div>
</div>
And the css:
#parent {
border: 1px solid #000;
width: 300px;
}
#wrapper .child1, #wrapper .child2, #wrapper .child3 {
float: left;
padding: 5px;
width: 90px;
}
div.clear {
clear: both;
}
A simple
#parent {
overflow:hidden;
}
will do the job :
http://jsfiddle.net/XAbhY/
You can simply add float:left; to the parent div.
It should force the parent's size/border to wrap all siblings. Not sure if it's valid, but works for me.
Suppose I have an HTML page with three blocks of fixed width (their height can vary if that's important), like shown on picture:
I would like to make it behave as shown on next picture: when browser screen width is reduced so it can't fit all three blocks in one line, first block goes down.
Is it possible to achieve such behavior? Preferably with CSS only but any working solution would be great.
<div style="width: 100%;">
<div style="display: inline-block; background-color: red; width: 200px;">DIV2</div>
<div style="display: inline-block; background-color: yellow; width: 200px;">DIV3</div>
<div style="display: inline-block; float: left; background-color: lightBlue; width: 200px;">DIV1</div>
<br style="clear: left;">
</div>
This one works. You put block 1 as the last one and only make that one float left.
It's virtually impossible to let the first block drop down without any Javascript trickery. Making the right-most one drop with float: left is easy on the other hand.
Use divs with float:left and fixed width values
<div style="float:right; width:250px; position:relative; height:100px; border:solid 1px #000000">
3
</div>
<div style="float:right; width:250px; position:relative; height:100px; border:solid 1px #000000">
2
</div>
<div style="float:right; width:250px; position:relative; height:100px; border:solid 1px #000000">
1
</div>
like so...
I am aware that the 1st one will go right but this is the simplest i can do without getting into javascript..
Put all these three blocks inside a div and set it's width to 100%, when the screen will resize the blocks will be arranged automatically.
<div style="width: 100%;">
<div style="width: 50px; float left;">DIV1</div>
<div style="width: 50px; float left;">DIV2</div>
<div style="width: 50px; float left;">DIV3</div>
<br style="clear: left;" />
</div>
I have this HTML code:
<body>
<div id="div0" style="display:inline; background-color:green; width:100%">
<div id="div1" style="display:inline; background-color:aqua;width:33%"> </div>
<div id="div2" style="display:inline; background-color:red;width:33%"> </div>
<div id="div3" style="display:inline; background-color:yellow;width:33%"> </div>
</div>
</body>
I want to fill the page with div1, div2 and div3 but they don't fill the entire width.
What it's happening?
Taken from display declaration:
display: inline means that the element
is displayed inline, inside the
current block on the same line. Only
when it's between two blocks does the
element form an 'anonymous block',
that however has the smallest possible
width.
You cannot give an inline element set width or height dimensions, they will be ignored. An element must have a display type of block to do that. Setting display: block however will not achieve what you want since each element will fill the entire width. float: left will cause them to stack to the left and also forces display: block.
<head>
<style type="text/css">
#wrap {
width:100%;
}
#wrap:after {
/* Prevent wrapper from shrinking height,
see http://www.positioniseverything.net/easyclearing.html */
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#wrap .container {
float: left;
width:33%;
}
</style>
</head>
<body>
<div id="wrap">
<div class="container"> </div>
<div class="container"> </div>
<div class="container"> </div>
</div>
</body>
Mmmmm, semantics
See answer from Phunky for further comments on floating.
Use relative positioning on the outer <div> and float the inner <div>s. Don't use display: inline.
<body>
<div id="div0" style="border: 1px solid red; background-color: green; width: 100%; position: relative;">
<div id="div1" style="background-color: aqua; width: 33.33%; float: left;">a</div>
<div id="div2" style="background-color: red; width: 33.33%; float: left;">b</div>
<div id="div3" style="background-color: yellow; width: 33.33%; float: left;">c</div>
</div>
</body>
display:inline shrink wraps the content. You might want to try float:left instead.
Rory Fitzpatrick more or less has the ideal answer for you, although there is no need to set pos:rel on the #wrapper as it is already a relative block element and will span the full width by default.
When you float a block element it mimics the alignment functionality of display:inline and in an ideal world we would have access to the very useful display:inline-block which would have done exactly what you was expecting it to do.
But one thing you should remember when floating elements is that they will only take up the space they require (this includes margin and padding) unless you set a fixed width.
This is why Rory used width:33%; as that is the best you are ever going to get :)
Ideally this would have been a comment on Rorys post, but i've not got a high enough post count yet.
<body>
<div id="div0" style="float: left; background-color:green; width:100%">
<div id="div1" style="float: left; background-color:aqua;width:33%"> </div>
<div id="div2" style="float: left; background-color:red;width:33%"> </div>
<div id="div3" style="float: left; background-color:yellow;width:33%"> </div>
</div>
</body>
This should work for you. And the reason IIRC is that display: inline does not take % width.
Instead of using float you could use flexbox for a more responsive resizing. Also this forces the elements to remain in a row.
Example:
<head>
<style type="text/css">
#wrap {
width:100%;
display:inline-flex;
}
#wrap:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
display: inline-flex;
flex-direction: row;
}
.container1 {
width:20%;
}
.container2{
width:80%;
}
</style>
</head>
<body>
<div id="wrap">
<div class="container1"> </div>
<div class="container2"> </div>
</div>
The best way to accomplish this, contrary to all the answers given before, can be found referencing the answer to this question:
3 inline-block divs with exactly 33% width not fitting in parent
The quickest and easiest way is not the prettiest to look at (putting your div's on the same line to remove the automatic single white space provided normally), but will work tremendously for what you want. The answer I am referencing list plenty of other way that, in my opinion, are better than any provided before, and address the true problem you are having.
Here is the code working exactly how you'd like, and a link to the fiddle!
<body>
<div id="div0" style="float: left; background-color:green; width: 100%;">
<div id="div1" style="margin: 0px; display: inline-block; background-color:aqua;width:33.33%"> </div><div id="div2" style="margin: 0px; display: inline-block; background-color:red;width:33.33%"> </div><div id="div3" style="margin: 0px; display: inline-block; background-color:yellow;width:33.33%"> </div>
</div>
https://jsfiddle.net/stopitdan/uz1zLvhx/