I have two divs, one with float: left and the other one with float:right. They display side-by-side, but when I add a third div it displays over the two floating divs and not behind as i'm trying to.
<div id="left_side" style="float:left;" ></div>
<div id="right_side" style="float:right;" ></div>
<div id="below_side" ></div>
What I want to do: http://dl.dropbox.com/u/20836988/intended.png
what I actually get: http://dl.dropbox.com/u/20836988/what%20i%20get.png
I've tried adding vertical-align: bottom to the last div without results. Also I've tried adding a div containing the two float divs and then the third div but I always get the same result. I'm sure it must be a very basic question but I can't find the answer anywhere...
below_side needs a float and a clear:both;
currently left and right are floated - which takes them out of the document flow. which means that below side ends up in the wrong spot.
if you put the float: left on the below-side it will also take it out of the docment flow and put it in the same space as the left and right (relatively) then you add the clear: both so that it appears below left and right
<div id="left_side" style="float:left; background-color:#ccc" >gdfgfdg</div>
<div id="right_side" style="float:right;background-color:red" >gfdgfkjkjhkjhkjh</div>
<div id="below_side" style="background-color:#000; z-index:1000; float:left; color:#FFF;" >dsfdfds</div>
Add clear: both to your below_side div.
See this link.
Related
I still have problem to well understand how the float property works in CSS. I do apologize because I know this is css basics but I really want to understand that and get a good explanation. I've created an example to show you.
Here is my page :
I just want to resize the second div at the right. When I look at it in the Chrome Developer Tools, I see that this div begins at the top left of the window and not after the red square. I'd like it to begins just after the red square to change the width properly without calculating the size of the square and doing something like
width = square size + width i want
Do you know how this it happens and how to properly resize the width of the second div ?
EDIT: the solution consists in add the float property to the second div too. The explanation is the following : floated elements are removed from the flow, so they don't stack with the non-floated elements.
You need to set float for another div too.
We generally do like below:
html
<div class="float-left">
<p>floated left</p>
</div>
<div class="float-left"><!--- to float next to previous div--->
<p>floated left</p>
</div>
css
.float-left{
float: left;
}
As per your comment:
We do clear the float values because the container contents would never been collapsed.
You need to float the second div.
Heres an example.
<div class="parent-div">
<div class="left">
</div>
<div class="left">
<p>This is the description of the image</p>
</div>
</div>
You need to set
p { display:inline; }
or
div { display:inline; }
since paragraphs and divs are block elements.
http://www.w3.org/TR/CSS2/visuren.html#block-boxes
the reason is that floated elements are removed from the flow, so they don't stack with the non-floated elements. - therefore they don't "take up space" like before. This is why your text div starts at the top left of its container.
from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/float
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. A floating element is one where the computed value of float is not none.
You have to set float for both DIVs
Here is the updated code:
HTML:
<div id="main_container">
<div class="left"></div>
<div class="right">
<p>This is the description of the image <i>Random text</i>
</p>
</div>
<!--Comment below <DIV> to see the result-->
<div class="clear"></div>
</div>
CSS
#main_container {
border:5px solid #000;
}
.left, .right {
width: 100px;
height: 100px;
background: red;
float:left;
}
.right {
background: blue;
width: calc(100% - 100px);
}
.clear {
clear:both;
margin:0;
padding:0;
}
Also, just to add one more important fact related to "float" is, make sure you add "clear:both" property after "float".
Why?? Because, a common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.
Here is the Fiddle for the same: http://jsfiddle.net/1867ud9p/7/
Hope this will help!
This is driving me mental.
Why wont my third div (content-col-text) not go up on float right?
It stays aligned to the gallery-thumb-container? I need it to go to the right and up and align with large-image-container - this is where the outer div wrapper is (entry-content)..
I dont have any weird margin stuff going on even..
Your order is not correct. You need to change it as below for it to work.
Below is the code:
The HTML:
<div class="large-image-container"> </div>
<div class="content-col-text"> </div>
<div class="gallery-thumb-container"> </div>
The CSS:
.large-image-container{float:left; width:66%; background:red;}
.gallery-thumb-container{float:left; width:66%; background:yellow;}
.content-col-text{float:right; width:31%; background:green;}
The Fiddle demo:
DEMO
Usually, under such circumstances, when you use a clear:both;, the floats get corrected and it works properly.
Hope this helps.
your gallery-thumb-container has probably been forced down as it floats left and there's no more space to the right of large-image-container.
You could try switching the order of the <div>'s and put content-col-text second instead of third
Another option would be to position it absolutely, but that will take it out of the flow of the document...
Short version: Why does overflow:auto cause a div to the right of a left floated div not to wrap its text around the left floated div? (Bonus: Is this an acceptable way to accomplish a column effect?)
Long version...
I have two divs that I wish to be next to each other, and displayed as columns. The div on the left has a specific width and height. And the div on the left is shorter than the div on the right. However, I do not want the text in the right div to wrap under the left div.
Here was my first attempt...
<div>
<div style="border:1px solid grey;
width:100px;
height:100px;
float:left;">
Div on the left.
</div>
<div>
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>
...I knew the text in the right div would wrap under the left div. And it did.
Then I remembered a page I had created that had a column effect. I had copied and pasted it from I know not where. All it did was assign overflow:auto to the div on the right. It looks like this...
<div>
<div style="border:1px solid grey;
width:100px;
height:100px;
float:left;">
Div on the left.
</div>
<div style="overflow:auto">
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>
Voila, the right divs text no longer wrapped under the first (left) div! The second (right) div appeared as a column.
So, I read everything I could find on overflow:auto and found no mention of why I should see this behaviour. Can anyone explain it to me?
Also, is this an acceptable way to achieve a column effect?
overflow: auto (or anything but visible) causes your second div to create a new block formatting context. This means the text within that div is now in its own formatting context, rather than sharing the same one as your first, left-floating div (which is the containing block of both divs), and so it is no longer allowed to flow around the first div.
Floats also generate their own BFCs, but that doesn't exactly relate to the matter at hand. It does however also prevent reflow, achieving a column effect, as shown in the other answers.
Is this an acceptable way of creating a column effect? I don't know, but it does seem unconventional. You can just float the second div as well instead for the reason mentioned above (although even that, in favor of upcoming true layout modes like flexbox and grids, is now seen as a browser compatibility hack these days, but is the best we've got for the time being).
Remember that inline content is designed to be able to flow naturally around floated content; see CSS2.1, §9.5 Floats.
Remember also that the purpose of overflow is to control content overflow in a box with a limited size. That it causes a box to create a new BFC, influencing floats as a result, is but a side effect, the reason for which is explored here. It's a lengthy read, but it includes a bit about preventing reflow, which I'll quote here for ease of reference:
And so, this change was brought about in CSS2.1, documented here. Now if you apply an overflow value other than visible only to the second box, what a browser does is push the entire box aside to make way for the float, because the box now creates a new block formatting context that encloses its contents, instead of flowing around the float. Here's what it looks like with overflow: auto for example:
Note that there is no clearance; if the second box had clear: left or clear: both it would be pushed down, not to the side, regardless of whether it established its own BFC.
By the way, yes, this means your clearing div needs to be there if you want to always clear the first div.
To get the divs next to each other they both will need a float and fit in the surrounding div.
Example:
<div style="width:200px;">
<div style="width:100px; float:left;">
content
</div>
<div style="width:100px; float:left;">
content
</div>
</div>
If you want the outlining div to grow with the largest div place overflow:hidden; to the div.. If that div doesnt have a height with it then it will scale with the larges div.
Preview:
http://jsfiddle.net/WzVBE/
Remove float:left from the first div.
<div>
<div style="border:1px solid grey; width:100px; height:100px;">
Div on the left.
</div>
<div style="overflow:auto; ">
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>
DEMO
You can try this
<div style="width:800px; background-color:#CCC">
<div style="width:300px; height:100px; float:left; background-color:#CCC">
Div on the left.
</div>
<div style="height:100px; float:left; width:500px; background-color:#999">
Imagine lots and lots of text here...
</div>
<div style="clear:both"/>
</div>
I seem to have gotten confused as to what the css "clear" keyword means.
I have a number of div elements, all with "float:left". The second last div element also has "clear:right". I thought that would cause the subsequent element to go to the next line. But for me, it doesn't.
Here's my example:
<div class="Section">
<div class="Thumbnail"></div>
<div class="Number">0</div>
<div class="Title">ShopTVC Wallace and Gromit WOA 6Apr11</div>
<div class="Duration">00:00:32</div>
</div>
Looks like this:
I am trying to make the duration ("00:00:32"), appear on the next line, to the right of the thumbnail (the blue rectangle).
I know that I could put the last three divs into another container div, but the purpose of this question is to understand why "clear:right" doesn't stop the duration from floating on the right of the title.
Here's the CSS:
div.Section
{
overflow:auto;
background:cornsilk;
border:2px solid navy;
padding:12px;
}
div.Section div.Thumbnail
{
width:64px;
height:42px;
background:SteelBlue;
foreground:Navy;
}
div.Number
{
width:16px;
margin-left:6px;
}
div.Duration
{
margin-left:22px;
}
div.Section div
{
float:left;
}
div.Section div.Title
{
color:DarkGreen;
clear:right;
}
And, of course, the jsfiddle link: http://jsfiddle.net/8J7V6/3/
The clear property doesn't prevent elements from being placed in that space after the cleared element. It prevents the element from being placed where there are already elements floated to the that direction before it. Adding a clear:left to div.Duration would make it be placed below the navy box. Adding a <br/> before the duration might solve your problem, or, as you already said in your question, you could use another container div for the last three divs.
ahruss's answer is the correct one, but I also noticed no one really answered your question. Basically clear:left refers to left floating elements. clear:right refers to right floating elements.
Since your element is floating left, not right, clear:right won't affect it.
The other thing you could do is wrap the two text elements in a separate div from the blue box, float that container div in and the blue div, then when you float the two text elements, your clear:left code will put the date under the text still within your container div and not under the blue image to it's left.
Like this:
<div class="Section">
<div class="Thumbnail"></div>
<div class="TextContainer">
<div class="Number">0</div>
<div class="Title">ShopTVC Wallace and Gromit WOA 6Apr11</div>
<div class="Duration">00:00:32</div>
</div>
</div>
and add this to your css:
div.TextContainer {
float:left;
}
Add in whatever other visual styles you need.
There isn't anything floating to the right of it. The Problem you're facing is that you already sent all your content prior to the time, and then you're telling the time to float to the left. It's still floating to the left, it's just stacking on top of the content that's already there to the left.
But yes, clearing to the right makes that element break down past all elements which are floated to the right before it. Clear does not affect elements after it.
Have you tried using a simple <br /> after your title?
I have used padding and margin. If it is not possible to use in your case then the following solution will not be appropriate.
http://jsfiddle.net/8J7V6/5/
.Duration { clear: left; } should work
i understand that float takes an element as left or as right as it can from the current flow.
i understand that the element follow the floated element is wraping it like a p after img.
first-do all following elements wrap the float untill there is no more room? (so if i have p that only takes half the floated picture, will the a and h3 and then another p will keep wraping untill there is no more space? or just the first element?)
i also understand that a clear will stop the wraping of the clear element and any following elements, right?
will any element inline or block will wrap the float? then why wont another div will?
i dont understand why when floating a div/img the p after it will wrap it yet if you have 2 divs, when the first is floated lets say to the left, the div after will be on a new line.
if ill float it for the left also i understand it will stack next to the former float, yet why will it be on the same line as the first one if i float it to the right?
i thought float is using the normal flow, and in the normal flow a div after the first float will be under it.
so why
1 float left div and another float after will look like that:
------
------
yet if ill float the second to the right it will be that:
------ ----------
and not that:
-------
-------------
is the float doing something to the flow?
guys im sorry, i didnt make myself clear.
im not trying to do anything, just understand the behavior of floats generally.
lets say i have:
<div style="float:left"></div>
<div></div>
then the first will float for the left, yet for some reason the second div(lets say i did give the first one width less then 100%) will be on a new line.
why a new line and not like p-wrap around and next to the first?
we dont give p a float yet it wraps floate3d element.
second:
<div style="float:left"></div>
<div style="float:right"></div>
both divs(again given proper width) will be on the same line.
i want to know why the first code will make them show on different lines yet the second on the same line.
shouldnt float move the box as much to the side from its current flow? isnt the current flow of the second div(second code) will be where it is on the first code(one line below)
so why using 2 opposite floats will make the divs show on the same line:
------------ -----------------
instead of the one floating right be where it is now, just a line below the first div?
I read that 3 times and gave up...
Are you trying to float one element left and another right?
Simply give them a width:
<div style="float: left; width: 400px;">1</div>
<div style="float: right; width: 400px;">2</div>
p.s. A picture speaks a thousand words..
[edit] if you want it inside a container:
<div id="container" style="position: absolute; width: 800px; margin: 0 auto; overflow: hidden;">
<div style="float: left; width: 400px;">1</div>
<div style="float: right; width: 400px;">2</div>
</div>
Sounds like you need to order your HTML tags to the order of floats.
Right floats should come first.
Looks like your parent element to your floating elements isn't set to 100% width. Make sure you're using position:relative and setting your widths correctly.
Also, please show your code. It's very hard to decipher your text.
<div style="float: left;">first line</div>
<div style="float: right;">second line</div>