Display div elements in one line - html

I have three elements in my div dropdown list, input date and button they are all in on div , i want all of them to be in the same line , not under each other
<div id="cont">
Status :
<select id="dropdown">
<option value="Approved">Approved</option>
<option value="Rejected">Rejected</option>
<option value="Pending">Pending</option>
<option value="Error">Error</option>
</select>
<!-- Date Picker -->
<p>Date:
<input type="text" id="datepicker">
</p>
<button type="submit" id="searchBtn" value="">Search</button>
</div>

Use CSS with display: inline-block
.inline {
display: inline-block;
}
<div id="cont">
Status:
<select id="dropdown" class="inline">
<option value="Approved">Approved</option>
<option value="Rejected">Rejected</option>
<option value="Pending">Pending</option>
<option value="Error">Error</option>
</select>
<!-- Date Picker -->
<p class="inline">Date:
<input type="text" id="datepicker">
</p>
<button type="submit" id="searchBtn" value="" class="inline">Search</button>
</div>
Although the above works, it's better practice to put the specific elements in a span tag. Like so ...
.inline {
display: inline-block;
}
<div id="cont">
<span class="inline">Status:
<select id="dropdown">
<option value="Approved">Approved</option>
<option value="Rejected">Rejected</option>
<option value="Pending">Pending</option>
<option value="Error">Error</option>
</select>
</span>
<!-- Date Picker -->
<span class="inline">
<p>Date: <input type="text" id="datepicker"></p>
</span>
<span class="inline">
<button type="submit" id="searchBtn" value="">Search</button>
</span>
</div>

You can add the display: inline-block property to the divs. This will make them get rendered inline with the content, but they keep their block properties, so you can still set their width and height for example.
Example:
.inline {
display: inline-block;
width: 50px;
height: 20px;
}
#red {
background-color: red;
}
#green {
background-color: green;
}
#blue {
background-color: blue;
}
<div class="inline" id="red"></div>
<div class="inline" id="blue"></div>
<div class="inline" id="green"></div>
My favourite tutorial site about the topic: http://learnlayout.com/inline-block.html
This can be used for every element, which supports the display property. Some elements are even set to this by default, like the span element.

https://jsfiddle.net/v9qxobaf/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<style media="screen">
#cont {
margin-left: -20px;
}
.status, .date, .button {
float: left;
padding-left: 20px;
}
</style>
<body>
<div id="cont">
<div class="status">
<label>Status: </label>
<select id="dropdown">
<option value="Approved">Approved</option>
<option value="Rejected">Rejected</option>
<option value="Pending">Pending</option>
<option value="Error">Error</option>
</select>
</div>
<div class="date">
<!-- Date Picker -->
<span> Date: <input type="text" id="datepicker"></span>
</div>
<div class="button">
<button type="submit" id="searchBtn" value="">Search</button>
</div>
</div>
</body>
</html>

wrap each in a div and display: inline-block.

Related

How to put two select attributes (which are in different forms) side by side using html & css

I need to put two select types side by side which re in different forms
Float and span are not working, I have also tried position-property but of no use.
Below is the HTML code,
form.aui .field-group {
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 4px 0 4px 145px;
position: fixed;
left: 50%;
margin: 1px 0;
width: 100%
}
<div class="xyz-page-panel">
<div class="xyz-page-panel-inner">
<section class="xyz-page-panel-content">
<div id="searchType">
<form class="xyz">
<div class="field-group">
<label for="one-two-id">Search Type </label>
<select name="searchType" class="select long-field" id="one-two-id">
<option value="one">one</option>
<option value="two">two</option>
</select>
</div>
</form>
</div>
<div>
<form class="xyz">
<div class="field-group">
<label for="search-options-id">Search field </label>
<select class="select long-field" id="productName">
<option value="one">one</option>
<option value="two">two</option>
</select>
</div>
</form>
</div>
</section>
</div>
</div>
By using
.xyz-page-panel-content {
display: flex;
}
It's important that you recognize the elements in your structure that are siblings. In your case it's
<div class="xyz-page-panel">
<div class="xyz-page-panel-inner">
<section class="xyz-page-panel-content">
<!-- sibling 1 -->
<div id="searchType">
<!-- ... -->
</div>
<!-- sibling 2 -->
<div>
<!-- ... -->
</div>
</section>
</div>
</div>
For display: flex to work, you must assign this rule to the parent element of those who are meant to be next to each other. If those are not siblings, you have to use some other strategy or change the HTML structure.
You could use float instead by floating the siblings. I don't like using float for layout purposes like these, so I don't show it in action.
.xyz-page-panel-content > * {
float: left ;
}
form.aui .field-group {
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 4px 0 4px 145px;
position: fixed;
left: 50%;
margin: 1px 0;
width: 100%
}
.xyz-page-panel-content {
display: flex;
}
<div class="xyz-page-panel">
<div class="xyz-page-panel-inner">
<section class="xyz-page-panel-content">
<div id="searchType">
<form class="xyz">
<div class="field-group">
<label for="one-two-id">Search Type </label>
<select name="searchType" class="select long-field" id="one-two-id">
<option value="one">one</option>
<option value="two">two</option>
</select>
</div>
</form>
</div>
<div>
<form class="xyz">
<div class="field-group">
<label for="search-options-id">Search field </label>
<select class="select long-field" id="productName">
<option value="one">one</option>
<option value="two">two</option>
</select>
</div>
</form>
</div>
</section>
</div>
</div>
Try to float the divs outside the form tags. This should work.
#searchType {
float:left;
}
Like this

Make an element float to the right inside a div

On my product page, there are a number of attributes depending on how many were added to that specific product. It can be from 1 up to 4. The attributes share a common fieldset class name and this is where it gets tricky for me. Basically I'm trying to position 2 of the fieldsets side by side and the rest below them (also side by side). However, I also want them separated and stick to their respective sides within the container. I've managed to make parts of what I said above happen but I have an issue with making the right fieldsets stick to the right side completely. Here's an image description:
Here's the code so far:
https://jsfiddle.net/26za63sh/
HTML:
<div class="container">
<div class="product_attributes clearfix">
<div id="attributes">
<div class="clearfix"></div>
<fieldset class="attribute_fieldset">
<label class="attribute_label" for="group_2">Choose</label>
<div class="attribute_list">
<select name="group_2" id="group_2" class="form-control attribute_select no-print">
<option value="81" selected="selected" title="Option #1">Option #1</option>
<option value="150" title="Option #2">Option #2</option>
</select>
</div>
</fieldset>
<fieldset class="attribute_fieldset">
<label class="attribute_label" for="group_6">Choose</label>
<div class="attribute_list">
<select name="group_6" id="group_6" class="form-control attribute_select no-print">
<option value="31" selected="selected" title="Option #1">Option #1</option>
<option value="56" title="Option #2">Option #2</option>
</select>
</div>
</fieldset>
<fieldset class="attribute_fieldset">
<label class="attribute_label" for="group_5">Choose</label>
<div class="attribute_list">
<select name="group_5" id="group_5" class="form-control attribute_select no-print">
<option value="80" selected="selected" title="Option #1">Option #1</option>
<option value="151" title="Option #2">Option #2</option>
</select>
</div>
</fieldset>
</div>
</div>
</div>
CSS:
.container {
width: 400px;
height: 200px;
background-color: gray;
border: 1px solid #dddddd;
}
fieldset {
padding: 0;
margin: 0;
border: 0;
}
#attributes .attribute_list {
width: 90%;
}
#attributes fieldset {
float: left;
width: 50%;
padding-bottom: 5px;
}
#attributes fieldset:last-child {
float: left;
padding-bottom: 0px;
}
I understand that if I set .attribute_list's width to 100% it will accomplish what I'm trying to do but then the two fieldsets will have no space in the middle. If I instead set a fixed width instead of percentage, then I'll have issues in mobile/tablet view. Any suggestions?
Try this. If you want align items in line and float right.
.attribute-container{display:inline-block;}
.attribute_fieldset:nth-child(odd) .attribute-container{float:right;}
.container {
width: 400px;
height: 200px;
background-color: gray;
border: 1px solid #dddddd;
}
fieldset {
padding: 0;
margin: 0;
border: 0;
}
#attributes .attribute_list {
width: 90%;
}
#attributes fieldset {
float: left;
width: 50%;
padding-bottom: 5px;
}
#attributes fieldset:last-child {
float: left;
padding-bottom: 0px;
}
<div class="container">
<div class="product_attributes clearfix">
<div id="attributes">
<div class="clearfix"></div>
<fieldset class="attribute_fieldset">
<div class="attribute-container">
<label class="attribute_label" for="group_2">Choose 1</label>
<div class="attribute_list">
<select name="group_2" id="group_2" class="form-control attribute_select no-print">
<option value="81" selected="selected" title="Option #1">Option #1</option>
<option value="150" title="Option #2">Option #2</option>
</select>
</div>
</div>
</fieldset>
<fieldset class="attribute_fieldset">
<div class="attribute-container">
<label class="attribute_label" for="group_6">Choose 2</label>
<div class="attribute_list">
<select name="group_6" id="group_6" class="form-control attribute_select no-print">
<option value="31" selected="selected" title="Option #1">Option #1</option>
<option value="56" title="Option #2">Option #2</option>
</select>
</div>
</div>
</fieldset>
<fieldset class="attribute_fieldset">
<div class="attribute-container">
<label class="attribute_label" for="group_5">Choose 3</label>
<div class="attribute_list">
<select name="group_5" id="group_5" class="form-control attribute_select no-print">
<option value="80" selected="selected" title="Option #1">Option #1</option>
<option value="151" title="Option #2">Option #2</option>
</select>
</div>
</div>
</fieldset>
</div>
</div>
</div>
The problem is the elements in fieldset all float to left.
Add this to float the inner elements of odd fieldsets to right:
#attributes fieldset:nth-child(odd) * {
float: right;
}
JSFiddle: https://jsfiddle.net/er_han/Lprh9zqf/

Boostrap center inline inputs with no space between them

I removed the spacing between multiple input fields and the submit button using float:left.
But I dont know how to keep this hole block centered on the page.
Here is a Fiddle:https://jsfiddle.net/bb61c412/43/
And the code:
.form-control {
float: left;
border-radius: 0px;
}
.btn {
float: left;
border-radius: 0px;
}
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="col-sm-12 col-lg-12" style="margin-left:0px;padding-right:0px;margin-top:50px;padding-left:0px; height:100vh;">
<div style="background-color:white;width:100%;height:100%;">
<div style="margin-left:30px;margin-right:50px;padding-top:30px;">
<form>
<div class=form-inline style='text-align:center;'>
<select name="Form1" class="form-control">
<option value="0">Form1</option>
<option value="1">Option2</option>
<option value="2">Option3</option>
</select>
<select name="Form2" class="form-control">
<option value="0">Form2</option>
<option value="1">Option2</option>
<option value="2">Option3</option>
</select>
<select name="Form3" class="form-control">
<option value="0">Form3</option>
<option value="1">Option2</option>
<option value="2">Option3</option>
</select>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</div>
</div>
</div>
Remove the floats and use flexbox instead.
JSfiddle Demo
.form-control {
border-radius: 0px;
}
.btn {
border-radius: 0px;
}
.form-inline {
display: flex;
justify-content: center;
}
.form-control {
border-radius: 0px;
}
.btn {
border-radius: 0px;
}
.form-inline {
display: flex;
justify-content: center;
}
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="col-sm-12 col-lg-12" style="margin-left:0px;padding-right:0px;margin-top:50px;padding-left:0px; height:100vh;">
<div style="background-color:white;width:100%;height:100%;">
<div style="margin-left:30px;margin-right:50px;padding-top:30px;">
<form>
<div class=form-inline style='text-align:center;'>
<select name="Form1" class="form-control">
<option value="0">Form1</option>
<option value="1">Option2</option>
<option value="2">Option3</option>
</select>
<select name="Form2" class="form-control">
<option value="0">Form2</option>
<option value="1">Option2</option>
<option value="2">Option3</option>
</select>
<select name="Form3" class="form-control">
<option value="0">Form3</option>
<option value="1">Option2</option>
<option value="2">Option3</option>
</select>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</div>
</div>
</div>
Otherwise you will have to review How to remove the space between inline-block elements?
Please try this:
Change:
<div style="margin-left:30px;margin-right:50px;padding-top:30px;">
to
<div style="margin: 0px auto; padding-top: 30px; width: 427px;">
It is best practice to have all your .js files or CDN(s) at the bottom of your HTML before the closing body tag.
You want to render your .js scripts last to help with your asset pipeline.

Hide text after div using css

Here is my Div:
<div id="show" class="dataTables_length">
Show
<select size="1" name="show_length">
<option value="10" selected="selected">10</option>
<option value="20">25</option>
<option value="30">50</option>
<option value="40">100</option>
</select>
entries
</div>
I want to hide this show and entries text how should I hide this using css? Not using javascript or jquery.
.someClass {
display: none;
}
Tried this? I am sure this would do it!
Where it would be this:
<span class="someClass">Show</span>
<!-- select statement here -->
<span class="someClass">Enteries</span>
I thought you wanted to hide whole of it!
Try this:
<div id="show" class="dataTables_length">
<span class="hidden">Show</span>
<select size="1" name="show_length">
<option value="10" selected="selected">10</option>
<option value="20">25</option>
<option value="30">50</option>
<option value="40">100</option>
</select>
<span class="hidden">entries</span>
</div>
With CSS:
span.hidden {
display: none;
}
Despite so many answers and comments, you don't seem to be ready to accept the fact that the text needs to be wrapped in span. And that too using only css!
So, you can do a faux hide like this: http://jsfiddle.net/abhitalks/R7Yt4/1/
CSS:
div#show {
background-color: #ccc;
color: #ccc;
}
div#show::selection {
color: #ccc;
}
div#show > select {
color: #fff;
}
You can warp a span around the items you want to hide, and the hide this.
For example
<span class="hide">Show</span>
and css:
.hide{display:none;}
Your full html will look like this:
<div id="show" class="dataTables_length">
<span class="hide">Show</span>
<select size="1" name="show_length">
<option value="10" selected="selected">10</option>
<option value="20">25</option>
<option value="30">50</option>
<option value="40">100</option>
</select>
<span class="hide">entries</span>
</div>
<div id="show" class="dataTables_length">
<span style="visibility:hidden">Show </span>
<select size="1" name="show_length">
<option value="10" selected="selected">10</option>
<option value="20">25</option>
<option value="30">50</option>
<option value="40">100</option>
</select>
<span style="visibility:hidden"> entries </span>
</div>

How can I align two divs horizontally? [duplicate]

This question already has answers here:
Align <div> elements side by side
(4 answers)
Closed 4 years ago.
I need to align two divs next to each other, so that each contains a title and a list of items, similar to:
<div>
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div>
<span>destination list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
It's remarkably easy to do with tables, but I don't want to use tables. How can I achieve this?
Float the divs in a parent container, and style it like so:
.aParent div {
float: left;
clear: none;
}
<div class="aParent">
<div>
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div>
<span>destination list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
</div>
Nowadays, we could use some flexbox to align those divs.
.container {
display: flex;
}
<div class="container">
<div>
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div>
<span>destination list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
</div>
<div>
<div style="float:left;width:45%;" >
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div style="float:right;width:45%;">
<span>destination list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div style="clear:both; font-size:1px;"></div>
</div>
Clear must be used so as to prevent the float bug (height warping of outer Div).
style="clear:both; font-size:1px;
You need to float the divs in required direction eg left or right.
Wrap them both in a container like so:
.container{
float:left;
width:100%;
}
.container div{
float:left;
}
<div class='container'>
<div>
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div>
<span>destination list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
</div>
Add a class to each of the divs:
.source, .destination {
float: left;
width: 48%;
margin: 0;
padding: 0;
}
.source {
margin-right: 4%;
}
<div class="source">
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div class="destination">
<span>destination list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
That's a generic percentages solution - using pixel-based widths is usually much more reliable. You'll probably want to change the various margin/padding sizes too.
You can also optionally wrap the HTML in a container div, and use this CSS:
.container {
overflow: hidden;
}
This will ensure subsequent content does not wrap around the floated elements.
float is obsolete, better use display: flex;:
example :
.parent-div{ display: flex; }
indicate the direction by flex-direction: row/column;.
go down if no space by flex-wrap: wrap/nowrap;
more properties here.
if you have two divs, you can use this to align the divs next to each other in the same row:
#keyword {
float:left;
margin-left:250px;
position:absolute;
}
#bar {
text-align:center;
}
<div id="keyword">
Keywords:
</div>
<div id="bar">
<input type = textbox name ="keywords" value="" onSubmit="search()" maxlength=40>
<input type = button name="go" Value="Go ahead and find" onClick="search()">
</div>
<html>
<head>
<style type="text/css">
#floatingDivs{float:left;}
</style>
</head>
<body>
<div id="floatingDivs">
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div id="floatingDivs">
<span>destination list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
</body>
</html>
For your purpose, I'd prefer using position instead of floating:
http://jsfiddle.net/aas7w0tw/1/
Use a parent with relative position:
position: relative;
And children in absolute position:
position: absolute;
In bonus, you can better drive the dimensions of your components.