I have this HTML code: http://jsfiddle.net/Lgj1s5km/
<div class="clear">Div1 with float:left and clear:right</div>
<div class="float">Div2 with float:left </div>
and this CSS:
div {
border:1px solid #ff9900;
width:120px;
height: 120px;
}
.clear {
float:left;
clear: right;
}
.float {
float: right;
}
As far as I understand, the way clear: right does is that floating elements are not allowed on the right side. In case they are, the element to which "clear" is applied to goes to a new row and starts a new document flow.
In this example, however, it's not physically possible for div.clear to go to a new row because it's preceded by a new element. If I reverse the order of the 2 <div> tags, however, this will all work fine.
My question was, is it possible to still get div.clear to go to a new row, despite the fact it's in front of div.float?
It depends if you have any other elements which may then be affected by your positioning of div.clear, but if not, then you can give div.clear the impression of being on the next row down, simply by declaring a margin-top equal to the height of div.float plus the height of div.float's top and bottom borders:
.clear {
float: left;
margin-top: 122px;
}
Related
I'm very confuses about float.
.two should be on the right of .one
but .two just below .one
div {
width: 100px;
background: #FF9;
}
;
.theone {
float: left;
font-size: 20px;
}
<div class="theone">one</div>
<div class="theright">two</div>
into div css add display:inline-block;
div{
display: inline-block;
}
.theright {
float: left;
font-size: 20px;
}
add that in, if you want 2 divs to be next to eachother it is best to have them both float right.
additionally you could replace .theone with .theone,.theright
A div has display: block by default.
You probably want to set another display type to your divs.
div { width: 100px; background: #FF9; display: inline; }
.theone { float: left; font-size: 20px; }
See jsFiddle
I'll try and make a detailled and explained answer. A floating element floats from its initial position in the flow. Basically, the floating effect affects only elements declared after it on the HTML structure.
In your case, the right-floating element is declared after the non-floating one. So it is normal theright appears below theone and you don't see the floating effect.
To make an element float on the right of another, you must declare it before this another. Like this :
<div class="theright">two</div>
<div class="theone">one</div>
<style>
.theright {
float: right;
}
</style>
Note that for this to work, theright element needs to be larger than theone. Otherwise, theone will mask entirely theright pushing its content out of the box. It is so because a floating element gets out of the flow and hovers over the other elements, which contents "avoid" the floating blocks.
There are many other ways to obtain the same result with a different approch :
make theone float on the left instead (leaving theright as a basic block element)
make both elements inline-blocks and give them appropriate widths
for two elements only, it is not necessary, but if you need 3 or more elements side by side, you can make them all float on the left (or on the right declaring them in reverse order, depending on the final layout you want)
etc.
div {
width: 100px;
background: #FF9;
display: inline-block;
}
;
.theone {
float: left;
font-size: 20px;
}
<div class="theone">one</div>
<div class="theright">two</div>
By default div's have display value set to "block" which means they "begin from next line".
If you add display: inline-block property for all divs, then you can add float: left for any div to make it first.
html
<ul>
<li>
<button>first part</button>
</li>
<li>
<button>second part</button>
</li>
<li>
<button>third part</button>
</li>
</ul>
<div id="bottom">Believe Me</div>
css
body {
font-size: 16px;
}
li {
list-style: none;
width: 300px;
border: 1px solid black;
margin-top: 20px;
overflow: hidden;
}
li button {
padding: 15px 10px;
margin: 2px;
display: block;
float: right;
}
div#bottom {
width: 100px;
height: 50px;
line-height: 50px;
background-color: red;
margin-top: 50px;
}
we often use below class to clear 'float';
.clearfix{
clear:both;
overflow: hidden;
contain: '';
}
sometime, we can only use 'overflow',that can solve our problem.
what difference between 'overflow' and 'clear'?
code about this question
Strange comparison since overflow and clear are completely unrelated. Unless I misunderstood your question. In which case, please rephrase so that we can clarify better.
Anyhow, overflow controls the any excess outside of the width of an element.
The overflow property specifies what happens if content overflows an element's box.
If you have a div with containing a large image and you want to restrict the image to not exceed the width of that container, overflow will do just that by giving it a hidden value. If you want it to scroll after a certain width or height, the scroll value will activate the scrollbars to allow you to do so.
Clear on the other hand, resets the floats.
The clear property specifies on which sides of an element floating elements are not allowed to float.
This is particularly helpful in responsive design to center an item that has been floated to the right in larger displays but you want to reset it to the native left position for smaller devices. Of course, the use of clear can be determined by other factors according to your need of it.
The example above mentioned would look like this
<div class="box">
<button class="right">Hello</button>
</div>
CSS
.right{
float: right;
}
#media (max-width: 420px){
.right{
clear: right;
}
}
In your example, you had floated element("button") inside a "li". "clear" is float's sister property, the element which is set to this property will adjust itself by clearing the adjacent floated elements. floated elements can affect the container elements height. As per your example which is "li" tag. overflow method is one of the technique to solve this problem. Read more about float here: https://css-tricks.com/all-about-floats/
I'm new to CSS tables, it's my first time. So I discovered that when you set display:table to a div, you can forgot all margin and padding (and whatever) you're planning on it's future cause they are ignored. Nice. The only property I've found to make this job is border-spacing but it is a little limited comparing with margin and padding. It have only two ways of styling, horizontal and vertical. You can't set the value of the side you want like border-spacing-left or border-spacing: 0 1px 2px 3px.
In my case, I have a table with one row that lies on the top right corner of the screen. I want it attached on the very top and spaced horizontally, which caused me problems. The top is okay but the right detaches from the border when I use border-spacing: 10px 0.
Smart guys like me don't see this as a problem, cause we can set it margin-right negatively, making it be attached again on the right side of the browser. Wow, whata smart ass I am!
However, I saw an little damn scrollbar on the bottom of the screen like a roach under your cooker at the kitchen. I hate roac.. scrollbars specially horizontals, so I got my inseticide called overflow-x and kil.. set it to hidden. She run desperately and dissapeared, but I know that she's there, somewhere staring at me. And this is driving me crazy.
Seriously now. I think this isn't the right way to do that and I hope somebody can teach me how to do it.
This is my scenario on Fiddle
Thank you in advance(mainly for reading this crap).
There are a few ways of achieving what you're trying to achieve. Most commonly, using display: table, display: table-cell, etc isn't very high on the list.
So, here's how I would do it: http://jsfiddle.net/VKnQZ/1/
Do bear in mind that I don't know the full circumstance of what you're attempting so it may well be that I'm missing a (valid) reason that you're using table display properties in the first place.
You'll notice a few things here:
I've done away with your table display properties. I don't think you need them, and floats do the job just fine (just remember to clear them).
I've removed your display from the cell divs. As someone in the comments above pointed out, divs inherit display: block by default. The additional dimensions set their size as you already had it.
I'm using the + selector to put in the spacing between elements. In this instance div + div is essentially short-hand for 'every div which is beside another div' - so all of them aside from the first.
Hopefully that achieves what you're aiming for and does away with all the nasty hacky overflow/margins/etc.
Here's the code:
HTML (only change is to remove the row div):
<div id="nav">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
CSS:
body {
padding: 0;
margin: 0;
}
#nav {
float: right;
}
#nav div {
float: left;
width: 120px;
height: 40px;
}
#nav div + div{
margin-left: 10px;
}
.red { background-color:#f00 }
.green { background-color:#0f0 }
.blue { background-color:#00f }
and can you tell me why are you trying to imitate table behavior when you have "table" tag? it could be styled pretty well also
what you are doing is sometimes called "divitis"
edit:
you can position table absolutely http://jsfiddle.net/n83kT/
Not too sure if this the right place to discuss float and display :)
But , flex is on his way, and display is already quiet efficient.
Display + direction and you could kick floats away.
border-spacing version : http://jsfiddle.net/GCyrillus/2EZ3F/
border-left version : http://jsfiddle.net/GCyrillus/2EZ3F/1/
<section>
<div id="nav">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
</section>
section is to set direction .. or not
unset & reset direction to fake float ,
else use text-align if you dislike this method.
In CSSheet, notice inline-table instead of table so it reacts to text-align and or direction (not all pages are EN or FR :) )
body {
padding: 0;
margin: 0;
}
section {
direction:rtl; /* unset regular if you wish, else text-align will do for inline-boxes */
}
#nav {
direction:ltr;/* reset/set here if you want cells from left to right */
display:inline-table;
border-spacing: 10px 0 ;
}
#nav div {
/*direction:ltr; reset here if you want cells from right to left */
display: table-cell;
width: 120px;
height: 40px;
}
#nav div + div {
margin-left: 10px;
}
.red {
background-color:#f00
}
.green {
background-color:#0f0
}
.blue {
background-color:#00f
}
My 2 (late) cents for a different point of view :)
For completeness, I would like to offer the case for the often overlooked inline-block display type.
Similar to the use of floats, the HTML is as follows:
<div id="nav">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
and the CSS:
#nav {
position:absolute;
top:0;
right:0;
}
#nav div {
width: 120px;
height: 40px;
display: inline-block;
vertical-align: bottom;
}
#nav div + div {
margin-left: 10px;
}
This inline-block approach behaves similarly to the floated-child-div's approach.
In this application, I can't think of a reason to use one over the other.
One minor consideration is that inline-block is not supported in some older browsers.
Otherwise, both approaches use the same mark-up and the CSS rules are similarly simple.
The choice may depend a lot on the content that you use in the #nav div elements.
Demo fiddle: http://jsfiddle.net/audetwebdesign/EVJPN/
This is my code for the two buttons:
HTML:
<div clas="buttons">
<a class="btn1" href="#">Ture</a>
<a class="btn2" href="#">False</a>
</div>
CSS:
.btn1 {
margin-bottom: 30px;
margin-left: 150px;
}
.btn2 {
margin-right: 150px;
}
However, "the margin-bottom:30px" attribute simply doesn't work. It failed to position the button vertically. Even more weirdly, the "margin-right: 150px;" attribute doesn't work for my btn2, and the two buttons are still adjoin to each other. BTW, my div is large enough to have the two buttons positioned seperately.
Margins should only be applied on block level elements. They will give unexpected results if you apply them on inlines, wich the <a> are by default: You could set padding in stead of margin. And indeed reverse them as #Mitz correctly suggested. The more correct way, but perhaps more difficult for beginners, would be to convert the <a> to block and float them left. Personally my css would look something like this:
.buttons {
padding: 30px 150px;
overflow: hidden; /* for clearfix */
}
.btn1, .btn2 {
display: block;
}
.btn1 {
float: left;
}
.btn2 {
float: right;
}
That is just how I interpret your code and think what you might want to achieve.
This is because naturally <a> is an inline element. You need to apply display: block; to it if you want to apply margins.
The two buttons will be one above the other afterwards. If you still want them to appear next to each other then you should float: left; them. And don't forget to apply some kind of .clearfix.
you should use margin-top and margin-left, instead of margin-bottom and margin-right...
you can use first button's height to push the other button down, like this
.btn1 { height:200px; }
and if you are using margins you should always define some height and width, like
.btn1 { height:20px; width:100px; }
.btn2 { height:20px; width:100px; padding-top:150px; }
update:
about the float comment-
float will get the two buttons sit side by side horizontally,
i think he wanted them aligned vertically
You can try float:left; for buttons.
I have two divs on a webpage and I would like both of them to have a fixed width and would like the first div to be floated to the left of the second div.
This sounds so simple that I though the following Markup and CSS would give me the desired result:
<div class="left">Content</div>
<div class="right">Content</div>
div.left {
float: left;
width: 200px;
}
div.right {
width: 200px;
This doesn't work as expected, instead the right div appears on the next line as though it wasn't floated. This is best explained in this example webpage:
Example of the Problem
My question is WHY this doesn't work as expected? Not how to fix it.
Notes:
Please make sure you fully understand how floats work before answering this question.
Please make sure you view and understand the examples.
Both elements must be block, not inline.
I understand all fixes/hacks to make this work. I want to know why it doesn't work.
This appears to only work correctly in Opera.
Backing up your answer with documentation is required.
It seems to me that it is the simple rule that blocks, unless floated, always start a new line. w3.org/TR/CSS2/visuren.html#block-formatting section 9.4.1 –
div.left {
float: left;
width: 200px;
height:200px;
background:red;
}
div.right {
float:right;
width: 200px;
height:200px;
background:blue;
}
see http://jsfiddle.net/3kUpF/
Alternatively, if you want them side by side then you can float:left on both
see http://jsfiddle.net/3kUpF/1/
Floating elements can flow "into" block elements, occupying the same line but pushing the contents (not the element itself) over. In this case, left is "inside" right, but there isn't any space left for the text on the right, so it goes underneath. To see what I mean, try setting the width of right to 300px instead of 200px - you should see the blue border "around" left, with the text flowing around it. To "fix" this, I'd suggest giving right a float of left or a display of block-inline.
Float both divs left.
Apply a positive left margin of width(div.right), in your case 200px.
Apply a negative left margin of width(div.left) + width(div.right), in your case, 200px + 200px = 400px.
div.left { float: left; width: 200px; margin-left: 200px; }
div.right { float: left; width: 200px; margin-left: -400px; }
The second element should be inline element.
div.right {
width: 200px;
display: inline;
}
If you do not want to make second element inline, just float it to the left too. But your container will collapse. You can fix it using clear:
<div id="container">
<div class="left">Content</div>
<div class="right">Content</div>
<br style="clear:both"/>
</div>
div.left {
float: left;
width: 200px;
border: 1px solid red;
}
div.right {
width: 200px;
border: 1px solid green;
float:left;
}
#container{
border: 1px solid black;
}
See example
You could add clear:both; your <p> tags. That would solve the problem. Without breaking the rest of the (example) page.
in case you want both containers to float besides each other, you can rather use a span instead of a div. That might bring the problem to an end.