I want put textbox with button side by side.
But with next rules:
1) TextBox must fill all free width space of screen (leftpanel div)
2) Button have fixed width and height and must always stick to the right edge of browser. (rightpanel div)
My CSS style:
<style type="text/css">
div.centerpanel {
display: inline-block;
width: 100%;
height: 100%;
}
.leftpanel {
background: red;
display: inline-block;
width: 90%;
float: left
}
.rightpanel {
background: blue;
display: inline-block;
width: 10%;
float: left
}
</style>
in full screen it works well. But if i make browser window shortly by dragging edge/corners button partially trimmed.
sample (near full screen):
sample (after dragging small screen):
what i want:
There are two ways to achieve your layout,
First flexbox
.flexwrap {
display: flex;
width: 100%:
}
.flexwrap input {
flex: 1 1;
margin-right:10px;
}
<div class=flexwrap>
<input>
<button>+</button>
</div>
Second table
.tablewrap {
display: table;
width: 100%;
}
.tablewrap .t-cell {
display: table-cell;
}
.tablewrap .t-cell input {
width: 100%;
}
.tablewrap .t-cell:first-child{
padding-right:20px;
}
.tablewrap .t-cell:last-child {
width:20px;
}
<div class=tablewrap>
<span class=t-cell>
<input>
</span>
<span class=t-cell>
<button>+</button>
</span>
</div>
Related
div {
display: table;
width: 900px;
}
input {
width: calc(100% - 10px);
display: table-cell;
}
section {
display: table-cell;
background: red;
}
<div>
<input>
<section><button>+ invite</button></section>
</div>
I want input to fit all the place remaining. I am trying to use table to do that. But i can't get rid of the "red zone". It is unnecessary space, that i am trying to get rid of.
I want input to be wider so that there was no "red zone".
IMPORTANT: set width 100% to button is not a right solution.
here is code pen link https://codepen.io/CitizenOne/pen/QegBjQ
Don't use the table layout model. Flexbox is far more powerful and better suited to this.
<section> doesn't appear to have the right semantics for this content either, so I got rid of it.
div {
display: flex;
outline: dotted black 5px;
width: 500px; /* Reduced width to make it clearer in the small demo window */
}
input {
flex: 1;
background: #afa;
margin-right: 25px;
}
button {
flex: 0;
background: #faa;
}
<div>
<input>
<button>+ invite</button>
</div>
Add width to button.
div {
display: inline-block;
width: 900px;
}
input {
width: calc(100% - 67px);
}
section {
background: red;
}
<div>
<input>
<button>+ invite</button>
</div>
Is it possible style buttons in one div?
I want to style buttons when clear buttons appear on the backend.
When the second button disappears the first button should be width: 100%;. Any solution? And I tried button ~ button and its only works in last-child.
Please check the snippet
.container button + button:first-child {
width: 60%;
float: left;
}
.container button + button:last-child {
width: 40%;
float: left;
}
<div class="container">
<button>Visit</button>
<button>Clear</button>
</div>
Use Flexbox:
.container {
display: flex;
}
.container button:first-child {
width: 40%;
}
.container button:last-child {
flex-grow: 1;
}
<div class="container">
<button>Visit</button>
<button>Clear</button>
</div>
I have the following HTML:
<div class='container'>
<div class='first'>test</div>
<div class='second'>test</div>
</div>
accompied by the following CSS:
.container {
display: table;
width: 90%;
background: yellow;
}
.first {
display: table-cell;
background: red;
}
.second {
display: table-cell;
background: blue;
}
(Also: http://codepen.io/zssz/pen/GodBqQ)
How can I achieve that the second/blue div sits right below the first/red div, by ONLY changing the CSS of .second?
Thank you
(I have no control over the container CSS in this situation)
You can do this:
CSS
.second {
display: table-row;
background: blue;
}
DEMO HERE
How can I force a DIV to grow wider than the browser window to accommodate it's children horizontally, rather than forcing them on new rows
i.e. consider the following code with fiddle. There are 6 child elements inside of a container element, all with a minimum width of 200px, and all set to float: left. When the window is resized wide enough they are all on one row. When it is narrowed, they start pushing to new rows. Ideally I would like them to remain on a single row and have the browser display a scroll bar.
http://jsfiddle.net/krippy2k/x8sDp/20/
.container {
}
.child-element {
min-width: 200px;
float: left;
height: 100px;
}
.child1 {
background-color: purple;
}
.child2 {
background-color: orange;
}
.child3 {
background-color: black;
}
.child4 {
background-color: green;
}
.child5 {
background-color: blue;
}
.child6 {
background-color: red;
}
<div class="container">
<div class="child-element child1"></div>
<div class="child-element child2"></div>
<div class="child-element child3"></div>
<div class="child-element child4"></div>
<div class="child-element child5"></div>
<div class="child-element child6"></div>
</div>
Either you can provide a width to the parent element, else you can use float: left; with display: inline-block; and white-space: nowrap;
.container {
white-space: nowrap;
}
.child-element {
min-width: 200px;
display: inline-block;
height: 100px;
}
Demo
For the white-space of 4px between each element, you can use margin-left: -4px;
Demo 2
Instead of floating the children, set them to inline block and set white-space:nowrap on the container.
.container {
white-space:nowrap;
}
.child-element {
display:inline-block;
min-width: 200px;
height: 100px;
}
http://jsfiddle.net/x8sDp/24/
Just set the .container to display:table and the .child-elements to be display:table-cell and remove float:left from .child-element:
.container {
display: table;
}
.child-element {
min-width: 200px;
display: table-cell;
height: 100px;
}
DEMO
Adding a huge width to the container works
.container {
width: 999999px;
}
Though im not sure why you would want to do something like this, from a usability/interface point of view.
I have a problem with some divs. In short here is what I need: 2 divs with a certain width (same width) - one with float left and one with right, and a third div that takes all the remaining space. The divs are using display : inline-block to have them on same line.
I have tried this :
<div class="wrapper">
<div class="control leftControl"></div>
<div class="display"></div>
<div class="control rightControl"></div>
</div>
And here is my css:
.wrapper {
width: 100%;
height: 100%;
min-width: 960px;
background-color: #E8E8E8;
}
.control {
width: 10%;
height: 100%;
display: inline-block;
background-color: #ADADAD;
}
.leftControl {
float: left;
}
.rightControl {
float: right;
}
.display {
width: 80%;
height: 100%;
display: inline-block;
}
The problem is that using % on some resolution causes the last div (controlRight) to be moved on a new line.I can understand why and found that if i use 79% on display the divs display almost correctly (1% left unsued.)
It is clear to me that this is not a correct solution.
Any help is appreciated.
You can put all your elements float:left and your 100% will always fit: fiddle
HTML
<div class="control"></div>
<div class="display"></div>
<div class="control"></div>
CSS
.control {
width: 10%;
height: 200px;
background-color: green;
float:left;
}
.display {
width: 80%;
height: 200px;
background-color:blue;
float:left;
}
Putting everything on float left will simply push divs one by one on the right.