I created a table to display a shopping cart. My first two rows line up perfectly, but the last row doesn't. I tried recreating it and still can't figure out what I'm doing wrong. Any ideas?
To make it more readable, I took out the first two rows and just left the last row that is causing the problems.:
CSS
.gallery-list
{
}
.gallery-list .container
{
clear:both;
width:100%;
padding-top:10px;
padding-bottom:10px;
}
.gallery-list .container .imgContainer
{
width:25%;
float:left;
padding-top:5px;
}
.gallery-list .container .imgContainer img
{
width:98%;
}
.gallery-list .container .descContainer
{
width:74%;
float:left;
padding-left:5px;
}
.gallery-grid
{
}
.gallery-grid .container
{
width:33%;
padding-top:10px;
padding-bottom:10px;
float:left;
}
.gallery-grid .container .imgContainer
{
}
.gallery-grid .container .imgContainer img
{
width:98%;
}
.gallery-grid .container .descContainer
{
display: none;
}
ul.pager
{
list-style-type: none;
margin:0px;
padding:0px;
}
.pager li {display: inline; }
.pager li a {padding:5px; border:solid 1px #ccc;margin:2px;}
.current
{
color:black;
}
.current:hover
{
text-decoration:none;
}
#pager
{
clear:both;
}
html
<tr>
<td>
<div class="gallery-list">
<div class="container">
<div class="imgContainer">
<img src=""/>
</div>
<div class="descContainer">
<div class="name">
<h2 style="color:#000;text-transform:uppercase;margin:0;">Friday Night and Saturday Activities (Single)</h2>
</div>
<div class="desc">
</div>
<div class="shortcode">
<object class="simpleecommcartAddToCartButton">
<form id='cartButtonForm_1' class="SimpleEcommCartCartButton" method="post" action="http://beauwaldrop.com/ahs83/store/cart/" >
<input type='hidden' name='task' id="task_1" value='addToCart' />
<input type='hidden' name='simpleecommcartItemId' value='1' />
<input type='hidden' name='hascartwidget' class="hascartwidget" value='no' />
<span style="color:#666;font-size:1.1em;"><em></em></span>
<span style="font-weight:bold;font-size:1.01em;">Price: $89.00</span>
<input type="hidden" name="item_quantity" class="SimpleEcommCartItemQuantityInput" value="1">
<br><input type='submit' value='Add To Cart' name='addToCart_1' id='addToCart_1' />
<input type="hidden" name="action" value="check_inventory_on_add_to_cart" />
<div id="stock_message_box_1" class="SimpleEcommCartUnavailable" style="display: none;">
<h2>We're Sorry</h2>
<p id="stock_message_1"></p>
<input type="button" name="close" value="Ok" id="close" class="modalClose" />
</div>
</form>
</object>
</div>
</div>
</div>
</td>
<td>
<div class="container">
<div class="imgContainer">
<img src=""/>
</div>
<div class="descContainer">
<div class="name">
<h2 style="color:#000;text-transform:uppercase;margin:0;">Friday Night and Saturday Activities (Couple)</h2>
</div>
<div class="desc">
</div>
<div class="shortcode">
<object class="simpleecommcartAddToCartButton">
<form id='cartButtonForm_2' class="SimpleEcommCartCartButton" method="post" action="http://beauwaldrop.com/ahs83/store/cart/" >
<input type='hidden' name='task' id="task_2" value='addToCart' />
<input type='hidden' name='simpleecommcartItemId' value='2' />
<input type='hidden' name='hascartwidget' class="hascartwidget" value='no' />
<span style="color:#666;font-size:1.1em;"><em></em></span>
<span style="font-weight:bold;font-size:1.01em;">Price: $129.00</span>
<input type="hidden" name="item_quantity" class="SimpleEcommCartItemQuantityInput" value="1">
<br><input type='submit' value='Add To Cart' name='addToCart_2' id='addToCart_2' />
<input type="hidden" name="action" value="check_inventory_on_add_to_cart" />
<div id="stock_message_box_2" class="SimpleEcommCartUnavailable" style="display: none;">
<h2>We're Sorry</h2>
<p id="stock_message_2"></p>
<input type="button" name="close" value="Ok" id="close" class="modalClose" />
</div>
</form>
</object>
</div>
</div>
</div>
</td>
</tr>
</table>
If you inspect the source of the page, you have closed and reopened the tr before your last column which is causing the last two columns to be split like that
Having looked at the posted code there is nothing wrong and it works perfectly:
http://jsfiddle.net/9pPXq/
Related
I seem to have an issue with displaying a .table and .table-cell display in IE browsers (works fine on Chrome).
This is how it looks on Chrome (how it should look):
Here is how it looks on IE browsers (9 and above).
The cells are not positioned next to each other, they are positioned below each other:
Here is the HTML:
<div class="Tab">
<div class="row">
<input type="button" runat="server" class="Tabbutton iconInterview TabbuttonActive" />
<input type="button" runat="server" class="Tabbutton iconScore " />
<input type="button" runat="server" class="Tabbutton iconInfo" />
<input type="button" runat="server" class="Tabbutton iconActions" />
</div>
</div>
Here are the CSS elements:
.Tab
{
width:100%;
height:40px;
display:table;
}
.Tabbutton
{
height:40px;
background-color:#EDEDED;
display:table-cell;
width:25%;
border-top:none;
border-right:none;
}
.TabbuttonActive {
border-bottom:none;
background-color:white;
}
.row{display:table-row;}
display: table and display: table-cell are supported from IE11 http://caniuse.com/#search=table-cell
I don't know your case, what do you whant to do with these buttons, but is it possible for you, to use simple display: block and float: left ?
.Tab
{
width:100%;
height:40px;
display:block;
}
.Tabbutton
{
height:40px;
background-color:#EDEDED;
display:block;
width:100%;
border-top:none;
border-right:none;
}
.TabbuttonActive {
border-bottom:none;
background-color:white;
}
.btnCol {
width: 25%;
float: left;
display: block;
}
.row::after {
content: "";
display: block;
clear: both;
}
<div class="Tab">
<div class="row">
<span class="btnCol">
<input type="button" runat="server" class="Tabbutton iconInterview TabbuttonActive" />
</span>
<span class="btnCol">
<input type="button" runat="server" class="Tabbutton iconScore " />
</span>
<span class="btnCol">
<input type="button" runat="server" class="Tabbutton iconInfo" />
</span>
<span class="btnCol">
<input type="button" runat="server" class="Tabbutton iconActions" />
</span>
</div>
</div>
I want to put the go-page button and input center and export button right on the same line, it doesn't work below
<div>
<P style="float: center">
<input type="text" id="page-dir" name="page-dir" maxlength="6" size="4" autocomplete="on"
onkeydown="if (event.keyCode == 13) document.getElementById('go-page').click()"/>
<button style="float: center" id="go-page" onClick="goPage()">go to page</button>
</P>
<P style="float: right">
<button id="export" onclick="export()">export</button>
</P>
</div>
.container {
display:block;
text-align:center;
width:500px;/*you can use percentage*/
position:relative;
border:1px solid #ff4500;
}
.cont-one {
display:inline-block;
max-width:150px;
border:1px solid #000;
}
#page-dir{
width:50px;
}
.cont-two{
position:absolute;
display:inline-block;
width:50px;
float:right;
border:1px solid #000;
left:450px;
}
<div class="container">
<div class="cont-one">
<input type="text" id="page-dir" />
<button id="go-page" onClick="goPage()">Go to page</button>
</div>
<div class="cont-two">
<button id="export" onclick="export()">export</button>
</div>
</div>
How can I get the dates in the center of the main div.
JSFiddle
<style>
.div_table{
display:table;
width:100%;
}
.div_table_row{
display:table-row;
width:auto;
clear:both;
}
.div_table_col{
display:table-column;
float:left;/*fix for buggy browsers*/
}
label
{
width: 10em;
text-align: left;
margin-right: 0.5em;
display: block;
}
input
{
color: #781351;
background: #fee3ad;
border: 1px solid #781351
}
</style>
<div class="div_table">
<div class="div_table_row">
<img src="./images/logo_transparent.png" width="192" height="69" alt="Logo" />
</div>
<div class="div_table_row">
<?php include_once("./include/menu.php"); ?>
</div>
<div class="div_table_row">
<div style="text-align:center">
<label>From Date:<br /><input type="text" class="date" /></label>
<label>To Date:<br /><input type="text" class="date" /></label>
</div>
</div>
<div class="footer div_table_row">All Rights Reserved</div>
</div>
Whould you like to center the labels or the input textfields?
If labels do this:
<label><span>From Date:</span><br /><input type="text" class="date" /></label>
<label><span>To Date:</span><br /><input type="text" class="date" /></label>
Put the text in the label into a span.
in CSS:
label span {
position: absolute;
left: 50%;
}
Add position: relative; to .div_table_row.
I have a text input field and 2 buttons on the next line within a dialog box.
How may I line up the input field in the center of the dialog and align the buttons to the right hand edge of the input field?
I have managed to achieve the results I'm after with the following code, but it feels like there must be a better way as this aligns the text input to the right also:
<style>
.container
{
border: 1px solid #ccc;
text-align: right;
width: 100%;
padding-right: 20px;
}
</style>
<div class="container">
<p><input id="selContactLists" name="selContactLists" type="text" class="textbox" id="textbox" /></p>
<input name="" type="button" value="Button"/>
<input name="" type="button" value="Button"/>
CSS:
.container {
display: inline-block;
}
input.text {
width: 150px;
display: block;
}
.right {
float: right;
}
HTML:
<div class="container" >
<input type="text" class="text" />
<span class="right">
<input type="button" value="button" />
<input type="button" value="button" />
</span>
</div>
Working example: http://jsfiddle.net/GTTFY/
<style>
.container
{
margin-left:auto;
margin-right:auto;
width:150px;
}
</style>
<div class="container" >
<input name="" type="text" class="textbox" id="textbox" />
<input name="" type="button" style="float:right;" value="Button"/>
<input name="" type="button" style="float:right;" value="Button"/>
</div>
<style>
.test
{
margin-left:auto;
margin-right:auto;
}
.test td
{
float:right;
}
</style>
<table class="test">
<tr>
<td colspan=2><input name="" type="text" class="textbox" id="textbox" /></td>
</tr>
<tr>
<td><input name="" type="button" value="Button"/> </td>
<td><input name="" type="button" value="Button"/> </td>
</tr>
</table>
How to make a web form with 3 columns using CSS? In the above example all elements are placed just in a single column.
<html>
<head>
<style>
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
padding:14px;
}
#stylized{
border-width:1px;
border-style:solid;
border-color:#b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
border-width:1px;
border-style:solid;
border-color:#b7ddf2;
padding-bottom:10px;
}
#stylized label{
font-size:11px;
font-weight:bold;
text-align:right;
}
#stylized input{
font-size:11px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:70px;
margin:2px 0 20px 10px;
display: block;
}
/* --------- End of Form --------- */
</style>
</head>
<body>
<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="index.html">
<h1>Data</h1>
<label>Name: </label>
<input type="text" name="name" id="name"/>
<label>Email: </label>
<input type="text" name="email" id="email"/>
<label>Password: </label>
<input type="text" name="password" id="password"/>
</form>
</div>
</body>
</html>
DEMO: http://jsfiddle.net/bfZR4/
Basically, if you put all three into divs with a class of column like so:
<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="index.html">
<h1>Data</h1>
<div class="column">
<label>Name: </label>
<input type="text" name="name" id="name"/>
</div>
<div class="column">
<label>Email: </label>
<input type="text" name="email" id="email"/>
</div>
<div class="column">
<label>Password: </label>
<input type="text" name="password" id="password"/>
</div>
</form>
Then you can apply the following style to the column class:
.column
{
float: left;
width: 33%;
}
you can use this for all form or if you want to do this in a particular form so you can define css name with class or id.
form div
{
display: inline;
width: 33%;
float: left;
}
Hey you can used display:inline-block;
HTML
<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="index.html">
<h1>Data</h1>
<div class="column">
<label >Name:
<input type="text" name="name" id="name"/></label>
</div>
<div class="column">
<label>Email:
<input type="text" name="email" id="email"/></label>
</div>
<div class="column">
<label>Password:
<input type="text" name="password" id="password"/></label>
</div>
</form>
</div>
Css
.column
{
display: inline-block;
margin-left: 23px;
vertical-align: top;
}
.column + .column{
margin-left:25px;
}
Live demo http://jsfiddle.net/bfZR4/2/
Put every 3 fields in a div with id section. and then each of field in a div havin class subsection
<html>
<head>
<style>
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
padding:14px;
}
#stylized{
border-width:1px;
border-style:solid;
border-color:#b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
border-width:1px;
border-style:solid;
border-color:#b7ddf2;
padding-bottom:10px;
}
#stylized label{
font-size:11px;
font-weight:bold;
text-align:right;
}
#stylized input{
font-size:11px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:70px;
margin:2px 0 20px 10px;
display: block;
}
#section{
width:100%;
padding: 10px;
}
.subsection{
width:30%;
margin:0px 5px 0px 5px;
float: left;
}
/* --------- End of Form --------- */
</style>
</head>
<body>
<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="index.html">
<h1>Data</h1>
<div id="section">
<div class="subsection">
<label>Name: </label>
<input type="text" name="name" id="name"/>
</div>
<div class="subsection">
<label>Email: </label>
<input type="text" name="email" id="email"/>
</div>
<div class="subsection">
<label>Password: </label>
<input type="text" name="password" id="password"/>
</div>
</form>
</div>
</div>
</body>
</html>
thanks