HTML
<div id="panel">
<form method="POST" action="">
<select class="form-control" id="sel1" name="veh_id">
<option>1</option>
<option>1</option>
<option>1</option>
</select>
<input type="submit" value="GO" id="submit">
</form>
</div>
CSS
#panel {
position: absolute;
left:32%;
z-index: 5;
background-color: transparent;
border: dashed 2px black;
overflow: hidden;
}
#submit {
display: block;
float: right;
height: 35px;
width: 63px;
overflow: hidden;
}
#sel1 {
min-width:425px;
width:425px;
border: none;
float: left;
overflow: hidden;
}
The following div panel is on center with large screens but on mobile phones (Small screens) the whole div mix ups. I made my hard effort but didn't got success.
If you're using bootstrap and trying to center things, you shouldn't be pushing the elements around using left and what not. This can be very simply done using bootstrap helper classes
I'm not sure that this fits the bill 100% but should help. I stripped most of the provided css to make use of bootstrap,
a column that is 50% of the screen (centered) with something like
<div class="col-sm-6 col-sm-push-3"></div>
and then styling buttons accordingly. I'm not sure why you have absolute on the wrapper, but if you need that it can still be used.
also you use both
display: block;
float: right;
which will cause the button to be rendered as a new line, but then you have a fixed width so it automatically goes right.
Hopefully this helps,
http://jsfiddle.net/1rLn0art/
#panel {
position: relative;
margin: 0 auto;
background-color: transparent;
border: dashed 2px black;
display: block;
width:500px;
}
#submit {
height: 35px;
width: 63px;
}
#sel1 {
min-width:425px;
border: none;
}
Change your CSS to this.
You have many unrelated css here. You should go to MDN and find out what these css attributes means.
To center a div, margin: 0 auto; is an useful way. Set the div a width, make it display: block. margin: 0 auto; clear all your float.
http://codepen.io/anon/pen/VLjgXR
Related
I want to restrict the stretching of a textarea to 100% of the parent fieldset.
According to this question it works, when the parent is a div:
How can I prevent the textarea from stretching beyond his parent DIV element? (google-chrome issue only)
Now with fieldsets this doesn't seem to work: http://jsfiddle.net/b4oLy135/7/
HTML
<fieldset id="container">
<textarea></textarea>
</fieldset>
CSS
textarea {
max-width: 50%;
}
#container {
max-width: 80%;
border: 1px solid red;
}
What am I missing here?
You can do the following.
#container {
position: relative;
max-width: 80%;
overflow: none;
border: 1px solid red;
height: 100px;
margin: 0;
padding: 5px;
}
textarea {
position: absolute;
display: block;
width: 40%;
max-width: calc(100% - 15px);
height: 40%;
max-height: calc(100% - 15px);
}
<fieldset id="container">
<textarea></textarea>
</fieldset>
This way the textarea can only be resized to the width & height of its parent fieldset.
If you have more then one <input> in your fieldset, absolute positioning does not work.
My solution was to just use a wrapper over every <textarea> field, so I could use the solution I referred to in t the question.
Important: Does not work when using % on the parent. There is a bug when using % and stretching over 200% of the parent.
Here is my current fiddle:
https://jsfiddle.net/d23hgb8w/3/
HTML
<fieldset>
<div class="textarea__wrapper">
<textarea></textarea>
</div>
<input>
</fieldset>
CSS
.textarea__wrapper {
border: 1px solid red;
width: 500px;
}
textarea {
max-width: 100%;
}
I want to make a conjoined input (left-aligned text input on the same line as a right-aligned button). Something like this:
But it want to have flexible width (the combined inputs should stretch to 100% of the parent container width, which can be of any width. Particularly, the text input should stretch to use all available space on the line).
I tried:
button float:right with text input width:100% (this overflows onto 2 lines)
text input width: calc(100% - 90px) (almost works, but button width varies on each browser)
Code example with JSFiddle:
HTML:
<div class="conjoined-input">
<input type="button" value="Update">
<input type="text">
</div>
CSS:
.conjoined-input {
width: 500px;
border: 1px solid red;
}
.conjoined-input input[type="text"] {
/*width: 100%;*/
}
.conjoined-input input[type="button"] {
float: right;
}
I need only modern browser support (IE9+) and can use any HTML and CSS.
How do I make a conjoined input with flexible width
very easy using flex:
DEMO
.conjoined-input {
width: 500px;
border: 1px solid red;
display: flex;
}
.conjoined-input input[type="text"] {
width: 100%;
}
IE9 is happy?
DEMO2
so, wrap your input in a div.
<button>Search</button>
<span><input type="text" title="Search" /></span>
then apply the magic styles
.conjoined-input {
width: 500px;
overflow: hidden;
background-color: yellow;
border: 1px solid red;
}
.conjoined-input input[type="text"]{
width: 100%
}
.conjoined-input span {
display: block;
overflow: hidden;
padding-right:10px;
}
.conjoined-input button{
float: right;
}
This is a very basic question but I think inputs behave strangely so im struggling to find a solution.
I have a liquid width layout. I need a link to sit to the side of an input. I need the input to take up all the available width:
Information Link
<input type="number" class="form-control form-control-default-new" placeholder="400">
If the input was a div I would just float the link the right and not have to do anything else. However if I make the input display block it wont take up the full width. And If I make it width 100% then it takes up the whole line and the link no longer sits along side it.
If you can wrap that input in a div container, you can achieve that effect pretty easy:
float right for the a tag
overflow: hidden to the div container of the input
set input width to 100%
done.
Check out the demo here
a{
float: right;
}
div{
overflow: hidden;
padding-right: 20px;
}
input{
box-sizing: border-box;
width: 100%;
}
Information Link
<div><input type="number" class="form-control form-control-default-new" placeholder="400"/></div>
Example with display: block and float: left :
* {
box-sizing: border-box;
}
a, input {
display: block;
float: left;
}
a {
text-align: center;
width: 20%
}
input {
width: 80%
}
<input type="number" class="form-control form-control-default-new" placeholder="400">
Information Link
You can try using display: table and display: table-cell. The white-space: nowrap CSS prevents the second cell (with the link) from line-breaking and the width: 100% on the first cell makes that cell grow as large as the table will allow it to (i.e. until the cell runs into the second cell with the nowrap restriction.
JSFIDDLE DEMO
CSS:
* {
box-sizing: border-box;
}
input {
width: 100%;
}
.container {
width: 100%;
display: table;
}
.container div {
display: table-cell;
white-space: nowrap;
}
.link {
text-align: right;
padding-left: 10px;
}
.input-box {
width: 100%;
}
HTML:
<div class="container">
<div>
<input type="number" class="form-control form-control-default-new" placeholder="400" />
</div>
<div class="link">
Information Link
</div>
</div>
I would set the desired width for the input fields, like this http://codepen.io/anon/pen/PwpBoK
.wrapper {
width: 100%;
height: 120px;
background: #ccc;
padding: 12px;
}
.text {
margin: 0 auto;
width: 600px;
}
.container {
background: #fff;
margin: 0 auto;
width: 600px;
height: 45px;
padding: 10px;
}
input {
width: 400px;
margin-right: 8px;
}
.form-control form-control-default-new {
width: 400px;
}
<div class="wrapper">
<div class="text">
<p>I need this:</p>
</div>
<div class="container">
<input type="number" class="form-control form-control-default-new" placeholder="400">Information Link
</div>
</div>
I am facing a same problem. I'm trying to create two separate rows (marked as red background color) to be aligned horizontally in the center. One of the row on the left side of center part, and second one on the right side of the center part.
Do I need to add something or change some values? I've been trying to do this for 2 hours now.
Any help will be appreciated. Thank you :)
.others {
position: relative;
vertical-align: middle;
width: 70%;
background-color: #d0d0d0;
height: 500px;
margin: auto;
padding: 40px 15% 20px 15%;
display: table;
}
.others p {
margin: 0px;
height: 300px;
float: left;
background-color: red;
}
<DIV CLASS="others">
<P ID="leftside">
News will be shown here as they appear.
</P>
<P ID="rightside">
Here you will be able to see our products.
</P>
</DIV>
.others {
position: relative;
vertical-align: middle;
width: 70%;
background-color: #d0d0d0;
height: 500px;
margin: auto;
padding: 40px 15% 20px 15%;
display: table;
}
.others p {
margin: 0px auto;
height: 300px;
width:50%;
display-inline-block;
text-align:center;
float: left;
background-color: red;
}
<DIV CLASS="others">
<P ID="leftside">
News will be shown here as they appear.
</P>
<P ID="rightside">
Here you will be able to see our products.
</P>
</DIV>
Worked for me just by removing float:left; and add display:table-cell; to .others p.
Fiddle
.others p {
margin: 0px;
height: 300px;
background-color: red;
display:table-cell;
}
.others p {
margin: 0px;
height: 300px;
background-color: red;
display:inline-block;
}
i think you shouldnt use <p> for positioning.
use <div> instead.
also using float:left or float:right might solve your problem.
Read up on using floating items here:
http://www.w3schools.com/cssref/pr_class_float.asp
Also, when using floats, browsers will assume there is nothing inside your 'container' <div>.
So i'd also suggest you read up on using css attribute overflow.
http://www.w3schools.com/cssref/pr_pos_overflow.asp
.others
{
position: relative;
vertical-align: middle;
width: 70%;
background-color: #d0d0d0;
height: 500px;
margin: auto;
padding: 40px 15% 20px 15%;
display: table;
}
#leftside
{
display:inline-block;
margin: 0px;
height: 300px;
width:50%;
float: left;
background-color: red;
}
#rightside
{
display:inline-block;
margin: 0px;
height: 300px;
width:50%;
float: right;
background-color: green;
}
<DIV CLASS="others">
<P ID="leftside">
News will be shown here as they appear.
</P>
<P ID="rightside">
Here you will be able to see our products.
</P>
</DIV>
You just need to provide to p a width value because you are floating the p elements to the left, every p element into the container will get out of the normal document flow and flow from left to right.
Just add width: 50% to every p element. like this:
.others p {
margin: 0px;
height: 300px;
float: left;
background-color: red;
width:50%;
}
Also provide a clearfix or overflow:hidden; to the .others in order to contain the floated elements within it's body.
Here is a demo to work with
Edit: Almost forgot. If you want to gain control onto your layout, provide also a min-width and a max-width value to the body container, so it doesn't strech to much on wide screens, nor it is contained to much on narrower screens. Also, try a css framework, like bootstrap. It will give you fine control onto your layout.
Cheers!
For a responsive site I want a div and an input to sit side by side, and I want the input to take up all the available width and not wrap onto the next line.
I want the div to be a fixed width or determined by its content, I dont want to set a % width for the div.
So I have this:
But I want this:
<div class="cont">
<div class="stuff">Stuff</div>
<input value="something" >
</div>
.cont {
width: 20%;
margin: auto;
border: 1px solid grey;
overflow: auto;
}
.stuff {
background: blue;
height: 200px;
float: left;
width: 100px
}
input {
float: right;
display: block;
}
If you wrap your input in a span and apply this CSS it should work:
jsFiddle example
<div class="stuff">Some text</div>
<span><input type="text" value="something" /></span>
div {
background: #00f;
float: left;
height: 200px;
}
span {
display: block;
overflow: hidden;
padding-left: 10px;
}
input {
width: 100%;
}
If you don't have to support IE9 or lower Use calc() property like this:
input {
width:calc(100% - 100px);
box-sizing:border-box;
}
Check this Demo Fiddle
Complement with box-sizing to keep away issues with border and padding