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.
Related
I have two divs with display:inline block next to each other, however the 2nd one's width can change to be so long that it will fall under the first div. That is fine, but the problem is that there is no vertical space between the 2 divs when this happens. I can solve this by adding margin-bottom to the first div, but then this causes the 2nd div to be a bit lower even when it is sitting to the right of the first div.
What browser are you using? As you can see below, two inline-block divs retain a margin when one slips below the other. (In fact, getting rid of the margin between inline-block elements is a bit tricky, but that's another question.)
#container {
width: 200px;
}
#top {
display: inline-block;
width: 100px;
height: 100px;
background: red;
}
#right {
display: inline-block;
width: 150px;
height: 100px;
background: blue;
}
<div id="container">
<div id="top"></div><div id="right"></div>
</div>
What you want is "vertical-align:top;".
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;
}
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 am trying to set a div element on the right top of a web-page which contains a span, a label and a button. I want to bring all the elements in alignment regarding the vertical high (preferably at the middle of the div element). However vertical-align: middle does not work as the elements are cling to the top of the div. They are probably influenced by an external div or Panel (since I use gwt). Should I interfere in the default attributes of the gwt widgets? What other solution can you suggest?
The code:
<div class="{style.topRightDisplay}">
<span style="float:left;">Eingeloggt als: </span>
<g:HTML ui:field="loginHTML" addStyleNames="{style.loginHTML}"></g:HTML>
<g:Button ui:field="logoutButton" addStyleNames="{style.button}">Logout</g:Button>
</div>
.button {
float: right;
margin-right: 15px;
}
.loginHTML {
float: left;
}
.topRightDisplay {
float: right;
height: 20px;
width: 200px;
vertical-align: middle;
}
You misunderstand the purpose of vertical-align. See the explanation of vertical-align on MDN
You need to apply vertical-align to the child elements, not the parent.
Without knowing what your markup looks like, I suggest this:
.topRightDisplay input,
.topRightDisplay button,
.topRightDisplay span{
vertical-align: middle;
display: inline-block;
}
You should also remove the floats. Floats make an item render as a block-level element, which means vertical-align won't work.
Instead you can use display: inline-block. You may need to change the order of the elements in hmtl to get the result you want.
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.