I am trying to stretch an input text field to the available width (minus margins). This does not work. Why?
<div style="background:yellow; padding:5px;">
<input id="test-input" type="text" />
</div>
<style type="text/css">
* { box-sizing: border-box; }
#test-input {
margin-left: 10px;
margin-right: 10px;
width: auto;
display: block;
border: 1px black solid;
}
</style>
You could use CSS3 calc() function to calculate the width excluding the left/right margins, as follows:
#test-input {
margin-left: 10px;
margin-right: 10px;
width: calc(100% - 20px); /* Exclude left/right margins */
display: block;
}
WORKING DEMO
Or use padding for the container instead of using margin for the input:
<div class="parent">
<input id="test-input" type="text" />
</div>
.parent {
padding: 5px 15px;
}
#test-input {
width: 100%;
display: block;
}
WORKING DEMO
Related
Designing the facebook login page for practise using only html and css.But Here I'm facing some problem.Don't know what it is.Here I want to decrease the top margin of class "loginArea" but cant do it.So the facebook logo is okey but the login area is totally different from the genuine facebook page.
body {
margin: 0;
padding: 0;
font-family: arial;
}
.logoArea {
height: 35px;
width: 100px;
background: url(media/6cVHHozUQSt.png) no-repeat;
display: inline-block;
overflow: hidden;
margin: 40px 40px 0 200px;
}
.mainArea {
max-width: 1600px;
margin: auto;
}
header.mainHeader:after {
content: "";
display: block;
clear: both;
}
header.mainHeader {
background: #3a5797;
padding: 10px 0;
color: #fff;
}
.mainHeader .logoArea {
width: 50%;
float: left;
}
.mainHeader .loginArea {
float: right;
width: 50%;
}
.loginArea .userName,
.loginArea .password {
width: 40%;
float: left;
}
.loginArea input[type="text"],
.loginArea input[type="password"] {
width: 60%;
padding: 2px;
border-width: 1px;
border-color: #29487d;
margin-bottom: 5px;
}
.loginArea .submitButton {
width: 20%;
float: left;
}
.loginArea label {
font-size: 12px;
}
label[for="keepLogin"],
.loginArea a {
font-size: 12px;
color: #9CABC6;
}
#keepLogin {
margin: 0;
}
.submitButton input {
background: #3B5998;
color: #fff;
font-weight: bold;
margin-top: 20px;
border-width: 1px;
border-color: #29487d;
padding: 5px;
}
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Facebook- Log In or Sign Up</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<header class="mainHeader">
<div class="mainArea">
<div class="logoArea">
<img id="logo" src="media/6cVHHozUQSt.png" alt="" />
</div>
<div class="loginArea">
<form action="#">
<div class="userName">
<label for="user">Email or Phone </label> <br/>
<input type="text" id="user" /><br/>
<input type="checkbox" id="keepLogin" />
<label for="keepLogin"> Keep me Logged In</label>
</div>
<div class="password">
<label for="password">Password </label><br/>
<input type="password" id="password" /><br/>
Forgotten you password?
</div>
<div class="submitButton">
<input type="submit" value="Log In" />
</div>
</form>
</div>
</div>
</header>
</body>
</html>
Remove the width or margin from .mainHeader .logoArea (or reduce it), so it does not block too much room.
Always be aware that the space an element actually uses is height/width + padding + margin + border, so in your case, the actual width the element takes is 50% plus 240px for the margins.
In .loginArea class reduce top margin to 0 like this. Hope this helps you.
margin: 0 40px 0 200px;
your problem is the margin for .logoArea so you could set box-sizing to border-box and instead of margin use padding.
The default value for box-sizing is content-box:
This is the initial and default value as specified by the CSS standard. The width and height properties are measured including only the content, but not the padding, border or margin. Note: Padding, border & margin will be outside of the box e.g. IF .box {width: 350px;} THEN you apply {border: 10px solid black;} RESULT {rendered in the browser} a box of width: 370px.
So simply the dimension of element is calculated as, width = width of the content, and height = height of the content (excluding the values of border and padding).
so two ways of solving your issue:
1. remove the margin
2. set box-sizing to border-box + exchange margin with padding
pls check the box model and box-sizing for further infos :)
https://www.w3schools.com/css/css_boxmodel.asp
https://developer.mozilla.org/en/docs/Web/CSS/box-sizing
first of all at top place,
*{
box-sizing: border-box;
}
then change the margin in .logoArea to padding.
.logoArea {
height: 35px;
width: 100px;
background: url(media/6cVHHozUQSt.png) no-repeat;
display: inline-block;
overflow: hidden;
padding: 10px 40px 0 45px;
}
I'm working on some HTML where some divs are all lined up when the screen is wide, then they stack and float left or right when the screen is small.
They have some space above and below when the screen is wide, but the problem is that top and bottom margin seems to disappear when the screen is thinner and they stack. When I inspect the element in Firefox, it says the outer divs are smaller than the content, which I'm guessing has something to do with the problem.
Here's a jsfiddle of my code. Change the Result window width to see it change.
Here's the code
<div id="controls">
<div id="control_left">
<div id="play_button" class="button">play</div>
<div id="step_button" class="button">step</div>
</div>
<div id="control_right">
<div id="stop_button" class="button">stop</div>
<div id="restart_button" class="button">restart</div>
</div>
<br/>
</div>
<div id="instruction1" class="instruction top_instruction">
<div class="instructionNumber"></div>
<div class="instructionType">
<FORM NAME="myform">
<SELECT NAME="mylist">
<OPTION VALUE="m1">VAL1
<OPTION VALUE="m2">VAL2
<OPTION VALUE="m3">VAL3
</SELECT>
</FORM>
</div>
<input class="reg" type="text" />
<input class="reg" type="text" />
<input class="reg" type="text" />
</div>
#play_button {
float: left;
}
#step_button {
float: right;
}
#stop_button {
float: left;
}
#restart_button {
float: right;
}
.button {
text-align: center;
width: 45%;
background-color: #aaa;
cursor: pointer;
box-sizing: border-box;
}
#controls {
margin-top: 5px;
margin-bottom: 5px;
box-sizing: border-box;
height: auto;
width: auto;
}
#control_left {
box-sizing: border-box;
height: auto;
width: auto;
}
#control_right {
box-sizing: border-box;
height: auto;
width: auto;
}
#media screen and (min-width: 600px) {
#control_left {
float: left;
width: 45%;
}
#control_right {
float: right;
width: 45%;
}
}
.instruction{
width: 100%;
font-family:courier;
font-weight:bold;
margin-right: auto;
margin-left: auto;
border-right: 2px solid #000000;
border-left: 2px solid #000000;
border-bottom: 2px solid #000000;
display: inline-block;
}
.top_instruction{
border-top: 2px solid #000;
}
How do I get space below beneath the controls div, and beneath each button when they stack?
Just give the div a margin.
div {
margin:2%;
}
Demo
more apt will be applying margin for the button class
.button{
margin:2%;
}
add the margin attribute to the button class
.button {
text-align: center;
/*border-radius: 1%;*/
width: 45%;
background-color: #aaa;
cursor: pointer;
box-sizing: border-box;
margin-top: 5px;
margin-bottom: 5px;
}
You can use 'margin' to create space between buttons as they stack. Add this line off CSS to your buttons.
.button {
margin: 2%; /*you can increase or decrease this percentage*/
}
This will add space between your buttons.
I am trying to make a website navbar using divs instead of the usual lists. The divs are inline-blocks and on hover, the navbar expands. This should cause all the inner divs to expand (height:100%), while retaining centered text. I want to use only html and css.
One way is to set line-height and use vertical-align:middle. But since the div expands vertically in a dynamic manner, I cannot give a static value to line-height. I tried using line-height:100%, but that doesn't seem to help!
The html:
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>
<div id="headContainer">
<div id="logo"></div>
<div id="rightBar">
<div class="navelement">HOME</div>
<div class="navelement">HOME</div>
<div class="navelement">HOME</div>
<div class="navelement">HOME</div>
</div>
</div>
</body>
The Css:
* {
margin: 0;
padding: 0;
}
#headContainer {
height: 80px;
width: 100%;
background-color: white;
border: 5px solid red;
}
#headContainer:hover {
height: 100px; /*Dynamically change navbar height on hover, thus changing the height of all children*/
}
#rightBar {
line-height:100%;
display: inline-block;
width:80%;
height: 100%;
border: 5px solid blue;
vertical-align: middle;
}
.navelement{
display: inline-block;
height: 100%;
border:2px solid cyan;
}
The JSFIDDLE:
http://jsfiddle.net/GBz3s/1/
If you're using a precise height for your nav, then you can use a hack with padding by declaring the height, floating the divs, doing some math, and making adjustments accordingly. You can see an updated fiddle here: http://jsfiddle.net/Perry_/GBz3s/3/
.navelement{
float: left;
width: 24.25%;
border:2px solid cyan;
position: relative;
height: 70px;
padding: 25px 0 0 0;
}
#rightBar:hover .navelement {
height: 90px;
padding: 45px 0 0 0;
}
You can do it like this
you need to give display: inline-table; to .navelement and
display: table-cell; vertical-align: middle; to .navelement a
CSS
.navelement{
display: inline-table;
height: 100%;
border:2px solid cyan;
}
.navelement a {
display: table-cell;
vertical-align: middle;
}
I've inserted an <input type=text /> to the .searchbox div, but it's overflowing out of the body from the right because of the padding. How can I fix this?
.searchbox {
width: 100%;
height: 40px;
background-color:#0099FF;
padding-left: 20px;
padding-right: 20px;
}
.inputb {
width: 100%;
}
#media (max-width: 490px) {
.searchbox {
padding-left: 5px;
padding-right: 5px;
}
}
HTML:
<div class="searchbox">
<input class="inputb" type="text" />
</div>
http://jsfiddle.net/brendan34/yLH7L/4/
Add box-sizing: border-box. It makes width be computed for the border-box, instead of the content-box. Fiddle. It's support is good enough, and forcing old browsers into quirks mode will make all elements render as border-box. (It's a good idea to give old browsers very minimal CSS, anyway. If you do that, quirks mode shouldn't break much)
.searchbox {
box-sizing: border-box;
width: 100%;
height: 40px;
background-color:#0099FF;
padding-left: 20px;
padding-right: 20px;
}
you can use calc function in css. chek this http://jsfiddle.net/yLH7L/6/
Add box-sizing:border-box; to your code and ready only works in recent browsers is css3
.searchbox {
width: 100%;
height: 40px;
background-color:#0099FF;
padding-left: 20px;
padding-right: 20px;
box-sizing:border-box; --- take look a this
}
if you need full cross browser solution take a look at CSS Div width percentage and padding without breaking layout
complete explanation of box-sizing http://css-tricks.com/box-sizing/
Try this. It uses percentage sizes.
.searchbox {
width: 100%;
height: 40px;
background-color:#0099FF;
padding-left: 2%;
padding-right: 2%;
}
.inputb {
width: 98%;
}
#media (max-width: 490px) {
.searchbox {
padding-left: 1%;
padding-right: 1%;
}
}
Try this
.searchbox {
width: 96%;
height: 40px;
background-color:#0099FF;
padding: 0 2%;
}
.inputb {
width: 100%;
margin:0;
padding:0;
}
#media (max-width: 490px) {
.searchbox {
width:94%;
padding-left: 3%;
padding-right:3%;
}
}
Use a <div> with negative margins
For any child element, the maximum natural width cannot exceed that of the parent's content width — even if the parent has box-sizing: border-box defined.
On typical block-level elements and most elements defined with display: block, you can stretch the child by giving it negative margins equivalent to the padding of the parent container.
This only works if the element has no defined width or it has width: auto explicitly defined. Defining width: 100% is insufficient.
For some reason there is no way to accomplish this directly on an input even if you have defined display: block (this applies to textarea and possibly other form elements as well).
I suspect this is because width: auto defers to the element's default browser-defined width which is calculated uniquely for input elements.
You can, however nest the input within a container that has no padding of its own to which you've also applied the negative margins.
Consider the following examples:
* { box-sizing: border-box } /* FTW */
h2 {
margin: 0;
padding: 0;
line-height: 1;
}
.myuncoolparentdiv {
position: relative;
margin: 10px;
padding: 10px 20px;
background-color:#0099FF;
}
.mycoolparentdiv {
margin: 0 -20px;
}
.mybadinputtoo {
display: block;
width: 100%;
margin: 0 -20px;
}
.myreluctantinput {
display: block;
position: absolute;
width: 100%;
right: 0;
left: 0;
}
.mycoolinput {
width: 100%;
}
.mycooldiv {
margin: 0 -20px;
padding: 3px;
background-color: tomato;
border: 1px solid gold;
}
.mybaddiv {
width: 100%;
margin: 0 -20px;
padding: 3px;
background-color: tomato;
border: 1px solid gold;
}
<div class="myuncoolparentdiv">
<div class="mybaddiv">
My Bad Div has width: 100%;
</div>
<h2>Other Content</h2>
</div>
<div class="myuncoolparentdiv">
<div class="mycooldiv">
My Cool Div has no defined width (~ width: auto;)
</div>
<h2>Other Content</h2>
</div>
<div class="myuncoolparentdiv">
<input class="mybadinput" type="text" value="My Bad Input has width: auto;" />
<h2>Other Content</h2>
</div>
<div class="myuncoolparentdiv">
<input class="mybadinputtoo" type="text" value="My Bad Input has width: 100%;" />
<h2>Other Content</h2>
</div>
<div class="myuncoolparentdiv">
<input class="myreluctantinput" type="text" value="My Reluctant Input has position: absolute;" />
<h2>Other Content</h2>
</div>
<div class="myuncoolparentdiv">
<div class="mycoolparentdiv">
<input class="mycoolinput" type="text" value="My Cool Input has width: 100% and a cool parent div" />
</div>
<h2>Other Content</h2>
</div>
I am trying to make the label and input field appear on the same line, with a variable width input field that will expand based on the space available
http://jsfiddle.net/chovy/WcQ6J/
<div class="clearfix">
<aside>foo</aside>
<span><input type="text" value="Enter text" /></span>
</div>
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
div {
border: 1px solid red;
}
aside {
display: block;
width: 100px;
background: #eee;
float: left;
}
span {
display: block;
width: 100%;
background: #ccc;
}
input {
width: 100%;
box-sizing: border-box;
border: 1px solid #000;
}
It works fine with a span, but when I add input it wraps to next line.
Here is some whacky solution. I honestly don't really understand why this works. I had it in an old codepen. Good luck!
http://jsfiddle.net/sheriffderek/DD73r/
HTML
<div class="container">
<div class="label-w">
<label for="your-input">your label</label>
</div>
<div class="input-w">
<input name="your-input" placeholder="your stuff" />
</div>
</div> <!-- .container -->
CSS
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.container {
width: 100%;
float: left;
height: 2em;
}
.label-w {
width: 8em;
height: 100%;
float: left;
border: 1px solid red;
line-height: 2em;
}
.input-w {
float: none; /* key */
width: auto; /* key */
height: 100%;
overflow: hidden; /* key */
border: 1px solid orange;
}
.input-w input {
width: 100%;
height: 100%;
}
You could use the CSS calc property to determine the width minus the borders and aside width:
input {
width: calc(100% - 102px); /* 100% minus (aside width (100px) + border width (2px)) */
box-sizing: border-box;
border: 1px solid #000;
}
FIDDLE
You could use display: table-*:
div {
display: table;
width: 100%;
background-color: #ccc;
}
aside {
display: table-cell;
width: 100px;
background: #eee;
}
span {
display: table-cell;
background: #bbb;
}
input {
display: block;
width: 100%;
background-color: #ddd;
}
http://jsfiddle.net/userdude/WcQ6J/5/
This is a little bit more compatible (and flexible) that display: inline-block, which is not supported in IE8.
You can set the width of the "aside" to pixels and the span to a percent, but, as you've seen, that will cause problems. It's easier to set both to a percent. Also, "inline-block" will put your elements in line. You can use this or "float: right;", but I prefer setting the display.
aside {
display: inline-block;
width: 9%;
}
span {
display: inline-block;
width: 90%;
}
See jsfiddle.
In case you want a truly variable width input field, so that you can manually adjust its width to fill the entire page, or to any other convenient width, why not make that input element fill 100 % of a resizable div?
CSS:
<style>
div.resize {
width: 300px; /*initial width*/
resize: horizontal;
overflow: auto;
}
HTML:
<div class="resize">
<input style="width: 100%" />
The little triangle to drag to resize the div will appear in the lower-right corner of the input element!