I'm trying to align an input text and all the buttons you see in the following image to the bottom of "My text".
The bottom should be the bottom of the M not the bottom of the y.
Edit: as a second choice, all the elements can be aligned to the vertical center of `my text'.
Buttons 3 and 4 have to be aligned to the right.
If there isn't enough space, My text should remain on the first line, and the rest should go into a new line.
I tried using float: right with no luck, because button 3 and 4 go to the right upper edge. I tried displaying them inline, but that way they are not aligned on the right. I don't know what else to try.
My current code is the following, which gives me bottom alignment with Firefox but not with Chrome (as you can see, buttons 3 and 4 are not aligned with buttons 1 and 2)
I hope someone can help me.
div.inline {
display: inline-block;
}
<div id="titleBar">
<div class="inline" style="position: relative; width: 100%;">
<div class="inline" style="font-weight: bold; font-size: 2em; color: #D00000;">My text</div>
<div class="inline">
<form>
<div class="inline">
<input type="text" style="width: 16em" value="input text">
</div>
<div class="inline">
<input type="submit" value="button 1"></input>
<button>button 2</button>
</div>
</form>
</div>
<div style="position: absolute; bottom: 0px; right: 0px;">
<button >button 3</button>
<button >button 4</button>
</div>
</div>
</div>
Related
I am trying to make my two buttons appear on the far right of a piece of text. I want the text and two buttons to all be inline with each other but the text is on the left and the two buttons are on the right. I have seen multiple solutions and I could get it to work with only 1 button but when I have two buttons it does not work.
I run a for loop over 'weaknesses' and print out each weakness. Each weakness will have an update and delete action.
I tried to do margin-left but each weakness is a different length so my buttons would not line up
I also tried using some solutions from this post but could not seem to get the expected outcome: Place a button right aligned
Any help would be appreciated
HTML
<div *ngFor="let weakness of weaknesses | async">
<div class="flex-box">
<p>{{ weakness }}</p>
<a class="btn btn-light btn-sm pull-right" href="#">Update</a>
<button type="button" class="btn btn-danger btn-sm">Delete</button>
</div>
</div>
Try this:
#btnHolder {
position:fixed;
top:10px;
right:10px;
}
<p>Text is here</p>
<div id="btnHolder">
<button>Update</button>
<button>Delete</button>
</div>
I dont know why it was so hard. It should have been easier to fix this problem.
One solution is auto margin with flex
nav {
display: flex;
align-items: center;
}
nav button:first-of-type {
/* Key here is margin-left needs to be auto */
margin: 0 10px 0 auto
}
<nav>
<span>Text</span>
<button>Button 1</button>
<button>Button 2</button>
</nav>
You should do it like this:
.flex-box {
display: flex;
align-items: center;
justify-content: start;
}
#buttons{
margin-left: 10px;
}
<div class="flex-box">
<p>Text is here</p>
<div id="buttons">
<a>Update</a>
<button>Delete</button>
</div>
</div>
Currently the button is always below the last element that exists in the view.
Then I add bottom: 2px and position: absolute to the button and it goes to the bottom, but when I open the drop-down the screen is enlarged and the button is not at the bottom.
It currently works like this. I want it to continue working like this, but with the button at the bottom
Placing bottom: 2px and position: absolute the button goes to the bottom but when the drop-down is opened it overlaps.
<style>
.card-one{display:flex;}
.card-section{display:flex;margin:5px;text-align:center; min-height:300px;background:#000; flex-direction: column; width:33%;color:#fff;}
.card-section h2{color:#fff;}
.card-section .book-btn{margin-top:auto;}
</style>
<div class="card-one">
<div class="card-section">
<h2>Hello One</h2>
<button class="btn book-btn">Book Now</button>
</div>
<div class="card-section">
<h2>Hello One</h2>
<button class="btn book-btn">Book Now</button>
</div>
</div>
Here is my code.I have minimized it as short as I can. In that text-align:right; is not working
.forgot {
color: red;
text-align: right;
}
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
Forgot details?
</div>
As #TreyBake pointed out, center and u are not supposed to be used instead, you should use the text-align and em.
Also, here's the solution with setting right align to parent.
.forgot {
color: red;
}
.center-aligned{
text-align: center;
}
.right-aligned{
text-align: right;
}
<div class="content">
<div class="center-aligned">
<h3><em>LOREM IPSUM</em></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</div>
<br>
<div class="right-aligned">
Forgot details?
</div>
</div>
The align is set on the parent element. Not on the element itself.
.forgot {
color: red;
}
.content {
text-align: right;
}
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
Forgot details?
</div>
You can use text-align: right on a parent element. Create a div wrapping your link and give him the class. See example below:
html:
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
<div class="text-right">
Forgot details?
</div>
</div>
css:
.forgot {
color: red;
}
.text-right {
text-align: right;
}
If you have Bootstrap installed, you can do all of this without css. Your html would look like this:
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
<div class="text-right">
Forgot details?
</div>
</div>
Please note at time of writing, this is Bootstrap v4.2.1
Here's Why It's Not Aligning
You have your <a class="forgot"> element with the "Forgot Details" text inside of it. Since it's an <a> element, by default it will only stretch to be as wide as the text you place inside it. So as you can see in the screenshot below, your <a class="forgot"> element (highlit) is only as wide as the "Forgot Details" text. So your "text-align: right;" technically is aligning the text to the right, but since the parent container (the <a class="forgot"> element) is only as wide as the text, horizontally aligning it doesn't make a difference.
How To Fix It
Where an <a> element stretches only to fit its contents, a <div> element by default stretches horizontally to fill its parent container. So what you can do is enclose your <a class="forgot"> in a <div class="forgot-parent">, and then apply the "text-align: right" to the <div class="forgot-parent"> so that the <a class="forgot"> gets aligned to the right.
So the code will look like this:
.forgot {
color: red;
}
.forgot-parent {
text-align: right;
}
<div class="content">
<center>
<h3><u>LOREM IPSUM</u></h3><br>
<button class="btn btn-primary">Login as Guest</button>
</center>
<br>
<div class="forgot-parent">
Forgot details?
</div>
</div>
Note how I removed "text-align: right;" from '.forgot' and added it to '.forgot-parent'. The result is shown below. First, here is the parent <a class="forgot-parent"> div highlit.
Note how the <div class="forgot-parent"> has stretched to the full screen width. Next the <a class="forgot"> is highlit:
Note that the <a class="forgot"> is still only the width of its contents (the "Forgot Details" text), but it's now aligned to the right within its parent div.
What I need to do is a bit complicated to explain, but I'll do my best. I need to fit 3 different divs in one page, but my left div needs to have more space than the others, so aligning side by side is impractical, as is one on top of each other. I need one bigger div on the left, and the other two stacked on top of each other on the right. But I can't merge these two divs into one and float it. Because I need the top one to be vertically aligned on top of the left one, and the bottom one vertically aligned on bottom of the left one, while these 2 (top and bottom) need to be aligned on their right. Not sure if I was able to explain, so here is an image illustrating what I want to accomplish:
So, you see, left one taking most of the space, smaller ones aligned on top and bottom, while also aligned on their right side, and a blank space between then. Here's the code I already have:
<div style="display: inline-block;">
<h3>Left Div</h3>
<input type="text" name="name">
<input class="button" type="submit">
</div>
<div style="display: inline-block; vertical-align: top; width: auto; padding-left: 20px">
<h3>Top right div</h3>
<input type="text" name="name2">
</div>
<div style="display: inline-block; vertical-align: bottom; width: auto; padding-left: 20px;">
<h3>Bottom right div</h3>
<input type="text" name="name3">
<input class="button" type="button" onclick="window.location.replace('url')" value="Cancel">
</div>
I'd also like to say that in the middle of the way (when I only had 2 divs) it was working the way I wanted to, the problem arose when I added the third div, so I think that's where the problem is at. Please note that I'm new to html, I'm sorry if this is just a simple fix.
I think the key is the equal height part, which you can use CSS3 flexbox to solve it. For the right side top / bottom divs, you can wrap the two divs into another div. See the simple demo below.
jsFiddle
div {
border: 1px solid aqua;
}
.container {
display: flex;
}
.left, .right {
flex: 1;
}
.right {
display: flex;
flex-direction: column;
justify-content: space-between;
}
<div class="container">
<div class="left">
<h3>Left Div</h3>
<br><br><br><br><br><br><br><br><br><br>
</div>
<div class="right">
<div>
<h3>Top right div</h3>
</div>
<div>
<h3>Bottom right div</h3>
</div>
</div>
</div>
this is just the way you want it to be.... as the images..
<html>
<head>
<style>
#i{
background-color:"red";
width:700px;
height:600px;
float:left;
}
#a{
background-color:"black";
width:600px;
height:300px;
float:right;
position:relative;
display:inline;
}
#b{
background-color:"blue";
width:600px;
height:250px;
float:right;
margin-top:50px;
position:relative;
display:inline;
}
</style>
</head>
<body>
<div id = "i">
<p>hello</p>
</div>
<div id = "a">
<p>hello</p>
</div>
<div id = "b">
<p>hello</p>
</div>
</body>
</html>
One way is to use negative margin. The inline-block element is what's making it difficult to have multiple divs on the same vertical axis, because both are lining up with the larger div. This works for what you're asking:
<div id = "left" style="display: inline-block;">
<h3>Left Div</h3>
<input type="text" name="name">
<input class="button" type="submit">
</div>
<div id = "top-right" style="display: inline-block; vertical-align: top; width: auto; padding-left: 20px">
<h3>Top right div</h3>
<input type="text" name="name2">
</div>
<div id = "bottom-right" style="display: inline-block; vertical-align: bottom; margin-left: -182px">
<h3>Bottom right div</h3>
<input type="text" name="name3" >
<input class="button" type="button" onclick="window.location.replace('url')" value="Cancel">
</div>
fiddle: https://jsfiddle.net/an9ra3mb/2/
I am working on a photo gallery, each thumbnail is in its own DIV and floated to the left in a containing DIV. It has been displaying properly up until vertical thumbnails entered the equation. Now, when the next row should start, the first item of the following row is to the left of the last vertical DIV (thumbnail), rather than flush to the left of the containing DIV.
alt text http://tapp-essexvfd.org/images/capture1.jpg
Here is the CSS:
#galleryBox {
width: 650px;
background: #fff;
margin: auto;
padding: 10px;
text-align: center;
overflow: auto;
}
.item {
display: block;
margin: 10px;
padding: 20px 5px 5px 5px;
float: left;
background: url('/images/content_bottom.png') repeat-x scroll bottom #828282;
}
and the HTML:
<div id="galleryBox" class="ui-corner-all">
<div id="file" class="ui-corner-all">
<form name="uploadPhoto" id="uploadPhoto" method="post" action="" enctype="multipart/form-data">
<p><label for="photo">Photo:</label><input type="file" name="photo" id="photo"/></p>
<p><label for="caption">Caption: <small>Optional</small></label><input type="text" id="caption" name="caption"/></p>
<p align="center"><input type="submit" value="Upload" name="send" id="send" class="addButton ui-state-default ui-corner-all"/></p>
</form>
<a name="thumbs"></a>
</div>
<div class="item ui-corner-all">
<a href="http://tapp-essexvfd.org/gallery/photos/201004211802.jpg" class="lightbox" title="test1">
<img src="http://tapp-essexvfd.org/gallery/photos/thumbs/201004211802_thumb.jpg" alt="test1"/></a><br/>
<p><span class="label">test1</span></p>
</div>
<div class="item ui-corner-all">
<a href="http://tapp-essexvfd.org/gallery/photos/201004211803.jpg" class="lightbox" title="test3">
<img src="http://tapp-essexvfd.org/gallery/photos/thumbs/201004211803_thumb.jpg" alt="test3"/></a><br/>
<p><span class="label">test3</span></p>
</div>
</div>
You can use Inline-Blocks as described in this article:
The Inline-Block Thumbnail Gallery
The article solves the same exact problem you are having with thumbnails.
I also found this simple example using inline-block thumbnails. Note how the thumbnails wrap nicely and remain vertically aligned within their line.
UPDATE:
Here is another detailed article that tackles this problem with the inline-block:
Cross-Browser Inline-Block
As you can notice from these articles, it is a bit tricky to make it work cross-browser.
Two options:
Set a maximum height for the thumbnail DIVs, so that they layout correctly, regardless of whether they are horizontal or vertical.
Use "clear: left" to reset the float on the thumbnail DIV next to the vertical.
The default behavior appears correct, based on what happens when text flows around a floated DIV. Based on what you're trying to do, I would choose option #1.
you could try using css table displays for your divs...
ie.
#galleryBox {
display: table;
...
}
.item {
display: table-cell;
...
}
.row {
display: table-row;
}
so you'd have to add another div to wrap around the items in each row
<div id="galleryBox">
<div class="row">
<div class="item">image</div>
<div class="item">image</div>
<div class="item">image</div>
<div class="item">image</div>
</div>
<div class="row">
<div class="item">image</div>
<div class="item">image</div>
<div class="item">image</div>
<div class="item">image</div>
</div>
</div>