When I set the padding size for input field it automatically changed the size. It becomes bigger.
.container{
width: 150px;
}
.item label{
display: block;
width: 100%;
margin-bottom: 10px;
}
.from-item{
width: 100%;
}
input[type="text"]{
width: 100%;
padding: 5px;
}
JSFfiddle
You should think about putting this in your CSS:
* { box-sizing: border-box }
This alters the box model such that padding will not add to the size that an element occupies on the screen. It is, to my mind and the mind of many others, a much better model to work with:
http://www.paulirish.com/2012/box-sizing-border-box-ftw/
General info on the box model: http://css-tricks.com/the-css-box-model/
You can use box-sizing:border-box to solve your problem, but it is a css3 property. Thus incompatible with old browsers.
Another way to achive this is put a wrapper div around input & give padding to it.
<div class="ibox"><input type="text" class="from-item"></div>
.ibox{
padding: 5px;
}
input[type="text"]{
width: 100%;
}
Here is Demo link http://jsfiddle.net/aq8mP/1/
Related
I know this questions has already been answered before and I've read the topics :
Make div take all space left after another div
Expand div to take remaining width
Expand div to max width when floatleft is set
The magic of overflow hidden (external)
However I can't manage to implement them in my case or they simply don't seem to work as I try to have a fix width on the right and a flexible width on the left (unlike the above examples).
Here is my problem (which is fairly simple) : I have a form with a search field (left) and a span element (right). The span element has a fixed width and height. I want the input to fit the remaining left space.
form :
<div id="container">
<form>
<input type="search" />
<span class="submit"></span>
</form>
</div>
style.css :
#container {
width: 300px;
}
[type="search"] {
/* Positionning
* ------------ */
display: block;
height: 40px;
padding: 0px 10px;
vertical-align: top;
}
.submit {
/* Positionning
* ------------ */
display: block;
height: 40px;
width: 50px;
/* Styling
* ------- */
background-color: #CF0526;
}
From what I've read, I thought that a width: 100%; overflow: hidden on the input and a float: right on the span who be enough, sadly not. Here is a jsfiddle of my problem, hopefully it may help you.
EDIT: I changed the title from "left div" to "left input" as it may matter, especially since this solution does not work while it looks accurate for divs positionning.
You can try with the property calc like this:
input[type="search"] {
width: calc(100% - 40px);
margin:0;
padding:0;
height:30px;
float:left;
}
.submit {
float:left;
width: 40px;
height: 30px;
background-color: red;
}
The demo http://jsfiddle.net/SL3FB/10/ ... Maybe a problem the compatibility
Another solution using box.sizing who has more compatibility: http://jsfiddle.net/SL3FB/18/
You can substract the width from the span to the width from the textfield which is 100%.
Here is the fiddle http://jsfiddle.net/SL3FB/15/.
Code is like this:
width:calc(100% - 50px);
float:left;
Make 'em both float:left; to have a better result!
Hope this works for you.
Use CSS Tables
1) Set display: table-cell for both the input and the span
2) Set a fixed width on the span and (the trick:) width:100% on the input
FIDDLE
#container {
width: 300px;
border: 1px solid black;
}
form
{
display:table;
width: 100%;
}
.submit {
display:table-cell;
width: 40px;
height: 30px;
background-color: red;
}
input
{
width: 100%;
display:table-cell;
}
Does this work for you?
http://jsfiddle.net/SL3FB/4/
I've given your search a width of 85% so it fits up agains the red box.
.search {
width:85%;
}
Whenever I resize the browser, the 2nd div in .container positions below the first one.
<div class = "container">
<div class = "one"></div>
<div class = "two"></div>
</div>
The divs are really blank.
CSS
.container{
overflow: hidden;
width: 810px;
min-width: 810px;
}
.one,.two{
width: 300px;
height: 450px;
}
.one{float:left}
I just realized that, you are not floating the other element, this is causing it to shift down, you should use float: left; or right as it's a div so it will take up entire horizontal space, and hence it is pushed down.
Demo
.one, .two{
width: 300px;
height: 450px;
float:left; /* Float both elements */
background: #f00;
}
Alternative
You should use display: inline-block; and white-space: nowrap; to prevent the wrapping of the elements
Demo
This will gave you the same effect, the only thing is 4px white space, you can simply use
.two {
margin-left: -4px;
}
the above will fix the white space issue for you
Demo 2
Add this CSS. Demo.
.two {
margin-left: 300px;
}
PS: When works with float, you should clearfix.
Give your body a minimum width:
body {
min-width: 1110px;
}
Then, when the viewport gets smaller than 1110px the scrollbar will appear.
Note: if you add margin, padding or border to the divs, add it to the min-width of the body (or take some extra space).
Fiddle
I would like to have multiple divs with margins and below them one that fills up the rest of the space provided by the fixed size parent div.
EDIT: I am sorry, I should have mentioned that the container divs size is fixed and should not change at all.
EDIT2: SOLUTION.
I had tried overflow: hidden but missunderstood it and put it on on the child element and not the parent.
Hope this is you want http://jsfiddle.net/FR5Ud/33/
Use min-height so that your basic look of the page remains the same and it increases based on the content
#container {
float: left;
background-color: green;
width: 300px;
min-height: 300px; height
border-color: violet;
border-style: solid;
border-width: 10px;
}
#content {
background-color: blue;
min-height: 100px; height:auto
}
#toFillUp {
background-color: red;
/* that's what it should end up looking like.
However, what if the size of #content changes?
What if there are more content divs before that?
What if those have margins? */
min-height: 200px; height:auto
}
Demo http://jsfiddle.net/FR5Ud/25/
This is my CSS code;
#wrap {
width:50em;
max-width: 94%;
margin: 0 auto;
background-color:#fff;
}
#head {
width:50em;
height:10em;
max-width: 100%;
margin: 0 auto;
text-align:center;
position: relative;
}
#css-table {
display: table;
margin: 1em auto;
position: relative;
width:50em;
max-width: 100%;
}
#css-table .col {
display: table-cell;
width: 20em;
padding: 0px;
margin: 0 auto;
}
#css-table .col:nth-child(even) {
background: #fff;
}
#css-table .col:nth-child(odd) {
background: #fff;
border-right: 4px double #b5b5b5;
}
And my HTML code;
<div id="cont">
<div id="css-table">
<div class="col">123</div>
<div class="col">123</div>
</div>
</div>
When I scale the Firefox window, the table scales fine even down to 300px width viewport...just like I want to. But in Chrome, the table looks normal only when the viewport is wider than 50em. If I narrow the Chrome window, the table bleeds out on the right side of the wrap.
Is there a reason why is Chrome doing this?
Technically Chrome is following the rules because max-width should only apply to block elements.
From MSDN docs:
The min-width/max-width attributes apply to floating and absolutely
positioned block and inline-block elements, as well as some intrinsic
controls. They do not apply to non-replaced inline elements, such as
table rows and row/column groups. (A "replaced" element has intrinsic
dimensions, such as an img or textArea.)
The table (or in your case display:table) should technically not work or be supported. FF apparently obeys it fine, but you'll probably need to come up with another solution, either removing the display:table or the max-width.
max-width property
MSDN Doc
The solution I found was using table-layout: fixed and width: 100%
Create a div and give it a styling to display block and a max width. You may use traditional <table> and give it a styling of 100% width.
I was able to use a mixin(SASS) to fix the issue.
#mixin clearfix {
&::after{
content: "";
display: table;
clear: both;
}
}
I'm trying to develop a horizontal web page, with fixed height and variable width.
In order to get it, I need a row of floating <div>s to expand the <body> width.
|------------- body --------------| /* variable width */
|-div-| |-div-| |-div-| |-div-| /* fixed width */
The following code doesn't seem to work:
body{
height: 40px;
}
div{
width: 2000px;
height: 20px;
background: red;
margin: 10px;
float: left;
}
http://jsfiddle.net/7cS2R/12/
Is is possible to do so without using javascript?
Block elements expand to the full width of their parent-element's width. To make them respect their childrens with you can either declare:
display: inline-block;
or
position:absolute;
on your body-element.
EDIT: after you clarified your question - simply add the white-space declaration to your body:
white-space:nowrap;
Demo
Try this:
body{
height: 40px;
display: inline-block;
}
http://jsfiddle.net/7cS2R/6/