CSS: position texture at bottom of DIV
-1
Need the blue and yellow boxes to sit on the bottom within the yellow. In other words shift them down. been fighting this for hours.
#customer { overflow: hidden; background: yellow;}
#address-title { width: 450px; height: 20px; font-size: 20px; font-weight: bold; float: left; background: blue;}
#address-one { width: 450px; height: 80px; font-size: 20px; font-weight: bold; float: left; background: red;}
HTML:
<div id="customer">
<textarea name="address" id="address-title">Customer Invoices</textarea>
<textarea name="address1" id="address-one"></textarea>
<img src="images/green-plus.png" class="lookup-cust-plus" id="look"/>
<table id="meta">
<tr>
<td class="meta-head">Invoice #</td>
<td><textarea form ="testinsert" id="invoice_num" name="invoice">20170212</textarea></td>
</tr>
<tr>
<td form ="testinsert" name="date" class="meta-head">Date</td>
<td><textarea id="date">February 12, 1965</textarea></td>
</tr>
<tr>
<td class="meta-head">Amount Due</td>
<td><div class="due">$0.00</div></td>
</tr>
</table>
</div>
results of recommendation:
css
asked Nov 19 at 22:02
BarclayVision
4621627
add a comment |
-1
Need the blue and yellow boxes to sit on the bottom within the yellow. In other words shift them down. been fighting this for hours.
#customer { overflow: hidden; background: yellow;}
#address-title { width: 450px; height: 20px; font-size: 20px; font-weight: bold; float: left; background: blue;}
#address-one { width: 450px; height: 80px; font-size: 20px; font-weight: bold; float: left; background: red;}
HTML:
<div id="customer">
<textarea name="address" id="address-title">Customer Invoices</textarea>
<textarea name="address1" id="address-one"></textarea>
<img src="images/green-plus.png" class="lookup-cust-plus" id="look"/>
<table id="meta">
<tr>
<td class="meta-head">Invoice #</td>
<td><textarea form ="testinsert" id="invoice_num" name="invoice">20170212</textarea></td>
</tr>
<tr>
<td form ="testinsert" name="date" class="meta-head">Date</td>
<td><textarea id="date">February 12, 1965</textarea></td>
</tr>
<tr>
<td class="meta-head">Amount Due</td>
<td><div class="due">$0.00</div></td>
</tr>
</table>
</div>
results of recommendation:
css
asked Nov 19 at 22:02
BarclayVision
4621627
3
share your html code too so we can see what is best option
– Manjunath
Nov 19 at 22:05
Use Inspect element and see does these divs have margins. Usemargin-toponaddress-titleto bring it down.
– SilvioCro
Nov 19 at 22:13
ok, addingmargin-top: 25px;makes the container taller?
– BarclayVision
Nov 19 at 22:18
You've got a couple issues. Yourimgelement breaks your table convention since it's not in a cell, that will cause you issues especially cross-browser. Second, you'll need to clear your floats...but really if you're looking for responsiveness there's better ways.
– Chris W.
Nov 19 at 22:19
There are also some issues with your HTML.formis not an attribute but a tag in it's own right.imgis not a vaild child oftrit should be outside the table or in atd.
– Jon P
Nov 19 at 22:22
add a comment |
-1
-1
-1
1
Need the blue and yellow boxes to sit on the bottom within the yellow. In other words shift them down. been fighting this for hours.
#customer { overflow: hidden; background: yellow;}
#address-title { width: 450px; height: 20px; font-size: 20px; font-weight: bold; float: left; background: blue;}
#address-one { width: 450px; height: 80px; font-size: 20px; font-weight: bold; float: left; background: red;}
HTML:
<div id="customer">
<textarea name="address" id="address-title">Customer Invoices</textarea>
<textarea name="address1" id="address-one"></textarea>
<img src="images/green-plus.png" class="lookup-cust-plus" id="look"/>
<table id="meta">
<tr>
<td class="meta-head">Invoice #</td>
<td><textarea form ="testinsert" id="invoice_num" name="invoice">20170212</textarea></td>
</tr>
<tr>
<td form ="testinsert" name="date" class="meta-head">Date</td>
<td><textarea id="date">February 12, 1965</textarea></td>
</tr>
<tr>
<td class="meta-head">Amount Due</td>
<td><div class="due">$0.00</div></td>
</tr>
</table>
</div>
results of recommendation:
css
asked Nov 19 at 22:02
BarclayVision
4621627
Need the blue and yellow boxes to sit on the bottom within the yellow. In other words shift them down. been fighting this for hours.
#customer { overflow: hidden; background: yellow;}
#address-title { width: 450px; height: 20px; font-size: 20px; font-weight: bold; float: left; background: blue;}
#address-one { width: 450px; height: 80px; font-size: 20px; font-weight: bold; float: left; background: red;}
HTML:
<div id="customer">
<textarea name="address" id="address-title">Customer Invoices</textarea>
<textarea name="address1" id="address-one"></textarea>
<img src="images/green-plus.png" class="lookup-cust-plus" id="look"/>
<table id="meta">
<tr>
<td class="meta-head">Invoice #</td>
<td><textarea form ="testinsert" id="invoice_num" name="invoice">20170212</textarea></td>
</tr>
<tr>
<td form ="testinsert" name="date" class="meta-head">Date</td>
<td><textarea id="date">February 12, 1965</textarea></td>
</tr>
<tr>
<td class="meta-head">Amount Due</td>
<td><div class="due">$0.00</div></td>
</tr>
</table>
</div>
results of recommendation:
css
css
asked Nov 19 at 22:02
BarclayVision
4621627
asked Nov 19 at 22:02
BarclayVision
4621627
edited Nov 29 at 20:29
asked Nov 19 at 22:02
BarclayVision
4621627
asked Nov 19 at 22:02
BarclayVision
4621627
asked Nov 19 at 22:02
BarclayVision
4621627
4621627
3
share your html code too so we can see what is best option
– Manjunath
Nov 19 at 22:05
Use Inspect element and see does these divs have margins. Usemargin-toponaddress-titleto bring it down.
– SilvioCro
Nov 19 at 22:13
ok, addingmargin-top: 25px;makes the container taller?
– BarclayVision
Nov 19 at 22:18
You've got a couple issues. Yourimgelement breaks your table convention since it's not in a cell, that will cause you issues especially cross-browser. Second, you'll need to clear your floats...but really if you're looking for responsiveness there's better ways.
– Chris W.
Nov 19 at 22:19
There are also some issues with your HTML.formis not an attribute but a tag in it's own right.imgis not a vaild child oftrit should be outside the table or in atd.
– Jon P
Nov 19 at 22:22
add a comment |
3
share your html code too so we can see what is best option
– Manjunath
Nov 19 at 22:05
Use Inspect element and see does these divs have margins. Usemargin-toponaddress-titleto bring it down.
– SilvioCro
Nov 19 at 22:13
ok, addingmargin-top: 25px;makes the container taller?
– BarclayVision
Nov 19 at 22:18
You've got a couple issues. Yourimgelement breaks your table convention since it's not in a cell, that will cause you issues especially cross-browser. Second, you'll need to clear your floats...but really if you're looking for responsiveness there's better ways.
– Chris W.
Nov 19 at 22:19
There are also some issues with your HTML.formis not an attribute but a tag in it's own right.imgis not a vaild child oftrit should be outside the table or in atd.
– Jon P
Nov 19 at 22:22
3
3
share your html code too so we can see what is best option
– Manjunath
Nov 19 at 22:05
share your html code too so we can see what is best option
– Manjunath
Nov 19 at 22:05
Use Inspect element and see does these divs have margins. Use
margin-top on address-title to bring it down.– SilvioCro
Nov 19 at 22:13
Use Inspect element and see does these divs have margins. Use
margin-top on address-title to bring it down.– SilvioCro
Nov 19 at 22:13
ok, adding
margin-top: 25px; makes the container taller?– BarclayVision
Nov 19 at 22:18
ok, adding
margin-top: 25px; makes the container taller?– BarclayVision
Nov 19 at 22:18
You've got a couple issues. Your
img element breaks your table convention since it's not in a cell, that will cause you issues especially cross-browser. Second, you'll need to clear your floats...but really if you're looking for responsiveness there's better ways.– Chris W.
Nov 19 at 22:19
You've got a couple issues. Your
img element breaks your table convention since it's not in a cell, that will cause you issues especially cross-browser. Second, you'll need to clear your floats...but really if you're looking for responsiveness there's better ways.– Chris W.
Nov 19 at 22:19
There are also some issues with your HTML.
form is not an attribute but a tag in it's own right. img is not a vaild child of tr it should be outside the table or in a td.– Jon P
Nov 19 at 22:22
There are also some issues with your HTML.
form is not an attribute but a tag in it's own right. img is not a vaild child of tr it should be outside the table or in a td.– Jon P
Nov 19 at 22:22
add a comment |
1 Answer
1
active
oldest
votes
0
It's best to make some changes in the HTML and use flex to style the layout.
In my solution, I divided your layout into 3 elements under the customer element. Set the customer to display:flex so it will be easy to order the 3 major section in a row. Each major will place itself according to align-self property. flex-end will place the elements at the bottom of the container.
body,
html {
height: 100%;
}
.container {
display: flex;
height: 100%;
flex-direction: column;
align-items: flex-end;
flex-grow: 4;
}
#look {
margin: 0px 10px 0px 10px;
align-self: center;
}
.space {
flex-grow: 1;
}
#customer {
overflow: hidden;
background: yellow;
display: flex;
height: 140px;
}
#address-title {
width: 450px;
height: 20px;
min-height: 20px;
font-size: 20px;
font-weight: bold;
float: left;
background: blue;
align-self: flex-end;
}
#address-one {
width: 450px;
height: 80px;
min-height: 80px;
font-size: 20px;
font-weight: bold;
float: left;
background: red;
align-self: flex-end;
}
#meta {
align-self: flex-end;
flex-grow: 3;
}
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
td:first-child {
background-color: #e1e1e1;
}<div id="customer">
<div class="container">
<div class="space"></div>
<textarea form="testinsert" name="address" id="address-title">Customer Invoices</textarea>
<textarea form="testinsert" name="address1" id="address-one"></textarea>
</div>
<img src="images/green-plus.png" class="lookup-cust-plus" id="look" />
<table id="meta">
<tr>
<td class="meta-head">Invoice #</td>
<td><textarea form="testinsert" id="invoice_num" name="invoice">20170212</textarea></td>
</tr>
<tr>
<td form="testinsert" name="date" class="meta-head">Date</td>
<td><textarea id="date">February 12, 1965</textarea></td>
</tr>
<tr>
<td class="meta-head">Amount Due</td>
<td>
<div class="due">$0.00</div>
</td>
</tr>
</table>
</div>answered Nov 19 at 22:32
Itay Gal
7,20852559
What does that do? How does it answer the question? Don't just blurt out code. Explain yourself! stackoverflow.com/help/how-to-answer
– Rob
Nov 19 at 22:39
that's going to alter too many factors in my code and don't want to throw flex into the mix at this point. I have moved the img outside the table - really looking to just float to the bottom. margin-top works a little, what about locking the container to fixed height?
– BarclayVision
Nov 19 at 22:44
In my opinion it's better to use a more robust solution rather than looking for the short and ugly solution. Your case is simple and you should use a good layout in order to make your life easier once you'll want to maintain the code
– Itay Gal
Nov 19 at 22:49
Thanks @Itay jsfiddle.net/jeffbarclay/xt10nr7e/7
– BarclayVision
Nov 20 at 13:40
alignment of recommended flex produced the changes above? (see edit today)
– BarclayVision
Nov 29 at 20:30
|
show 1 more comment
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53383278%2fcss-position-texture-at-bottom-of-div%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
It's best to make some changes in the HTML and use flex to style the layout.
In my solution, I divided your layout into 3 elements under the customer element. Set the customer to display:flex so it will be easy to order the 3 major section in a row. Each major will place itself according to align-self property. flex-end will place the elements at the bottom of the container.
body,
html {
height: 100%;
}
.container {
display: flex;
height: 100%;
flex-direction: column;
align-items: flex-end;
flex-grow: 4;
}
#look {
margin: 0px 10px 0px 10px;
align-self: center;
}
.space {
flex-grow: 1;
}
#customer {
overflow: hidden;
background: yellow;
display: flex;
height: 140px;
}
#address-title {
width: 450px;
height: 20px;
min-height: 20px;
font-size: 20px;
font-weight: bold;
float: left;
background: blue;
align-self: flex-end;
}
#address-one {
width: 450px;
height: 80px;
min-height: 80px;
font-size: 20px;
font-weight: bold;
float: left;
background: red;
align-self: flex-end;
}
#meta {
align-self: flex-end;
flex-grow: 3;
}
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
td:first-child {
background-color: #e1e1e1;
}<div id="customer">
<div class="container">
<div class="space"></div>
<textarea form="testinsert" name="address" id="address-title">Customer Invoices</textarea>
<textarea form="testinsert" name="address1" id="address-one"></textarea>
</div>
<img src="images/green-plus.png" class="lookup-cust-plus" id="look" />
<table id="meta">
<tr>
<td class="meta-head">Invoice #</td>
<td><textarea form="testinsert" id="invoice_num" name="invoice">20170212</textarea></td>
</tr>
<tr>
<td form="testinsert" name="date" class="meta-head">Date</td>
<td><textarea id="date">February 12, 1965</textarea></td>
</tr>
<tr>
<td class="meta-head">Amount Due</td>
<td>
<div class="due">$0.00</div>
</td>
</tr>
</table>
</div>answered Nov 19 at 22:32
Itay Gal
7,20852559
What does that do? How does it answer the question? Don't just blurt out code. Explain yourself! stackoverflow.com/help/how-to-answer
– Rob
Nov 19 at 22:39
that's going to alter too many factors in my code and don't want to throw flex into the mix at this point. I have moved the img outside the table - really looking to just float to the bottom. margin-top works a little, what about locking the container to fixed height?
– BarclayVision
Nov 19 at 22:44
In my opinion it's better to use a more robust solution rather than looking for the short and ugly solution. Your case is simple and you should use a good layout in order to make your life easier once you'll want to maintain the code
– Itay Gal
Nov 19 at 22:49
Thanks @Itay jsfiddle.net/jeffbarclay/xt10nr7e/7
– BarclayVision
Nov 20 at 13:40
alignment of recommended flex produced the changes above? (see edit today)
– BarclayVision
Nov 29 at 20:30
|
show 1 more comment
0
It's best to make some changes in the HTML and use flex to style the layout.
In my solution, I divided your layout into 3 elements under the customer element. Set the customer to display:flex so it will be easy to order the 3 major section in a row. Each major will place itself according to align-self property. flex-end will place the elements at the bottom of the container.
body,
html {
height: 100%;
}
.container {
display: flex;
height: 100%;
flex-direction: column;
align-items: flex-end;
flex-grow: 4;
}
#look {
margin: 0px 10px 0px 10px;
align-self: center;
}
.space {
flex-grow: 1;
}
#customer {
overflow: hidden;
background: yellow;
display: flex;
height: 140px;
}
#address-title {
width: 450px;
height: 20px;
min-height: 20px;
font-size: 20px;
font-weight: bold;
float: left;
background: blue;
align-self: flex-end;
}
#address-one {
width: 450px;
height: 80px;
min-height: 80px;
font-size: 20px;
font-weight: bold;
float: left;
background: red;
align-self: flex-end;
}
#meta {
align-self: flex-end;
flex-grow: 3;
}
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
td:first-child {
background-color: #e1e1e1;
}<div id="customer">
<div class="container">
<div class="space"></div>
<textarea form="testinsert" name="address" id="address-title">Customer Invoices</textarea>
<textarea form="testinsert" name="address1" id="address-one"></textarea>
</div>
<img src="images/green-plus.png" class="lookup-cust-plus" id="look" />
<table id="meta">
<tr>
<td class="meta-head">Invoice #</td>
<td><textarea form="testinsert" id="invoice_num" name="invoice">20170212</textarea></td>
</tr>
<tr>
<td form="testinsert" name="date" class="meta-head">Date</td>
<td><textarea id="date">February 12, 1965</textarea></td>
</tr>
<tr>
<td class="meta-head">Amount Due</td>
<td>
<div class="due">$0.00</div>
</td>
</tr>
</table>
</div>answered Nov 19 at 22:32
Itay Gal
7,20852559
What does that do? How does it answer the question? Don't just blurt out code. Explain yourself! stackoverflow.com/help/how-to-answer
– Rob
Nov 19 at 22:39
that's going to alter too many factors in my code and don't want to throw flex into the mix at this point. I have moved the img outside the table - really looking to just float to the bottom. margin-top works a little, what about locking the container to fixed height?
– BarclayVision
Nov 19 at 22:44
In my opinion it's better to use a more robust solution rather than looking for the short and ugly solution. Your case is simple and you should use a good layout in order to make your life easier once you'll want to maintain the code
– Itay Gal
Nov 19 at 22:49
Thanks @Itay jsfiddle.net/jeffbarclay/xt10nr7e/7
– BarclayVision
Nov 20 at 13:40
alignment of recommended flex produced the changes above? (see edit today)
– BarclayVision
Nov 29 at 20:30
|
show 1 more comment
0
0
0
It's best to make some changes in the HTML and use flex to style the layout.
In my solution, I divided your layout into 3 elements under the customer element. Set the customer to display:flex so it will be easy to order the 3 major section in a row. Each major will place itself according to align-self property. flex-end will place the elements at the bottom of the container.
body,
html {
height: 100%;
}
.container {
display: flex;
height: 100%;
flex-direction: column;
align-items: flex-end;
flex-grow: 4;
}
#look {
margin: 0px 10px 0px 10px;
align-self: center;
}
.space {
flex-grow: 1;
}
#customer {
overflow: hidden;
background: yellow;
display: flex;
height: 140px;
}
#address-title {
width: 450px;
height: 20px;
min-height: 20px;
font-size: 20px;
font-weight: bold;
float: left;
background: blue;
align-self: flex-end;
}
#address-one {
width: 450px;
height: 80px;
min-height: 80px;
font-size: 20px;
font-weight: bold;
float: left;
background: red;
align-self: flex-end;
}
#meta {
align-self: flex-end;
flex-grow: 3;
}
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
td:first-child {
background-color: #e1e1e1;
}<div id="customer">
<div class="container">
<div class="space"></div>
<textarea form="testinsert" name="address" id="address-title">Customer Invoices</textarea>
<textarea form="testinsert" name="address1" id="address-one"></textarea>
</div>
<img src="images/green-plus.png" class="lookup-cust-plus" id="look" />
<table id="meta">
<tr>
<td class="meta-head">Invoice #</td>
<td><textarea form="testinsert" id="invoice_num" name="invoice">20170212</textarea></td>
</tr>
<tr>
<td form="testinsert" name="date" class="meta-head">Date</td>
<td><textarea id="date">February 12, 1965</textarea></td>
</tr>
<tr>
<td class="meta-head">Amount Due</td>
<td>
<div class="due">$0.00</div>
</td>
</tr>
</table>
</div>answered Nov 19 at 22:32
Itay Gal
7,20852559
It's best to make some changes in the HTML and use flex to style the layout.
In my solution, I divided your layout into 3 elements under the customer element. Set the customer to display:flex so it will be easy to order the 3 major section in a row. Each major will place itself according to align-self property. flex-end will place the elements at the bottom of the container.
body,
html {
height: 100%;
}
.container {
display: flex;
height: 100%;
flex-direction: column;
align-items: flex-end;
flex-grow: 4;
}
#look {
margin: 0px 10px 0px 10px;
align-self: center;
}
.space {
flex-grow: 1;
}
#customer {
overflow: hidden;
background: yellow;
display: flex;
height: 140px;
}
#address-title {
width: 450px;
height: 20px;
min-height: 20px;
font-size: 20px;
font-weight: bold;
float: left;
background: blue;
align-self: flex-end;
}
#address-one {
width: 450px;
height: 80px;
min-height: 80px;
font-size: 20px;
font-weight: bold;
float: left;
background: red;
align-self: flex-end;
}
#meta {
align-self: flex-end;
flex-grow: 3;
}
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
td:first-child {
background-color: #e1e1e1;
}<div id="customer">
<div class="container">
<div class="space"></div>
<textarea form="testinsert" name="address" id="address-title">Customer Invoices</textarea>
<textarea form="testinsert" name="address1" id="address-one"></textarea>
</div>
<img src="images/green-plus.png" class="lookup-cust-plus" id="look" />
<table id="meta">
<tr>
<td class="meta-head">Invoice #</td>
<td><textarea form="testinsert" id="invoice_num" name="invoice">20170212</textarea></td>
</tr>
<tr>
<td form="testinsert" name="date" class="meta-head">Date</td>
<td><textarea id="date">February 12, 1965</textarea></td>
</tr>
<tr>
<td class="meta-head">Amount Due</td>
<td>
<div class="due">$0.00</div>
</td>
</tr>
</table>
</div>body,
html {
height: 100%;
}
.container {
display: flex;
height: 100%;
flex-direction: column;
align-items: flex-end;
flex-grow: 4;
}
#look {
margin: 0px 10px 0px 10px;
align-self: center;
}
.space {
flex-grow: 1;
}
#customer {
overflow: hidden;
background: yellow;
display: flex;
height: 140px;
}
#address-title {
width: 450px;
height: 20px;
min-height: 20px;
font-size: 20px;
font-weight: bold;
float: left;
background: blue;
align-self: flex-end;
}
#address-one {
width: 450px;
height: 80px;
min-height: 80px;
font-size: 20px;
font-weight: bold;
float: left;
background: red;
align-self: flex-end;
}
#meta {
align-self: flex-end;
flex-grow: 3;
}
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
td:first-child {
background-color: #e1e1e1;
}<div id="customer">
<div class="container">
<div class="space"></div>
<textarea form="testinsert" name="address" id="address-title">Customer Invoices</textarea>
<textarea form="testinsert" name="address1" id="address-one"></textarea>
</div>
<img src="images/green-plus.png" class="lookup-cust-plus" id="look" />
<table id="meta">
<tr>
<td class="meta-head">Invoice #</td>
<td><textarea form="testinsert" id="invoice_num" name="invoice">20170212</textarea></td>
</tr>
<tr>
<td form="testinsert" name="date" class="meta-head">Date</td>
<td><textarea id="date">February 12, 1965</textarea></td>
</tr>
<tr>
<td class="meta-head">Amount Due</td>
<td>
<div class="due">$0.00</div>
</td>
</tr>
</table>
</div>body,
html {
height: 100%;
}
.container {
display: flex;
height: 100%;
flex-direction: column;
align-items: flex-end;
flex-grow: 4;
}
#look {
margin: 0px 10px 0px 10px;
align-self: center;
}
.space {
flex-grow: 1;
}
#customer {
overflow: hidden;
background: yellow;
display: flex;
height: 140px;
}
#address-title {
width: 450px;
height: 20px;
min-height: 20px;
font-size: 20px;
font-weight: bold;
float: left;
background: blue;
align-self: flex-end;
}
#address-one {
width: 450px;
height: 80px;
min-height: 80px;
font-size: 20px;
font-weight: bold;
float: left;
background: red;
align-self: flex-end;
}
#meta {
align-self: flex-end;
flex-grow: 3;
}
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
td:first-child {
background-color: #e1e1e1;
}<div id="customer">
<div class="container">
<div class="space"></div>
<textarea form="testinsert" name="address" id="address-title">Customer Invoices</textarea>
<textarea form="testinsert" name="address1" id="address-one"></textarea>
</div>
<img src="images/green-plus.png" class="lookup-cust-plus" id="look" />
<table id="meta">
<tr>
<td class="meta-head">Invoice #</td>
<td><textarea form="testinsert" id="invoice_num" name="invoice">20170212</textarea></td>
</tr>
<tr>
<td form="testinsert" name="date" class="meta-head">Date</td>
<td><textarea id="date">February 12, 1965</textarea></td>
</tr>
<tr>
<td class="meta-head">Amount Due</td>
<td>
<div class="due">$0.00</div>
</td>
</tr>
</table>
</div>answered Nov 19 at 22:32
Itay Gal
7,20852559
edited Nov 19 at 22:41
answered Nov 19 at 22:32
Itay Gal
7,20852559
answered Nov 19 at 22:32
Itay Gal
7,20852559
answered Nov 19 at 22:32
Itay Gal
7,20852559
7,20852559
What does that do? How does it answer the question? Don't just blurt out code. Explain yourself! stackoverflow.com/help/how-to-answer
– Rob
Nov 19 at 22:39
that's going to alter too many factors in my code and don't want to throw flex into the mix at this point. I have moved the img outside the table - really looking to just float to the bottom. margin-top works a little, what about locking the container to fixed height?
– BarclayVision
Nov 19 at 22:44
In my opinion it's better to use a more robust solution rather than looking for the short and ugly solution. Your case is simple and you should use a good layout in order to make your life easier once you'll want to maintain the code
– Itay Gal
Nov 19 at 22:49
Thanks @Itay jsfiddle.net/jeffbarclay/xt10nr7e/7
– BarclayVision
Nov 20 at 13:40
alignment of recommended flex produced the changes above? (see edit today)
– BarclayVision
Nov 29 at 20:30
|
show 1 more comment
What does that do? How does it answer the question? Don't just blurt out code. Explain yourself! stackoverflow.com/help/how-to-answer
– Rob
Nov 19 at 22:39
that's going to alter too many factors in my code and don't want to throw flex into the mix at this point. I have moved the img outside the table - really looking to just float to the bottom. margin-top works a little, what about locking the container to fixed height?
– BarclayVision
Nov 19 at 22:44
In my opinion it's better to use a more robust solution rather than looking for the short and ugly solution. Your case is simple and you should use a good layout in order to make your life easier once you'll want to maintain the code
– Itay Gal
Nov 19 at 22:49
Thanks @Itay jsfiddle.net/jeffbarclay/xt10nr7e/7
– BarclayVision
Nov 20 at 13:40
alignment of recommended flex produced the changes above? (see edit today)
– BarclayVision
Nov 29 at 20:30
What does that do? How does it answer the question? Don't just blurt out code. Explain yourself! stackoverflow.com/help/how-to-answer
– Rob
Nov 19 at 22:39
What does that do? How does it answer the question? Don't just blurt out code. Explain yourself! stackoverflow.com/help/how-to-answer
– Rob
Nov 19 at 22:39
that's going to alter too many factors in my code and don't want to throw flex into the mix at this point. I have moved the img outside the table - really looking to just float to the bottom. margin-top works a little, what about locking the container to fixed height?
– BarclayVision
Nov 19 at 22:44
that's going to alter too many factors in my code and don't want to throw flex into the mix at this point. I have moved the img outside the table - really looking to just float to the bottom. margin-top works a little, what about locking the container to fixed height?
– BarclayVision
Nov 19 at 22:44
In my opinion it's better to use a more robust solution rather than looking for the short and ugly solution. Your case is simple and you should use a good layout in order to make your life easier once you'll want to maintain the code
– Itay Gal
Nov 19 at 22:49
In my opinion it's better to use a more robust solution rather than looking for the short and ugly solution. Your case is simple and you should use a good layout in order to make your life easier once you'll want to maintain the code
– Itay Gal
Nov 19 at 22:49
Thanks @Itay jsfiddle.net/jeffbarclay/xt10nr7e/7
– BarclayVision
Nov 20 at 13:40
Thanks @Itay jsfiddle.net/jeffbarclay/xt10nr7e/7
– BarclayVision
Nov 20 at 13:40
alignment of recommended flex produced the changes above? (see edit today)
– BarclayVision
Nov 29 at 20:30
alignment of recommended flex produced the changes above? (see edit today)
– BarclayVision
Nov 29 at 20:30
|
show 1 more comment
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53383278%2fcss-position-texture-at-bottom-of-div%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
3
share your html code too so we can see what is best option
– Manjunath
Nov 19 at 22:05
Use Inspect element and see does these divs have margins. Use
margin-toponaddress-titleto bring it down.– SilvioCro
Nov 19 at 22:13
ok, adding
margin-top: 25px;makes the container taller?– BarclayVision
Nov 19 at 22:18
You've got a couple issues. Your
imgelement breaks your table convention since it's not in a cell, that will cause you issues especially cross-browser. Second, you'll need to clear your floats...but really if you're looking for responsiveness there's better ways.– Chris W.
Nov 19 at 22:19
There are also some issues with your HTML.
formis not an attribute but a tag in it's own right.imgis not a vaild child oftrit should be outside the table or in atd.– Jon P
Nov 19 at 22:22