I have a page with a float: right'ed div at the top, and a text-align: center'ed div right underneath it. Is it possible to make the floated div not alter the flow of the other div (the one right below it)?
Here are two fiddles that show what I'm seeing (I like neither, they are explained in the next paragraph):
off-center -> http://jsfiddle.net/5XMVt/
centered but gaping hole -> http://jsfiddle.net/CSGQn/
If left alone, the bottom div is pushed left (out of the center) by the floated div. I could do clear: both on the bottom div but that would push it down below the floated div, and even though this is better than being off-center, it's suboptimal because it creates a giant hole right above it. I need the floated div not to alter the flow of the div below it at all, like it's not even there.
I was also thinking about doing position: absolute; but that would only work if the div were supposed to be on the left side, when it's supposed to be on the right side.
What I would like is like the first fiddle except with the 'should be centered' text actually centered.
You can set the right-floated div with position:absolute
And set the right:0, that will give it the same behavior as floating it to the right.
Note that this will only work if the div has to be at the right of the page, not a container.
i think you can do it this way http://jsfiddle.net/5XMVt/4/
or you can use position absolute for the .floating class, and set the right:0px
Yes, why not you have something like that:
<div id="container">
<div id="rightFloat"> you right floated here</div>
<div id="content"> your text here</div>
</div>
With the following style:
#container {
}
#rightFloat {
float: right;
width: 200px;
height: 200px;
border: 1px solid black;
margin-right: 10px;
}
#content {
border: 1px solid black;
float: right;
clear: none;
margin-right: 10px;
}
That ought to do it :)
Related
What does the following CSS rule do:
.clear { clear: both; }
And why do we need to use it?
I won't be explaining how the floats work here (in detail), as this question generally focuses on Why use clear: both; OR what does clear: both; exactly do...
I'll keep this answer simple, and to the point, and will explain to you graphically why clear: both; is required or what it does...
Generally designers float the elements, left or to the right, which creates an empty space on the other side which allows other elements to take up the remaining space.
Why do they float elements?
Elements are floated when the designer needs 2 block level elements side by side. For example say we want to design a basic website which has a layout like below...
Live Example of the demo image.
Code For Demo
/* CSS: */
* { /* Not related to floats / clear both, used it for demo purpose only */
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
header, footer {
border: 5px solid #000;
height: 100px;
}
aside {
float: left;
width: 30%;
border: 5px solid #000;
height: 300px;
}
section {
float: left;
width: 70%;
border: 5px solid #000;
height: 300px;
}
.clear {
clear: both;
}
<!-- HTML -->
<header>
Header
</header>
<aside>
Aside (Floated Left)
</aside>
<section>
Content (Floated Left, Can Be Floated To Right As Well)
</section>
<!-- Clearing Floating Elements-->
<div class="clear"></div>
<footer>
Footer
</footer>
Note: You might have to add header, footer, aside, section (and other HTML5 elements) as display: block; in your stylesheet for explicitly mentioning that the elements are block level elements.
Explanation:
I have a basic layout, 1 header, 1 side bar, 1 content area and 1 footer.
No floats for header, next comes the aside tag which I'll be using for my website sidebar, so I'll be floating the element to left.
Note: By default, block level element takes up document 100% width,
but when floated left or right, it will resize according to the
content it holds.
Normal Behavior Of Block Level Element
Floated Behavior Of Block Level Element
So as you note, the left floated div leaves the space to its right unused, which will allow the div after it to shift in the remaining space.
div's will render one after the other if they are NOT floated
div will shift beside each other if floated left or right
Ok, so this is how block level elements behave when floated left or right, so now why is clear: both; required and why?
So if you note in the layout demo - in case you forgot, here it is..
I am using a class called .clear and it holds a property called clear with a value of both. So lets see why it needs both.
I've floated aside and section elements to the left, so assume a scenario, where we have a pool, where header is solid land, aside and section are floating in the pool and footer is solid land again, something like this..
So the blue water has no idea what the area of the floated elements are, they can be bigger than the pool or smaller, so here comes a common issue which troubles 90% of CSS beginners: why the background of a container element is not stretched when it holds floated elements. It's because the container element is a POOL here and the POOL has no idea how many objects are floating, or what the length or breadth of the floated elements are, so it simply won't stretch.
Normal Flow Of The Document
Sections Floated To Left
Cleared Floated Elements To Stretch Background Color Of The Container
(Refer [Clearfix] section of this answer for neat way to do this. I am using an empty div example intentionally for explanation purpose)
I've provided 3 examples above, 1st is the normal document flow where red background will just render as expected since the container doesn't hold any floated objects.
In the second example, when the object is floated to left, the container element (POOL) won't know the dimensions of the floated elements and hence it won't stretch to the floated elements height.
After using clear: both;, the container element will be stretched to its floated element dimensions.
Another reason the clear: both; is used is to prevent the element to shift up in the remaining space.
Say you want 2 elements side by side and another element below them... So you will float 2 elements to left and you want the other below them.
div Floated left resulting in section moving into remaining space
Floated div cleared so that the section tag will render below the floated divs
1st Example
2nd Example
Last but not the least, the footer tag will be rendered after floated elements as I've used the clear class before declaring my footer tags, which ensures that all the floated elements (left/right) are cleared up to that point.
Clearfix
Coming to clearfix which is related to floats. As already specified by #Elky, the way we are clearing these floats is not a clean way to do it as we are using an empty div element which is not a div element is meant for. Hence here comes the clearfix.
Think of it as a virtual element which will create an empty element for you before your parent element ends. This will self clear your wrapper element holding floated elements. This element won't exist in your DOM literally but will do the job.
To self clear any wrapper element having floated elements, we can use
.wrapper_having_floated_elements:after { /* Imaginary class name */
content: "";
clear: both;
display: table;
}
Note the :after pseudo element used by me for that class. That will create a virtual element for the wrapper element just before it closes itself. If we look in the dom you can see how it shows up in the Document tree.
So if you see, it is rendered after the floated child div where we clear the floats which is nothing but equivalent to have an empty div element with clear: both; property which we are using for this too. Now why display: table; and content is out of this answers scope but you can learn more about pseudo element here.
Note that this will also work in IE8 as IE8 supports :after pseudo.
Original Answer:
Most of the developers float their content left or right on their pages, probably divs holding logo, sidebar, content etc., these divs are floated left or right, leaving the rest of the space unused and hence if you place other containers, it will float too in the remaining space, so in order to prevent that clear: both; is used, it clears all the elements floated left or right.
Demonstration:
------------------ ----------------------------------
div1(Floated Left) Other div takes up the space here
------------------ ----------------------------------
Now what if you want to make the other div render below div1, so you'll use clear: both; so it will ensure you clear all floats, left or right
------------------
div1(Floated Left)
------------------
<div style="clear: both;"><!--This <div> acts as a separator--></div>
----------------------------------
Other div renders here now
----------------------------------
The clear property indicates that the left, right or both sides of an element can not be adjacent to earlier floated elements within the same block formatting context. Cleared elements are pushed below the corresponding floated elements. Examples:
clear: none; Element remains adjacent to floated elements
body {
font-family: monospace;
background: #EEE;
}
.float-left {
float: left;
width: 60px;
height: 60px;
background: #CEF;
}
.float-right {
float: right;
width: 60px;
height: 60px;
background: #CEF;
}
.clear-none {
clear: none;
background: #FFF;
}
<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-none">clear: none;</div>
clear: left; Element pushed below left floated elements
body {
font-family: monospace;
background: #EEE;
}
.float-left {
float: left;
width: 60px;
height: 60px;
background: #CEF;
}
.float-right {
float: right;
width: 60px;
height: 120px;
background: #CEF;
}
.clear-left {
clear: left;
background: #FFF;
}
<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-left">clear: left;</div>
clear: right; Element pushed below right floated elements
body {
font-family: monospace;
background: #EEE;
}
.float-left {
float: left;
width: 60px;
height: 120px;
background: #CEF;
}
.float-right {
float: right;
width: 60px;
height: 60px;
background: #CEF;
}
.clear-right {
clear: right;
background: #FFF;
}
<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-right">clear: right;</div>
clear: both; Element pushed below all floated elements
body {
font-family: monospace;
background: #EEE;
}
.float-left {
float: left;
width: 60px;
height: 60px;
background: #CEF;
}
.float-right {
float: right;
width: 60px;
height: 60px;
background: #CEF;
}
.clear-both {
clear: both;
background: #FFF;
}
<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-both">clear: both;</div>
clear does not affect floats outside the current block formatting context
body {
font-family: monospace;
background: #EEE;
}
.float-left {
float: left;
width: 60px;
height: 120px;
background: #CEF;
}
.inline-block {
display: inline-block;
background: #BDF;
}
.inline-block .float-left {
height: 60px;
}
.clear-both {
clear: both;
background: #FFF;
}
<div class="float-left">float: left;</div>
<div class="inline-block">
<div>display: inline-block;</div>
<div class="float-left">float: left;</div>
<div class="clear-both">clear: both;</div>
</div>
CSS float and clear
Sample Fiddle
Just try to remove clear:both property from the div with class sample and see how it follows floating divs.
Mr. Alien's answer is perfect, but anyway I don't recommend to use <div class="clear"></div> because it just a hack which makes your markup dirty. This is useless empty div in terms of bad structure and semantic, this also makes your code not flexible. In some browsers this div causes additional height and you have to add height: 0; which even worse. But real troubles begin when you want to add background or border around your floated elements - it just will collapse because web was designed badly. I do recommend to wrap floated elements into container which has clearfix CSS rule. This is hack as well, but beautiful, more flexible to use and readable for human and SEO robots.
When you want one element placed at the bottom other element you use this code in CSS.
It is used for floats.
If you float content you can float left or right... so in a common layout you might have a left nav, a content div and a footer.
To ensure the footer stays below both of these floats (if you have floated left and right) then you put the footer as clear: both.
This way it will stay below both floats.
(If you are only clearing left then you only really need to clear: left;.)
First off let me assure you I've searched and tried so many solutions to this seemingly simple layout without success.
For now I've had to resort to laying it out with display:table, but would very much prefer a non-script, pure CSS solution using divs.
What I need is a basic 2-column layout: A sidebar div hugging the top-left and a content wrapper div to the right of the sidebar.
The sidebar will contain 3-4 divs, the content wrapper 1 div.
The kicker is I need the background of the sidebar and content wrapper always to fill 100% height of the viewport - even if there's no content inside the content wrapper div.
If there's content inside the content wrapper div, the background of both the sidebar and content wrapper should expand vertically to fill the viewport.
The fiddle below does exactly this. The problem with this approach (using position:fixed on the sidebar) occurs once you start "zooming" on mobile devices. The content will then disappear behind the fixed div.
Any advice on how to best achieve this layout?
Fiddle: http://jsfiddle.net/mnorup/2Xvdn/1
I think I got something quite close to what you want: http://jsfiddle.net/2Xvdn/5/
What I changed:
added a wrapper having the id outside and added the following css to it: {
overflow: hidden;
min-height: 100%;
}
replaced the css for sidebar by {
background: yellow;
width: 230px;
float: left;
margin-bottom: -9999em;
padding-bottom: 9999em;
}
removed min-height for contentwrap and added the following css: { margin-bottom: -9999em;
padding-bottom: 9999em;
}
Here are some other approaches to have columns with equal heights: http://www.vanseodesign.com/css/equal-height-columns/ I used the here described Borders and Negative Margins, just that I used padding instead of borders.
Is this doable for you? FIDDLE
I just changed a width and floated.
CSS
#sidebar {
height: 100%;
background: yellow;
width: 230px;
border: 0px solid transparent;
float: left;
}
#contentwrap {
min-height: 100%;
background: blue;
float: left;
margin-left:10px;
OK, see if this is closer. FIDDLE
The container for the text is the container for everything, and as it expands, so will the bar on the left.
Smaller contents so you can see the background - FIDDLE
Here's my jsFiddle
In my Fiddle link i have floated my left-sidebar and right-sidebar. As per my knowledge floated element are removed from html normal flow. i just did not understand if it is so why it is displacing my right-sidebar.
<div class="content-area">
<div class="left-sidebar"></div>
<div class="main-area">hi</div>
<div class="right-sidebar"></div>
my css:
.content-area {
background-color: #bbb;
height: 310px;
}
.left-sidebar {
float: left;
width: 50px;
height: 100%;
background-color: #abcdef;
}
.right-sidebar {
float: right;
width: 50px;
height: 100%;
background-color: #abcdef;
}
http://www.vanseodesign.com/css/understanding-css-floats/
Elements are placed in the order per a normal flow, removed from the normal flow and then moved right or left based on the float. Your right side bar is shifted down because it comes after the main content in a normal flow. If you don't want want it to be shifted you need to change the order of your elements.
http://www.w3.org/TR/CSS2/visuren.html#positioning-scheme
Per the spec:
In the float model, a box is first laid out according to the normal
flow, then taken out of the flow and shifted to the left or right as
far as possible. Content may flow along the side of a float.
You are confused with position: absolute. Floating will move an element to the left or right, encouraging other elements to 'float' around it, but they will still be in the flow and other elements are influenced by it.
When you use position: absolute, you remove the element from the flow, placing it on top or below other elements.
Here is your updated fiddle. The most important changes are in this part:
.content-area {
background-color: #bbb;
height: 310px;
position: relative;
}
.left-sidebar {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 100%;
background-color: #abcdef;
}
.right-sidebar {
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 100%;
background-color: #abcdef;
}
The parent is given a position too, so the sidebars can be positions in it. The left and right sidebar are positioned at the top of the parent and on the far left and far right respectively.
If you look closely, you see that the contents of the main content block are now behind the side bars. I've made the text a bit longer, so you can see it appearing from underneath the left bar.
Of course this is probably not what you want, but you can solve it quite easily by changing the order in your markup. First add the sidebars in whichever order you like, and then add the main content. The results can be seen here.
The way this works: at the top of your content-area, the left side bar is started first. It floats to the left, encouraging the next element to float next to it, having the same top position. That element would be the right side bar, which float to the right, and also encourages the next element to float left of it. The main area doesn't have an explicit width, so it figures that it would fit snuggly inbetween, still starting at the same top position.
Since the main element itself doesn't float, the next element will start (top) where the main area ends. So if the right bar would come after the main area, it shifts down, like in your example. The right bar would move even further down if the main area contents grow.
<div class="content-area">
<div class="left-sidebar"></div>
<div class="right-sidebar"></div>
<div class="main-area">hi</div>
You need to change main-area to come after the other two floated elements. I may seem weird to do it this way, but it means that main-area will not push right-sidebar down because the content is coming after it in the markup. I hope this helps.
I found that when I mix floated and nonfloated divs, margin of unfloated div is missing.
HTML
<div class="d0 d1">
Left
</div>
<div class="d0 d2">
Right
</div>
<div class="d0 d3">
Center
</div>
CSS
.d0 {
height: 100px;
border: 1px solid #333;
}
.d1 {
float: left;
width: 100px;
}
.d2 {
float: right;
width: 100px;
}
.d3 {
overflow: hidden;
width: auto;
margin: 5px;
}
See this fiddle (5px margin on center div is missing)
http://jsfiddle.net/ozrentk/f5VFc/2/
However, if I add margin to floating elements, then it's really there.
Does someone know why is this happening?
EDIT I updated the fiddle, it was a bit confusing
To understand the problem, look at the margin that should be BETWEEN Center and Left div. Or Center and Right. There is none.
The problem you are running into is that a non floated element will ignore floated elements within the document flow.
The margin is being applied, but since the non floated div does not recognize the floated one, its is relative to the edge of the page and not the floated div.
You can read more about it here: http://spyrestudios.com/css-in-depth-floats-positions/
How can I place two divs right next to each other (left and right) in order that the left div auto sizes depending on how wide the right div is.
So for example if the right container is 100px wide and the right div in the container is 10px wide ,then the left div is 90px wide. OR if the right div is 40px wide then the left is 60px wide.
Thanks
This is a trick I use a lot
<style>
.sidebar {
width: 600px;
float: left;
background: #00ff00;
}
.content {
margin-left: 610px;
background: #ff0000;
}
</style>
<div class="sidebar">
sidebar
</div>
<div class="content">
content
</div>
You set the width of one element and float it, then you force the element you want to sit beside it into the gap by putting a margin on it the same width as the floating element.
Word of warning: In this example, the sidebar element MUST appear first in your source code.
You can adjust the width of the columns dynamically by changing the width of one element and the margin of the other element.
Save the source to an html file on your destop and have a play around with it to figure out how it works.
I agree with the comment above. Just make sure that you float: right; the div that you want to the right side of the screen. I would have left this as an additional comment, but do not have enough rep to do so.
<style>
.left {
width: auto;
}
.right {
width: 100px;
float: right;
}
</style>