According to www1:
"The float property can have one of the following values:
left - The element floats to the left of its container"
and also "In HTML, the container is the area enclosed by the beginning and ending tags. "(www2)
In the following code (code in 1):
.div1 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.div2 {
border: 1px solid red;
}
<body>
<h2>Without clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.</div>
</body>
Questions are:
Is body element the container of div1?
If it is, div1 float to the
left. And I guess it ends the function of float. Why does the text
in div2 flow around div1?
So, in your example, my answers to your questions:
Yes
Think about all of the properties you're assigning to the div1 class - you've assigned a margin (thus displacing the text within div2), and are 'floating' that div to the left.
div tags don't natively have float: properties - in the absence of one, it behaves natively - keeping its position, taking up the full width of its container.
The screenshot below is meant to visualize what I'm trying to say above in #2
Oh, and the float: CSS directive isn't a function - but a style applied to an element on the visible DOM.
Personally and depending on what I'm trying to accomplish, I almost never use float in production if I can help it.
Related
Not sure if this is even remotely possible, but asking anyway. I have a div with a fixed height and width that I cannot edit. I can, however, add in child elements. Is there a way to only use child elements to shrink the size of the parent?
And I can only use inline css, with no js or jquery.
Since the original div is empty (see comments), instead of setting the default fixed width/height on all states of the div - you could set these properties only for the empty state of the div using the empty pseudo class.
This way, when the div gets children added - those original fixed widths don't apply anymore.
div:empty {
width: 200px;
height: 200px;
}
div {
border: 2px solid green;
}
<div></div>
<hr>
<div>
<p>some text</p></div>
My question relates to when you have one div floated (float:left) and a div right afterwards that is not floated. In that situation, why does the unfloated div cover and overlap the first div? It's like the first, floated div is taken out of the flow (like absolute positioning) in how the 2nd unfloated div goes over the 1st div.
I am aware that text in the 2nd unfloated div does not do this. It seems aware of the first div and floats next to it.
I am also aware that the fix is to have the 2nd div also floated to the left.
My question is a focus on the why. Why does the 2nd unfloated div (except for any text that might be in it) cover and overlap the 1st floated div?
In another similar question here on Stack Overflow, someone said "float removes an element from the normal flow, meaning that neighboring elements are positioned as if the float didn't exist...This isn't the case if an element has an inline display." So my question is why is a floated element removed from the normal flow (except for inline elements)? I understand why that is the case with inline elements (you want the text flushed to the floated div for word wrap around an image, for example). But why is it removed from the normal flow at all???
Here is some code to illustrate what I mean.
.box1 {
border: solid 3px;
width: 350px;
float: left;
height: 100px;
}
.box2 {
background-color: lightblue;
width: 400px;
height: 150px;
border: blue solid 3px;
}
<div>
<div class="box1"></div>
<div class="box2"></div>
</div>
It's like the first, floated div is taken out of the flow
Exactly, that's the reason. Floated elements are out-of-flow:
An element is called out of flow if it is floated, absolutely
positioned, or is the root element.
And that's necessary given the behavior of floats:
A float is a box that is shifted to the left or right on the current line.
If they were not removed from the normal flow, they would continue occupying some space in their initial position before being shifted.
Note inline floats are not an exception, because there is no such thing. Floats are blockified as explained in Relationships between 'display', 'position', and 'float'
Therefore, blocks following a float overlap it:
Since a float is not in the flow, non-positioned block boxes created
before and after the float box flow vertically as if the float did not
exist. However, the current and subsequent line boxes created next to
the float are shortened as necessary to make room for the margin box
of the float.
You can prevent this behavior by establishing a new block formatting context:
The border box of a table, a block-level replaced element, or an
element in the normal flow that establishes a new block formatting
context (such as an element with 'overflow' other than 'visible')
must not overlap the margin box of any floats in the same block
formatting context as the element itself. If necessary,
implementations should clear the said element by placing it below any
preceding floats, but may place it adjacent to such floats if there is
sufficient space.
.box1 {
border: solid 3px;
width: 350px;
float: left;
height: 100px;
}
.box2 {
background-color: lightblue;
width: 400px;
height: 150px;
border: blue solid 3px;
overflow: hidden; /* Establish BFC */
}
<div>
<div class="box1"></div>
<div class="box2"></div>
</div>
Update:
The position value will change the width.
The JSFiddle: http://jsfiddle.net/caicai/mbtb5m7p/2/
Why does the width of div .a2 equal to its parent's width, while the the text in the div .a1 won't wrap?
The JSFiddle: http://jsfiddle.net/caicai/mbtb5m7p/
.r {
position: relative;
width: 100px;
height: 22px;
background: blue;
}
.a1 {
position: absolute;
top: 30px;
margin-right: -9999px;
background: green;
}
.a2 {
position: absolute;
top: 60px;
background: orange;
}
<div class="r">
<div class="a1">
Why does this line no wrap.
</div>
<div class="a2">
Why does this line wrap.
</div>
</div>
The div.r has a width of 100px and is placed relative.
The children .a1 and .a2 are placed absolute. The related on their (relatively placed) parent.
Without a negative margin, the children will take a maximum width equal to its parents size.
But, by adding a negative margin, you allow the children to "float over" its parents borders.
It's not that the content of .a1 is no longer wrapping, it is that the content of .a1 has no need to wrap because the available interior space has been made wide enough for the string inside it by your negative margin.
So your div.a1 will essentially be the width of .r + the value of the negative margin, which is dragging out the right extremity and increasing the size of your div.
That's pretty much how the box model works, check it out here or here
The margin is something that depends on it's parent element(class/id) here class r for classes a1 and a2.
1) Now you have width:100px for parent class(Class .r) so all child classes(class a1 & a2) inherits same width.
2) There is no issue for class a2, that class is totally normal as no unique(different) property than parent class(.r), so behaves properly.
3) Now the case for class .a1, which behaves properly too till it finds margin-right:negativeValue;.
So first understanding margin, Margin is the space between class/element block and it's parent class/element block. For Example margin-left:5px; so that particular block starts after leaving 5px from left, respectively for rest three sides(top, bottom, right)
Now negative margins, when used what it does is it trespasses their parent blocks boundary. That is it gets beyond the boundaries of their parents.
So here you specified margin-right:-9999px; so it gets beyond the boundary of class .r, still it might be giving you a thought that -9999px is a huge value, should throw the div beyond the screen, but as of limited text it only shows the area contained with text.
Inserting more text in class a1 it will surely go beyond screen scope, but text should be more than enough.
Graphical Explanation Updated
So basically, I want two divs to sit inside another div. The first one is sitting inside with no issues, but the second one floats underneath the parent. When I add overflow:hidden I can't see the div anymore. The closest I've gotten to a solution was to add overflow:auto, but that just creates a scroll bar. I have tried resizing, different positioning, overflow and clearfix but so far I can't find a solution. Any ideas guys? JSFiddle demo here http://jsfiddle.net/QLbGc/ Thanks for any help, it's been annoying me for a couple of days now.
You forgot to put float:left; at the slideshow div
It should be
#slideshow {
background-color: #000;
margin: 15px;
height: 95%;
width: 60%;
-moz-border-radius: 15px;
border-radius: 15px;
float: left;
}
So now you have the 'slideshow' div floating left and 'about' div floating right and they can fit inside the parent div.
Basically they were inside the parent div from the first time but the about div was under slideshow div.
Demo:
http://jsfiddle.net/QLbGc/2/
If you're looking to have the two divs side by side here's a fiddle for that.
http://jsfiddle.net/Hastig/QLbGc/6/
I stripped out a bunch of stuff as I wasn't sure you needed it or it was just stuff you were throwing at it to try and affect change.
Somebody mentioned you were missing a float: left; in what we assume you wanted as your left div.
Remember to compensate for margin and padding to match the container div.
In my example the main container was 500px wide. If I set each float div to 250px width when added to the 20px combined margins on those divs the total width goes to 520px and pushes that right div under the left div so you'll want each floated div at 240px to compensate. Same deal with percentages.
If I misundestood your intention and you're looking to hide one of those div use display: none; on it and double the width of the one you want to show.
try to put this code in your css.
.content::-webkit-scrollbar {
display: none;
}
I am trying to set up a form that displays a vertical separator between two elements that appear side by side. These are the problem parameters:
The height of either element is unknown and will change by virtue of the contents being modified with JavaScript in response to user interaction.
The separator should cover the whole of the elements' shared vertical border, irrespective of which element happens to be taller at any given time.
Given the above it seems that this setup will do the trick:
<div>This is some text on top.</div>
<ol>
<li id="a">Lalalala</li>
<li id="b">Lololol</li>
</ol>
<div>And some text on the bottom.</div>
CSS
ol { overflow: hidden }
li { float: left; width: 5em; padding: 4px }
div { clear: both }
#a { background: gold; min-height: 100px }
#b { background: yellow; border-left: 1px black dotted }
#b { padding-bottom: 400px; margin-bottom: -400px } /* "infinitely" tall */
The idea is that the second element becomes "infinitely tall" by applying bottom padding and gets a left border; elements following the group are brought back into their original position by counteracting the padding with negative bottom margin; and the "unused" portion of the vertical border is hidden by giving the parent overflow: hidden.
This setup indeed works correctly (JsFiddle) on Firefox, Chrome and IE >=8 (my compatibility requirements):
However, when I try to apply the same technique in my real HTML Firefox breaks down and seems to not honor the overflow: hidden set on the parent element. As a result the infinitely tall vertical border bleeds through all elements following the two panels on the page.
Here is a JSFiddle of (simplified) real copy/pasted content together with my actual CSS rules that shows the problem. Note that only Firefox mishandles this; other browsers continue to display it properly.
Correct render:
Firefox render:
I am properly stumped: why would Firefox display the proof of concept correctly and botch the real deal? And how can I fix it?
I was able to fix your JSFiddle by changing the fieldset element to a div or by surrounding the fieldset with a div that had overflow set to hidden. Maybe worth a try. Is the fieldset tag essential to your HTML?