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.
Related
I have a problem trying to align my dropdown list vertically with my textarea on the left somehow. I do not know why it is clashing together.
EDIT:Thanks for the help, I have made changes to achieve it.
JSP:
.ExeDropdown{
float:left;
margin-left:50px;
}
div.txt1{
float: left;
margin-left:50px;
}
div.txt2{
float:right;
margin-right: 120px;
}
.txt3{
float:right;
margin-right: 120px;
}
#subBtn{
position: absolute;
bottom: 20%;
left:47%;
}
<div class="ExeDropdown">
Select an exercise:
<select name="ProgExe">
<option value="exe1">Exercise 1</option>
<option value="exe2">Exercise 2</option>
</select>
</div>
<div class="txt1" >
<p>Write your source code here:</p>
<textarea id="myTextArea" rows="5" cols="40" name="txtInput" >
</textarea>
</div>
https://i.stack.imgur.com/Vok8d.jpg
Here you go :
HTML:
<div class="ExeDropdown">
Select an exercise:
<select name="ProgExe">
<option value="exe1">Exercise 1</option>
<option value="exe2">Exercise 2</option>
</select>
</div>
<div class="clear"></div>
<div class="txt1" >
<p>Write your source code here:</p>
<textarea id="myTextArea" rows="5" cols="40" name="txtInput" >
</textarea>
</div>
CSS:
.clear{clear:both;}
Take out the float:left; on both of the elements you mentioned (.ExeDropdown, div.txt1).
it should work then
Add a (line-) break before it:
Select an exercise:
<br /> <!-- here -->
<select name="ProgExe">
I have the following html snippet:
<form name="foo">
<fieldset>
<legend>Legend Here</legend>
<label for="the_date">Date: </label><input type="text" name="the_date" id="the_date">
<select class="show_when_needed" id="event_state">
<option value="-1" selected="selected">N/A</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select>
<div class="foobar" style="display: inline; border: 1px black; min-width: 20px; min-height: 15px; background: blue;"></div>
<button type="button" name="go_next" id="go_next">Go!</button>
</fieldset>
<hr />
<button type="button" id="save_object">Save Object</button>
</form>
I am trying to have the div show inline, and set a minimum width (to force it to show on screen).
The HTML above is not achieving that goal. How do I correct it so that the div appears alongside the select option control?
[[Additional Info]]
I have tried this on the latest versions of FF and Chrome - both fail to display correctly.
You need to give the element a display: inline-block, you can't set width or height of an inline element because it behaves just like a <span> or a <strong> would, taking only the space it needs.
Take a look at this updated snippet with display: inline-block
change from display: inline; to display: block;.
<form name="foo">
<fieldset>
<legend>Legend Here</legend>
<label for="the_date">Date: </label><input type="text" name="the_date" id="the_date">
<select class="show_when_needed" id="event_state">
<option value="-1" selected="selected">N/A</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select>
<div class="foobar" style="display: block; border: 1px black; min-width: 20px; min-height: 15px; background: blue;"></div>
<button type="button" name="go_next" id="go_next">Go!</button>
</fieldset>
<hr />
<button type="button" id="save_object">Save Object</button>
</form>
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.
I have a Select field that I want to take up as much space as every other field in my form, and they go down vertically.
When I set the width of my controls to 70% all controls assume this width, except Select.
HTML
<div>
<ul class="flex-container">
<li class="flex-item">
<input type="date" id="dateField" />
</li>
<li class="flex-item">
<select type="text" id="areaField">
<option value=""> Choose</option>
<option value=" 1"> 1</option>
<option value=" 2"> 2</option>
<option value=" 3"> 3</option>
<option value=" 4"> 4</option>
</select>
</li>
</ul>
</div>
CSS:
#dateField, #areaField{
width: 70%;
}
.flex-container {
list-style: none;
}
You can see a JSFiddle Demo of what I mean here.
Does anyone know what to do about that :)?
You'll want to invoke the box-sizing property and set it to border-box.
There are some good discussions about this issue on a previous thread. The suggested answer of content-box doesn't work unless you have a border surrounding the input/select, so border-box will work better for you in this situation.
#dateField, #areaField{
width: 70%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.flex-container {
list-style: none;
}
<div>
<ul class="flex-container">
<li class="flex-item">
<input type="date" id="dateField" />
</li>
<li class="flex-item">
<select type="text" id="areaField">
<option value=""> Choose</option>
<option value=" 1">1</option>
<option value=" 2">2</option>
<option value=" 3">3</option>
<option value=" 4">4</option>
</select>
</li>
</ul>
</div>
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>