As you can see in my Jsfiddle, I have a div and three buttons. I would like the buttons to be placed at right: 85% (so that you get what I mean), without me having to use position: absolute.
I also tried this:
.button {
float: right;
}
.. but the buttons fall out off the div.
Any ideas please?
Here's my JsFiddle.
I've added a div to hold your three button divs. You can update the margin right to have it more to the left.
div.button-holder div:last-child{
margin-right: 10px;
}
Change Markup and add class:
<div class="header_div">
foo
<div class='btns'>
<button class="button">New</button>
</div>
<div class='btns'>
<button class="button">Load</button>
</div>
<div class='btns'>
<button class="button">Delete</button>
</div>
</div>
Instead Of..
.button {
float: right;
}
Try This...
.btns {
float: right;
}
Related
I have a problem with the buttons on my webpage.
This is what they look like when I enter fullscreen
When I click next, and go back to this same page it then turns into this
I tried no matter what I try they always end up not aligned when I click next and go back to this same page.
The style of the buttons
.button1{
bottom: -70px;
right:0px;
position: absolute;
}
.button2{
bottom: 28px;
left:8px;
position: absolute;
}
The buttons
</div>
<div class="button1">
<button type="submit" name="Next">Next</button>
</div>
</form>
<form action="Time.html">
<div class="button2">
<button type="submit" name="Next">Back</button>
</div>
</form>
Also you can see that they don't belong in the same form.
The form where Next button belongs
.form1 {
border: 8px solid #7B93F4;
left:0;
position: absolute;
top: 43%;
width: 98.9%;
text-align:center;
}
Any idea on how can I fix this and prevent this from happening?
You could change the layout a bit, floating the buttons:
.cont {
overflow: hidden;
}
.button1{
float: left;
}
.button2{
float: right;
}
<div class="cont">
<button class="button1">button1</button>
<button class="button2">button2</button>
</div>
Floating is more flexible then position absolute.
There is an error with your HTML code. Edit it so that it'll be clear.
The two buttons are contained in different form elements which are stacked on top of themselves because they are block elements. Put them in the same form element and use the style below.
You should avoid positioning absolutely when you can. I'll suggest you float the buttons instead.
Your HTML might look something like this
<form>
<div class="button1">
<button type="submit" name="Next">Next</button>
</div>
<div class="button2">
<button type="submit" name="Next">Back</button>
</div>
</form>
and your CSS like this
.form1 {
/* your other codes */
overflow: auto;
}
.button1{
float: left;
}
.button2{
float: right;
}
Hope it works.
I just can't get the button with class align-right to vertically align in the middle.
HTML:
<div class="panel-footer">
<span style="width:100%;" class="header-footer-item">
<button class="align-right" type="button">Save</button>
</span>
</div>
CSS:
.panel-footer {
height: 70px;
vertical-align: middle;
border: solid;
}
.header-footer-item {
display: inline-block;
line-height: 70px;
border: solid red;
}
.align-right {
float: right;
}
.align-middle {
vertical-align: middle;
}
Here's the jsfiddle:
https://jsfiddle.net/d1vrqkn9/2/
If I remove float:right from the button, it works, but I want it on the right.
If I change header-footer-item from inline-block to inline then the floated button renders above its containing element, which I thought was against the rules: (#4 in the accepted answer here How to vertically middle-align floating elements of unknown heights?) - although the parent element is then vertically aligned in the middle.
I have added line heights as per CSS Vertical align does not work with float
The big question is - how do I fix it? I'm also interested to know why making a child element (the button) float right makes the parent element (the span) no longer vertically align in the containing div (but only if it is inline-block, not inline). ...and finally, isn't it 'against the rules' (https://www.w3.org/TR/CSS21/visuren.html#float-rules, #4) for a floating box's outer top to be higher than the top of its containing block? ...which it clearly is if header-footer-item is inline.
There are so many questions about vertically aligning things you'd think they'd make a css for "Seriously, vertically align this thing - no matter what, no complaints, just do it: sudo force vertical-align:middle !important or I'm coming for you"
The cleanest way to do that is to use flex like this:
Add display: flex to your outer div panel-footer [Check code below]
Remove the float and use text-align:right on the span for the button. [Check code below]
Add align-self: center to the inner span. [Check code below]
For 1:
.panel-footer {
height: 70px;
border: solid;
display:flex;
}
For 2:
.header-footer-item {
text-align: right;
}
For 3:
.header-footer-item {
align-self: center;
}
jsFiddle: https://jsfiddle.net/d1vrqkn9/4/
Here's a version with proper HTML, and just enough CSS.
.panel-footer {
height: 70px;
border: solid;
position: relative;
}
.panel-footer button {
position: absolute;
right: .5em;
top: 50%;
transform: translate(0,-50%);
}
<div class="panel-footer">
<button>Save</button>
</div>
There's an accepted answer already with some flexbox magic, here's an answer without it and the extra wrapping span element.
.panel-footer{
position:relative;
height: 200px;
border:1px solid #000;
}
.panel-footer button.align-right{
position:absolute;
right:0;
top:50%;
transform:translateY(-50%);
}
<div class="panel-footer">
<button class="align-right" type="button">Save</button>
</div>
If you don't need your button to be box-modeled then you can remove float:right; and add text-align:right to parent.
But I agree with previous answer that flexbox is pretty good answer to all positioning doubts.
Solution with text-align:
https://jsfiddle.net/d1vrqkn9/8/
Solution with flexbox:
https://jsfiddle.net/d1vrqkn9/9/
line-height will do. Try different height values.
<span style="width:100%; line-height: ??px;" class="header-footer-item">
In my point of view, trying to achieve that with a float element is a dead end.
If your goal is to have an element at the right inside another element, you better use another solution, like table positionning.
You just have to create the 4 following css class (the row element is not used in this case) :
.table {
display: table;
width: 100%;
}
.row {
display: table-row;
width: 100%;
}
.cell {
display: table-cell;
}
.cell-min-width {
display: table-cell;
width: 1%;
}
Then you just have to change your code for :
<div class="panel-footer table"> <!-- Position with table -->
<span style="width:100%;" class="header-footer-item">
<div class="cell"></div><!-- Empty cell to fill the left-->
<div class="cell-min-width"> <-- Cell with min width to fit the button -->
<button class="" type="button">Save</button>
</div>
</span>
</div>
https://jsfiddle.net/outch27/d1vrqkn9/366/
I'm using twitter-bootstrap framework and I'm trying to put a form-control with some text aligned to the right and some text aligned the the left (all in the same line).
Here is the fiddle: http://jsfiddle.net/2gu29/3/
HTML
<div class="inlineb">Hello</div>
<div class="floatr inlineb">
<input type="text" class="form-control inlineb"> cm
</div>
<hr>
<button class="btn btn-primary">Hello stackoverflow</button>
CSS
hr {
margin: 30px 0px 30px 0px;
border-color: red;
}
body {
padding: 30px;
}
.form-control {
width: 100px;
}
.floatr {
float: right;
}
.inlineb {
display: inline;
}
But, as you see, the div which contains the input above the hr tag, does not respect the margin setted to the hr in the css (margin-top: 30px) if I use float: right. But if I don't use this property, it respect it. see it: http://jsfiddle.net/2gu29/9/
Why my solution does not work? Could you give me an exmplanation, please? Do you have another alternative to do it?
Any tip, advice or help will be appreciated, and if you need more info, let me know and I'll edit the post.
This is always a problem with floated element and inline element. If you want to fix this issue then you need to add display:inline-block and width:100% in hr tag.
Here is updated fiddle
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.
If you read this line from MDN Float Documentation you can understand that whenever we apply float property to any element, it is taken out from normal flow of the page.
Hence, margin is getting calculated from the Hello word instead of floated element.
Solution
Wrap the divs inlineb and floatr in another div and you should be fine. Checkout this JS Fiddle
Updated Code
<div class='container'>
<div class="inlineb">Hello</div>
<div class="floatr inlineb">
<input type="text" class="form-control inlineb" /> cm
</div>
</div>
<hr>
<button class="btn btn-primary">Hello stackoverflow</button>
#blunderboy has already explained what the problem is. My answer is just an alternate solution, which I have floated the left element and aligned the input to the right, therefore it still has height.
HTML
<div class="floatl">Hello</div>
<div class="rightinput">
<input type="text" class="form-control inlineb"/> cm
</div>
<hr>
<button class="btn btn-primary">Hello stackoverflow</button>
CSS
hr {
margin: 30px 0px 30px 0px;
border-color: red;
}
body {
padding: 30px;
}
.form-control {
width: 100px;
}
.floatl {
float: left;
}
.inlineb {
display: inline;
}
.rightinput {
text-align: right;
}
I'm designing a web page with a small label off to the right of the body on some lines. For this, I created an absolute-positioned <div> inside of a relative-positioned one.
The label is appearing exactly as I want it. However, even though the absolute-positioned <div> dimensions are 0 x 0, it still is taking up some room on the line.
This can be seen at http://jsfiddle.net/sznH2/. I would like the two buttons to line up vertically. Instead, the button next to the label is pushed left a few pixels.
Can anyone see what is causing this spacing and how to eliminate it?
HTML:
<div>
<div class="pull-right">
<button>Hello world!</button>
</div>
</div>
<div>
<div class="pull-right">
<button>Hello world!</button>
<div class="outer-relative">
<div class="inner-relative">
<span>XXX</span>
</div>
</div>
</div>
</div>
CSS:
body {
width: 500px;
margin-left: auto;
margin-right: auto;
}
.pull-right {
text-align: right;
}
.outer-relative {
display:inline-block;
position:relative;
height: 0px;
width:0px;
}
.inner-relative {
position: absolute;
left: 0px;
top: -15px;
background-color: Lime;
}
Inline block elements will render the spacing between the tags. Check this out: http://jsfiddle.net/sznH2/4/
<button>Hello world!</button><div class="outer-relative"><div class="inner-relative"><span>XXX</span>
Remove the spaces and you're good to go
I think You Need to make pull-right postiton:relative
and outer-relative absolute
http://jsfiddle.net/tousif123/sznH2/3/
is this what are you looking for?
.pull-right {
position:relative;
}
.outer-relative {
position:absolute;
}
Hi,
I try to create columns with album images and some info.
I want the info to overlay for a litle bit on the image next to it.
Like on this image:
However either i break floating left or the text get's totaly on top of the image etc. etc.
Like everything except the desired result.
Some help would be great, here's a jsfiddle:
http://jsfiddle.net/Scf4u/
small piece of the code:
<div class="entrie">
<img class="entrieImage" src="http://doekewartena.nl/temp/images/img02.png"/>
<div class="entrieInfo">
<div class="band">Kids for Cash</div>
<div class="album">No More Walls E.P.</div>
<div class="label">...</div>
<div class="year">1986</div>
<p>-</p>
<div class="tags">rousseau, green, woodsy, band photo, 12IN, tree, civilization, Atco, 1960's, Fuzz
</div>
</div>
</div>
css:
.entrie {
float: left;
}
.entrieInfo {
width: 200px;
float: left;
margin-left: 10px;
}
.entrieImage {
/* if you only set the width then the height will be set automaticly proportional*/
width: 300px;
float: left;
}
http://jsfiddle.net/Scf4u/1/
#entries .entrie:nth-of-type(2n) {
margin-left: -41px;
position: relative;
z-index: -1;
}
Should take every second .entries div and set a negative margin on the left, and a z-index to be underneath the previous div. Might have mixed up my pseudo selector.
Put margin-right: -30px; on .enterieInfo.
Beat by Christopher Marshall. Either or should work.