HTML
<div class="whole">
<div class="fst"></div>
<div class="sec"></div>
<div class="thd"></div>
</div>
CSS
.whole {
width: 100%;
height: 20px;
}
.whole div {
height: 20px;
display: inline-block;
position: relative;
}
.fst {
float: left;
width: 20px;
background: blue;
}
.sec {
background: red;
}
.thd {
float: right;
width: 20px;
background: blue;
}
Is there a way to stretch the div.sec to fit with the area left by div.fst and div.thd in any screen size? The width of div.fst and div.thd is fix in pixel.
Is there any solution with only css?
Really appreciate your helps!
Please see my fiddle http://jsfiddle.net/vHHcf/
This seems to be what you want.
jsFiddle example
Given that you said .fst and .thd have fixed widths, you can use calc() to subtract the 40px value from 100%.
.sec { width:calc(100% - 40px); }
Updated CSS
.whole {
width: 100%;
height: 20px;
}
.whole div {
height: 20px;
display: inline-block;
position: relative;
}
.fst {
float: left;
width: 20px;
background: blue;
}
.sec {
background: red;
width:calc(100% - 40px);
}
.thd {
float: right;
width: 20px;
background: blue;
}
Related
I have an div container namend "content". This container got a width of 500px;.
Inside this div are two other divs. One div is called "right", with fixed width of 300px;. The other container ("left") should fill the rest width. Now I can give him a width of 200px, but when I resize the window the width does not change of the "left" container. I want that only the width of the second container "left" change, maybe with a % width?
And when I resize the window it should look like this:
Here is the code:
*{
margin: 0px;
padding: 0px;
}
.content{
width: 500px;
border: 1px solid black;
padding: 5px;
}
.left{
float: left;
width: 300px;
height: 20px;
background-color: blue;
}
.right{
float: right;
width: 50%;
height: 20px;
background-color: red;
}
.clearBoth{
clear: both;
}
<div class="content">
<div class="left">
</div>
<div class="right">
</div>
<div class="clearBoth"></div>
</div>
JFiddle
You should Change Left Width size To 60%
.left{float: left;width: 60%;height: 20px;background-color: blue;}
.right{float: right; width: 40%;height: 20px; background-color: red;}
I think, this will be the best answer for you. please check the given below code snippet.
*{
margin: 0px;
padding: 0px;
}
.content{
width: 100%;
}
.left{
float: left;
width: 300px;
height: 100px;
background-color: blue;
}
.right{
float: right;
width: calc(100% - 300px);width: -webkit-calc(100% - 300px);width: -moz-calc(100% - 300px);
height: 100px;
background-color: red;
}
.clearBoth{
clear: both;
}
<div class="content">
<div class="left">
</div>
<div class="right">
</div>
<div class="clearBoth"></div>
</div>
You want something like this ? You have to resize the window to see the change.
I use calc() function in CSS :
.right{
float: left;
width: calc(100% - 310px);
height: 20px;
margin-left: 10px;
background-color: red;
}
I also use a fluid width for the main container.
See this fiddle
http://jsfiddle.net/7XD8s/300/
.left {
float: left;
width: 300px;
height: 20px;
background-color: blue;
}
.right {
display: block;
margin-left: 300px;
height: 20px;
background-color: red;
}
No need of calc
http://jsfiddle.net/7XD8s/303/
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.content{
border: 1px solid black;
padding: 5px;
}
.left{
float: left;
width: 300px;
height: 20px;
margin-right: 10px;
background-color: blue;
}
.right{
overflow: hidden;
height: 20px;
background-color: red;
}
.clearBoth{
clear: both;
}
Following code will keep the width of right container fixed at 300px. Left container will occupy rest of the space with 10px margin on its right side.
Please note, total width of content container is 500px.
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.content{
border: 1px solid black;
width: 500px;
padding: 5px;
}
.left{
float: left;
width: calc(100% - 310px);
height: 20px;
margin-right: 10px;
background-color: blue;
}
.right{
float: right;
margin: 0px;
width: 300px;
height: 20px;
background-color: red;
}
.clearBoth{
clear: both;
}
can somebody please point me to a solution for this?
HTML
<div class="container">
<input type="text" class="left" />
<button class="right">Some button</button>
</div>
CSS
.container {
display: table;
width: 100%;
background-color: red;
}
.left, .right {
display: table-cell;
}
.right { width: 100px; }
Here is code pen sample: http://codepen.io/be-codified/pen/qdRRBY
Input field should be stretchable, button should be fixed positioned on right.
Thank you in advance.
// edit
I can not use table tag because layout needs to be responsive.
I gave the input a width of calc(100% - 110px) and the button a float:right which resulted in the following. Is that what you need? The input type you want to use is, as far as I know, not stretchable by the user.
CSS
.container {
display: table;
width: 100%;
background-color: red;
}
.left, .right {
display: table-cell;
}
.right {
width: 100px;
float: right;
}
input.left {
width: calc(100% - 110px); //This makes sure the input area is as wide as possible, while also leaving space for the button. Play with the exact measurements to get what you need.
}
I suggest you to put the form elements into <div>, so don't change their default display properties, and then set the left input box to 100% width as needed.
.container {
display: table;
width: 100%;
background-color: red;
}
.left, .right {
display: table-cell;
}
.right {
width: 100px;
}
.left input {
width: 100%;
box-sizing: border-box;
}
<div class="container">
<div class="left"><input type="text" /></div>
<div class="right"><button>Some button</button></div>
</div>
In fact, both left and right can have dynamic width, so right column always get the minimum width based on the button length.
.container {
display: table;
width: 100%;
background-color: red;
}
.left, .right {
display: table-cell;
white-space: nowrap;
}
.left {
width: 100%;
}
.left input {
width: 100%;
box-sizing: border-box;
}
<div class="container">
<div class="left"><input type="text" /></div>
<div class="right"><button>Some button</button></div>
</div>
Here is full responsive solution.
HTML
<div class="container">
<div class="input-flied-box">
<form>
<input type="text" required="required" placeholder="Right Some thing" />
<button type="submit" class="submit-button">Send</button>
</form>
</div>
</div>
CSS
/* RESPONSIVE CSS */
.container{
width: 100%;
}
.input-flied-box{
width: 100%;
}
.input-flied-box input{
padding: 6px 12px 6px 12px;
}
.submit-button{
top: inherit;
right: inherit;
position: relative;
margin-bottom: 15px;
}
#media (min-width: 768px){
.container{
width: 750px;
}
.input-flied-box{
width: 600px;
}
.input-flied-box input{
padding: 6px 101px 6px 12px;
}
.submit-button{
top: 14px;
right: 14px;
position: absolute;
margin-bottom: 0;
}
}
#media (min-width: 992px){
.container{
width: 960px;
}
}
#media (min-width: 1200px){
.container{
width: 1170px;
}
}
/* RESPONSIVE CSS END */
*:after,
*:before{
box-sizing: border-box;
}
*{
box-sizing: border-box;
}
.container:after,
.container:before{
display: table;
content: " ";
clear: both;
}
.container{
margin-left: auto;
margin-right: auto;
}
.input-flied-box {
background-color: #666666;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
.input-flied-box input {
background-color: #ffffff;
border: 1px solid #cccccc;
height: 40px;
margin-bottom: 15px;
margin-top: 15px;
width: 100%;
border-radius: 4px;
}
.submit-button {
background-color: #fc3850;
border: medium none;
border-radius: 4px;
color: #ffffff;
font-family: Arial;
line-height: 1;
padding: 13px 30px;
text-transform: uppercase;
}
https://jsfiddle.net/bL3wgrv9/
I have three divs in a row, all with display: inline-block. The left one (green) contains an image. Because of that image, two other divs (blue and yellow) and the div below them (grey) are all positioned lower by height of the image.
Why does an image in one div affect positions of other divs in an inline-block row? How can I avoid it?
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background: black;
}
div {
display: inline-block;
width: 300px;
height: 70px;
}
div.wrapper {
width: 900px;
height: 100px;
margin: 0 auto;
background: red;
display: block;
font-size: 0;
}
div.div1 {
background: green;
}
div.div2 {
background: blue;
}
div.div3 {
background: yellow;
}
div.div4 {
display: block;
width: 900px;
height: 30px;
background: grey;
}
<body>
<div class="wrapper">
<div class="div1">
<img src="" width="25px" height="25px">
</div>
<div class="div2">b</div>
<div class="div3">c</div>
<div class="div4">d</div>
</div>
</body>
Try float:left; display:block; instead of inline-block for div's: Demo
CSS:
.div1, .div2,.div3 {
display: block;
float:left;
width: 300px;
height: 70px;
}
There already is discussons about inline-block-elementes still have weird heights (like here): Why does inline-block cause this div to have height?
Honestly, instead of solving those, i would adress this issue with floats:
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background: black;
}
div {
/*display: inline-block;*/ /* Not necessary when using floats! */
width: 300px;
height: 70px;
}
div.wrapper {
width: 900px;
height: 100px;
margin: 0 auto;
background: red;
display: block;
font-size: 0;
}
div.div1 {
background: green;
float: left; /* Added float left here */
}
div.div2 {
background: blue;
float: left; /* Added float left here */
}
div.div3 {
background: yellow;
float: left; /* Added float left here */
}
div.div4 {
display: block;
width: 900px;
height: 30px;
background: grey;
}
Please see http://jsfiddle.net/jr32V/ which contains the following:
CSS:
body {
font-size: 2em;
color: white;
background-color: grey;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.topmenu, .main {
width: 500px;
margin: 0 auto;
}
.topmenu {
background-color: red;
}
.main {
background-color: black;
}
.mainpicker {
margin-right: 20px;
float: left;
background-color: green;
}
.maincontent {
width: 600px; /*get rid of this line to see how it should look*/
float: left;
background-color: blue;
}
HTML:
<body>
<div class="topmenu">
A whole bunch of menu stuff
</div>
<div class="main">
<div class="mainpicker">
Picker
</div>
<div class="maincontent">
Content on right of picker
</div>
</div>
</body>
I would like the "maincontent" div to be exactly to the right of "mainpicker", just as it seems if you remove the width attribute on it.
Note that the width attribute is just to illustrate the point, in actual use the width may go beyond the container by any amount.
Also note that I do not want the parent container ("main") to exactly expand, since it must begin at the same left position as "topmenu". i.e. that they both have the same width vis-a-vis centering/margin-auto calculation
I think this is what you are looking for. Add width and margin to your .main class and remove float:left; from your .maincontent class. I updated your fiddle
.main {
background-color: black;
width:500px;
margin:0 auto;
}
.mainpicker {
margin-right: 20px;
float: left;
background-color: green;
width:100px;
}
.maincontent {
width: 600px;
background-color: blue;
}
EDIT:
If you want to float both children you have to stay inside the given width of you parent class. So your code would look like this:
.topmenu {
background-color: red;
width:500px;
margin:0 auto;
}
.main {
width:500px;
margin:0 auto;
}
.mainpicker {
background-color: green;
width:100px;
float:left;
}
.maincontent {
background-color: orange;
width:400px;
float:left;
}
You can watch it here
The following code seemed to do the trick, even though the result doesn't look pleasing to the eye.
.mainpicker {
margin-right: 20px;
float: left;
background-color: green;
display: inline-block;
position: relative;
}
.maincontent {
width: 600px;
float: left;
background-color: blue;
display: inline-block;
position: absolute;
width: auto;
}
DEMO: http://jsfiddle.net/thauwa/jr32V/5/
http://jsfiddle.net/jr32V/6/
i put box-sizing: border-box; and width as percentages to mainpicker and maincontent
.mainpicker {
float: left;
background-color: green;
width: 20%;
box-sizing: border-box;
}
.maincontent {
float: left;
background-color: blue;
width: 80%;
box-sizing: border-box;
}
does this help you?
html
<div id="container">
<div id="one">One</div>
<div id="two">Two</div>
</div>
css
#container {
width: 500px;
height: 500px;
background-color: red;
}
#one {
width: 340px;
height: 100px;
margin: 20px;
background-color: green;
float: left;
}
#two {
width: 100px;
height: 100px;
margin: 20px 20px 20px 0px;
background-color: blue;
float: right;
}
This is what i want to do: http://jsfiddle.net/p4ZAd/
I want to make a margin of 20px between the two divs and this is how far Iv'e gotten, but is it possible to do it any other way?
What i would idealy like is to remove the width on the "#one" completely and just have it be maximum size with a margin towards the "#two".
LIke this
working fiddle
css
*{
margin:0;
padding:0;
}
#container {
width: 500px;
height: 500px;
background-color: red;
display:table;
}
#one {
background-color: green;
display:table-cell;
}
#two {
background-color: blue;
display:table-cell;
}
You can use table and table-cell display types to mimic how a table works. Then use border-spacing to accomplish the margin in-between cells.
HTML:
<div id="container">
<div id="one">One</div>
<div id="two">Two</div>
</div>
CSS:
#container {
display: table;
width: 500px;
height: 400px;
background-color: red;
border-spacing: 20px;
}
#one {
display: table-cell;
background-color: green;
}
#two {
display: table-cell;
width: 100px;
background-color: blue;
}
JSFiddle here
Here's a list of browsers that support display: table;
You can set padding on #container and then set negative right margin for #two. Example:
#container {
width: 360px;
height: 500px;
background-color: red;
padding: 20px 140px 20px 20px;
}
#one {
height: 100px;
background-color: green;
float: left;
width: 100%;
}
#two {
width: 100px;
height: 100px;
margin: 0 -120px 0 0;
background-color: blue;
float: right;
}
Working sample: http://jsfiddle.net/SytvY/1/