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>
Related
I am trying to place two divs of width 50% each but somehow its not appearing on same row, but if I do 49% it stacks in same row. Can anyone please tell me what I am doing wrong with the code(more interested to know the cause than solution).
CSS -
* {
padding: 0;
margin: 0;
}
.wrapper {
width: 100%;
}
.left-c {
width: 50%;
background: #3EF00C;
display: inline-block;
}
.right-c {
width: 50%;
background: #2E4E6E;
display: inline-block;
}
HTML -
<div class="wrapper">
<div class="left-c">
<p>LEFT ----- This is going to be some random text placed in a a left container inside the wrapper. I hope this text will suffice the requirement.</p>
</div>
<div class="right-c">
<p>This is going to be some random text placed in a a right container inside the wrapper. I hope this text will suffice the requirement. ----- RIGHT</p>
</div>
</div>
JS Fiddle - https://jsfiddle.net/no0chhty/1/
This is a classic issue with elements of type inline-block. Unfortunately, they take document whitespace into account, including blank characters. There are multiple solutions for this, but the one I tend to use involve setting their parent element to font-size: 0 and then resetting the font size on the inline blocks to your desired value.
Read more about this here: https://css-tricks.com/fighting-the-space-between-inline-block-elements/
Add float:left; to the class "left-c"
.left-c {
width: 50%;
background: #3EF00C;
display: inline-block;
float:left;
}
Please check out the FIDDLE
Change display: inline-block
to display: table-cell
for both sections like so:
.left-c {
width: 50%;
background: #3EF00C;
display: table-cell;
}
.right-c {
width: 50%;
/* 49% works well */
background: #2E4E6E;
display: table-cell;
}
Here is the JSFiddle demo
replace this css
* {
padding: 0;
margin: 0;
}
.wrapper {
width: 100%;
display:flex
}
.left-c {
width: 50%;
background: #3EF00C;
}
.right-c {
width: 50%;
background: #2E4E6E;
}
hi instead of inline block you can you float or flex like this:
link here https://jsfiddle.net/JentiDabhi/r9s3z07e/
CSS
.left-c {
background: #3ef00c none repeat scroll 0 0;
float: left;
width: 50%;
}
<div class="wrapper">
<div class="left-c"><p></p></div><!----><div class="right-c"><p></p></div>
</div>
putting comment between closing tag of left-c and opening tag of right-c will solve the issue.
Example
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>
I have an inline div abc and another inline div def. abc's width is 100px. How can I let def appear on the right while def's width is its parent's width minus 100px?
I cannot do width:100%; since def would appears next line.
https://jsfiddle.net/h7k87vwx/
<div class="abc">abc</div>
<div class="def">def</div>
<div class="ghi">ghi</div>
.abc {
display:inline-block;
background-color:lightblue;
width: 100px;
}
.def {
display:inline-block;
background-color: lightyellow;
width: 200px;
}
HTML
<div class="abc">abc</div><div class="def">def</div><div class="ghi">ghi</div>
CSS
.def {
display: inline-block;
background-color: lightyellow;
width: calc(100% - 100px);
}
DEMO: https://jsfiddle.net/h7k87vwx/6/
Divs are lined up together to eliminate rendered white space. For an explanation see my answer here:
inline-block boxes not fitting in their container
Here's an old trick that was commonly used in holy grail layout:
.abc {
float: left;
background-color:lightblue;
width: 100px;
}
.def {
padding-left: 100px; /* margin-left also applies */
background-color: lightyellow;
}
Check out the fiddle.
Inline-block elements will have an empty space between them, one way to address this is to give them a negative margin. That will make it not be placed below. Another detail would be to keep an empty space in between the different values and the operator with calc() otherwise it will not work :
https://jsfiddle.net/t0ecucgw/
.abc {
display: inline-block;
background-color: lightblue;
width: 100px;
}
.def {
display: inline-block;
background-color: blue;
width: calc(100% - 100px);
margin-left: -4px;
}
I think you want to do:
.def {
width: calc(100% - 100px)
}
.def {
float:right;
background-color: lightyellow;
width: 200px;
}
link
I have the following:
<div class='container-main'>
<div class='container-inner'>
<div class='clickable-box'>
stuff
</div>
<div class='clickable-box'>
stuff
</div>
<div class='clickable-box'>
stuff
</div>
</div>
</div>
.container-main {
width: 100%;
}
.container-inner {
width: 90%;
}
.clickable-box {
width: 300px;
height: 300px;
/* ???? */
}
I'm trying to make it so the clickable box will be centered inside the inner container IF there isn't enough room for another clickable box next to it.
BUT if there is enough width (600px +) then they create 2 columns (which are together centered inside the inner container), and if theres more room even (900px +) then 3 columns etc...
in other words, when I start out with a window of width 500px, it should show 1 column of boxes all lined up under each other. As I drag the window out, the box should stay in the center until theres enough room for another to go next to it, and they create 2 columns instead, and so on.
But I don't want the column to float left or right while I'm dragging the window and leave a big empty space
Try this CSS:
.container-main {
width: 100%;
}
.container-inner {
width: 99%;
text-align:center
}
.clickable-box {
display: inline-block;
width: 32%;
margin: 0 auto;
}
I think what you're looking for is to set clickable-box to display: inline-block. Setting display: inline-block essentially makes the div act like text in regards to text-align rules, but still keeps some block properties as well. It's pretty sweet.
HTML
<div class='container-main'>
<div class='container-inner'>
<div class='clickable-box'>
stuff
</div>
<div class='clickable-box'>
stuff
</div>
<div class='clickable-box'>
stuff
</div>
</div>
</div>
CSS
.container-main {
background-color: red;
text-align: center;
}
.container-inner {
width: 90%;
}
.clickable-box {
background-color: blue;
width: 300px;
display: inline-block;
}
Here's a fiddle to demo it!
display:inline-block should be the best solution, this will display clickable boxes in one line if there is space for them:
.clickable-box {
width: 300px;
height: 300px;
display:inline-block;
}
Also add text-align:center to parent div in order for clickable boxes to be centered
.container-inner {
width: 90%;
text-align:center;
}
I think this should do it. I modified the CSS a bit to add some borders to see what the boxes look like. You could certainly remove those borders.
Fiddle Demo
.container-main {
width: 100%;
}
.container-inner {
width: 90%;
border:3px solid #454;
text-align:center;
}
.clickable-box {
width: 300px;
height: 300px;
border:1px solid #000;
margin:0 auto;
display:inline-block;
}
I'd use float rules because they can push down the boxes that do not fit. For instance, float:left will get you at least two boxes on a 1096px. display:inline might have issues on browser rendering.
.container-main {
width: 100%;
}
.container-inner {
width: 90%;
}
.clickable-box {
width: 300px;
height: 300px;
float:left; // right there.
}
I know there is a lot of similair questions but none of them helped me to solve this. I have very simple setup:
.wrapper {
width: 100%;
display: table;
}
.dontBreakmyLine {
display: table-cell;
}
.iCanUseWhatIsLeft {
display: table-cell;
}
<div class="wrapper">
<div class="dontBreakmyLine">
Some generated text
</div>
<div class="iCanUseWhatIsLeft">
Another generated text
</div>
</div>
Now I need to stretch first div to content and let the another one take remaining space. I know that maximum width of generated text in first div will be 300px, but max-width dont work here as I would like. Any suggestions please?
There is probably a better way, but if you're okay with the line not breaking you can set the left cell to a small width and set the text not to break on whitespaces
Here is a fiddle
http://jsfiddle.net/hqWaU/
.wrapper {
width: 100%;
display: table;
}
.dontBreakmyLine {
display: table-cell;
width: 1px;
white-space:nowrap;
}
.iCanUseWhatIsLeft {
display: table-cell;
}
div {
border: 1px solid silver;
}
A possible solution without display: table; would be to set both boxes to position: relative;, float the left and stretch the right one with right: 0px; (DEMO).
.wrapper {
width: 100%;
}
.dontBreakmyLine {
max-width: 300px;
float: left;
position: relative;
z-index: 2;
}
.iCanUseWhatIsLeft {
position: relative;
right: 0px;
z-index: 1;
}
The text will break as soon as it's longer than 300px but If it won't be longer it doesn't matter. Add display: table-cell back to the boxes if you don't want the right text flow under the left text.
If you still wan't to prevent the line-break you can use white-space:nowrap; maybe even in combination with overflow: hidden; (DEMO).