How do I align these elements in one horizontal line?

HTML & CSS
1

I’m trying to get section of my web page to look like this: http://sylvesterbradley.org/images/css_issue_180315b.png

It’s coming out like this: http://sylvesterbradley.org/images/css_issue_180315.png

You can see this at a URL that I could give you if I wasn’t limited to two links per post :-(.

How do I get all of the elements (apart from the “please enter” line) to be arranged in a single horizontal line (assuming that there is room to do so, which there normally will be)?

Here’s the HTML and CSS:

<pre>
<html>
<head>
<title>Horizontal Alignment Problem</title>
<style>
p 
{
   font-family: verdana;
   font-size: 12px;
}
html {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
	background-color: #e6f7ff;
    min-height: 100%;
    padding-top: 10px;
    padding-right: 30px;
    padding-bottom: 10px;
    padding-left: 30px;
	position: relative;
}
tr.invisible, td.invisible
{
	border-style: none;
	background-color: none;
	/*
	margin-left: 1em;
	margin-right: 1em;
	*/
	position: relative;
	margin-left: auto;
	margin-right: auto;
}
.invisible-left
{
	border-style: none;
	background-color: none;
	position: relative;
	margin-left: 0;
}
tr
{
	border-style: inherit;
	border-color: inherit;
	border-width: inherit;
	border-collapse:  inherit;
}
th, td
{
	border-style: solid;
	border-color: blue;
	border-width: 1px;
	border-collapse:  collapse;
	padding-left: 0.5em;
	padding-right: 0.5em;
	text-align: center;
   font-family: verdana;
   font-size: 12px;
}
th.invisible, td.invisible
{
	border-style: none;
	background-color: none;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	visibility: visible !important;
}
/*
invisible-left
invisible
input-daterange
input-group
input-sm
form-control
datepick
inline
*/
</style>
</head>
<body>
<form method="post" action='do_ticklist.php'>
<table class="invisible-left">
<tbody>
<tr class="invisible">
<td class="invisible input-daterange input-group" id="datepicker" data-date-format='d-M-yy' data-date-start-date="5-Apr-16" data-date-end-date="5-May-18">
<input type="text" class="input-sm form-control datepick inline" style="display: inline-block; margin-left: 50px;" value="15-Mar-18" name="fromdate" placeholder="From date" data-date-start-date="5-Apr-16" data-date-end-date="5-May-18"/>
<p>&nbsp;&nbsp;&nbsp;to&nbsp;&nbsp;&nbsp;</p>
<input type="text" class="input-sm form-control datepick inline" style="display: inline-block; margin-left: 50px;" value="5-May-18" name="todate" placeholder="To date" data-date-start-date="5-Apr-16" data-date-end-date="5-May-18"/>
</td>
<td class="invisible"><button type='submit' name='daterange' value='daterange' formmethod='post' formaction='do_ticklist.php'>Show New Date Range</button></td>
</tr>
</table>
</form>
</body>
</html>
</pre>

If you can help me overcome this problem, I will be extremely grateful.

Thanks - Rowan

2

Welcome, @rowan2. It is easier for us to read your code and help you if you format it properly. I will do it for you this time, but in the future, you place three backticks (`) on the line before the code, and three backticks on the line after the code.

3

[code]Remove the paragraph tags (

) from the “to” line. Change

   to   

to

   to   

[/code]

4

Hi there rowan2,

use this …

HTML

 <td class="invisible input-daterange input-group" id="datepicker" data-date-format='d-M-yy' data-date-start-date="5-Apr-16" data-date-end-date="5-May-18">
  <input type="text" class="input-sm form-control datepick inline" value="15-Mar-18" name="fromdate" placeholder="From date" data-date-start-date="5-Apr-16" data-date-end-date="5-May-18">
   <span>to</span>
  <input type="text" class="input-sm form-control datepick inline" value="5-May-18" name="todate" placeholder="To date" data-date-start-date="5-Apr-16" data-date-end-date="5-May-18">
 </td>

…and this…

CSS

.invisible span {
    margin: 0 10px;
 }

Also note that…

The HTML5 placeholder attribute is not a substitute for the label element :unhappy:

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.