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.
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.
I've got two images that I want to sit beside each other inside the parent div but I can't get them to do it.
.column {width:100%;max-width:1500px; margin:0 auto; }
.span_1_of_2 {width:50%; display:inline-block; }
.span_2_of_2 {width:50%;display:inline-block; }
https://jsfiddle.net/87xzwj5t/
It's white-space that's doing you in.
Add this CSS:
.column { font-size: 0; }
.column > div { font-size: 1rem; /* Or whatever you want it to be */ }
and it'll fix your problem.
The font-size: 0 makes sure the white-space isn't rendered, and then the font-size: 1rem resets the font in the child divs to whatever it was set at document root (this is by default 16px in most browsers).
Inline-block elements display just like elements in text flow, which is why the white-space is respected when they're rendered.
JSFiddle example
Remove the whitespace in html, i will work
.column {width:100%;max-width:1500px; margin:0 auto; }
.span_1_of_2 {width:50%; display:inline-block; }
.span_2_of_2 {width:50%;display:inline-block; }
<div class="column">
<div class="span_1_of_2">Div 1</div><div class="span_2_of_2">Div 2</div>
</div>
The problem is that display:inline-block adds about 4pxof margin to the div with it because of the whitespace. If you still want to use it, you could do something like this:
.span_2_of_2 {width:50%; display:inline-block; margin-left:-4px; }
EDIT
What Josh said may be true. Why don't you just float them? Like this:
.span_1_of_2 {width:50%;float:left; }
.span_2_of_2 {width:50%;float:left; }
Then of course clear the float.
Just add float:left; to the first span
CSS
.span_1_of_2 {
width:50%;
display:inline-block;
float:left;
}
Here's the deal: a series of inline-block elements formatted like you
normally format HTML will have spaces in between them. That´s why with two span and the gap between them you will have more than 100%.
DEMO HERE
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/
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.