Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I am trying to have two labels with corresponding inputs be on the same line with the same width, currently, the width is messing up when in a relatively small container.
Example of widths in small container:
Code:
#row {
display: flex;
flex-wrap: nowrap;
margin-top:4px;
}
#row label {
display:block;
width:25%;
height:30px;
line-height:30px;
text-align:center;
}
#row input {
width: 75%;
border: 1px solid rgb(116, 115, 115);
padding-left:3px;
}
<div id="row">
<label for="start">Start</label>
<input name="start" id="start" />
<label for="end">End</label>
<input name="end" id="endTime"/>
</div>
The difference is minimal, but noticeable. Any suggestions?
If you want to have same width input box then try using min-width property like:
#row input {
min-width: 250px;
border: 1px solid rgb(116, 115, 115);
padding-left:3px;
}
BTW they both look the same.
The widths are the same, my eyes were playing tricks on me.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed last year.
Improve this question
I have two divs placed up and down as mentioned in the image. I want to draw a vertical connecting line between these two divs. I used pipe (|) font to do this. But, it is not looking elegant. Can someone help me to draw an elegant vertical line between the divs?
Use border-left:4px dashed blue; property to create a dashed line for connecting the two divs.
.box {
width:80%;
margin-left:10%;
height:70px;
background: grey;
}
.vl {
border-left: 4px dashed blue;
height: 40px;
margin-left:50%
}
<div class="box"></div>
<div class="vl"></div>
<div class="box"></div>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
I'm trying to get contenteditable to work on a style element but it doesn't seem to be changing anything and the other styles dont seem to be being applied
<style contenteditable="true" style="display: block; width: 500px; height: 500px; border: 1px solid black;">
</style>
I tried this it's working.
<style contenteditable="true" style="display: block; width: 500px; height: 500px; border: 1px solid black;">
</style>
<div class="x"></div>
https://codepen.io/sefalette-1472316262/pen/KqxwVY
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
#maindiv
{
display:table;
text-align:center;
border:2px solid #94a2af;
width:100%;
}
#leftsidebar
{
display:table-cell;
width: 26%;
background-color: #af9495;
border:1px solid #94a2af;
}
#rightsidebar
{
display:table-cell;
width: 24%;
background-color: #94a2af;
border:1px solid #94a2af;
}
#center
{
text-align:center;
display:table-cell;
background-color: #f2ebca;
width:50%;
}
I am trying to line up three columns in a row that will be equal height, I found this table solution to get the height(and it worked great) but I can not get the table-cells to display in the correct order. The center one displays on the right and I can't seem to find a solution.
Go easy I'm brand new to this :)
The HTML to go with that CSS should look something like this:
<div id="maindiv">
<div id="leftsidebar">Col 1</div>
<div id="center">Col 2</div>
<div id="rightsidebar">Col 3</div>
</div>
Please post your HTML for a more specific response.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I have two div elements and nav > nav_1. I am expecting to see 500x500 black color background and 50x50 blue color area on the top left but instead of showing me only 500x500 black area. how could i fix it?
.nav {
height: 500px;
width: 500px;
background-color: black;
}
.nav.nav1 {
height: 50px;
width: 50px;
background-color: blue;
}
<div class="nav">
<div class="nav_1">
</div>
</div>
First of all in your CSS, you were using .nav1 instead of .nav_1. Secondly put a space between .nav and .nav_1. Try this:
.nav .nav_1{
height:50px;
width:50px;
background-color:blue;
}
Here is a Fiddle for the same.
EDIT:
For getting a margin-top of 50px, try this:
.nav{
height:500px;
width:500px;
background-color:black;
position:fixed; /* fix position of .nav div */
}
.nav .nav_1{
height:50px;
width:50px;
background-color:blue;
margin-top: 50px ; /* put margin-top to 50px */
}
Here is the Updated Fiddle for the same.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 9 years ago.
Improve this question
I have a css code, "border-top" is not displaying correctly. I've done everything correctly but I just don't see the problem.
JSFiddle: http://jsfiddle.net/3vnWh/1/
Code:
div.topb {
border-top: 1px solid #dcdcdc;
}
you have and open { and selector:
fiddle
/* optional div height ,width, color */
{ /*this is missing*/
width:400px;
height:200px;
background-color:#ffffff;
font-size:28px;
color:#ffffff;
}
You should use
table.topb
instead of
div.topb
The section immediately before div.topb has no opening brackets or labels. If you comment this section out or give it the appropriate opening brackets, your border-top will display properly. Your section looks like this and can be fixed by adding a { before the width line:
/* optional div height ,width, color */
width:400px;
height:200px;
background-color:#ffffff;
font-size:28px;
color:#ffffff;
}
use any of the following
.topb
{
border-top: 1px solid #dcdcdc;
}
OR
table
{
border-top: 1px solid #dcdcdc;
}
OR
table.topb
{
border-top: 1px solid #dcdcdc;
}