How can I fill a <div> element with text and input so if the <div> get resized the input becomes shorter/longer?
I'm sitting since 2 hours and I just can't get it right.
Here's a Cross browser solution, Pure CSS
Demo
HTML:
<div class="Container">
<label>text</label>
<div class="Fill"><input type="text" /></div>
</div>
CSS:
.Container
{
background-color:#B5E51D;
padding: 5px;
}
label
{
float: left;
padding: 0 10px;
}
.Fill
{
overflow: hidden;
}
input
{
width: 97%;
margin: 0 1%;
}
Like this
demo
css
.divbg{
background-color:#B5E51D;
padding:5px;
overflow:hidden;
width:100%;
}
label{
float:left;
margin:0 0 0 20px;
}
input{
float:left;
background-color:#ED1B24;
color:white;
border:none;
padding:2px 5px;
margin:0 0 0 20px;
min-width:200px;
}
.pull-left{
float:left;
}
Related
I'm trying to create an upload layout that contains a box with a row inside of it. The row has two buttons (with inputs wrapped inside them) and one h3. I cannot get them to stay on the same height. The following code illustrates this:
HTML
<div id="mi-wrap">
<h1>Title</h1>
<div id="main-wrap">
<div id="inner-wrap">
<div id="wide-bar">
<button id="upload-button">
<input type="file" id="upload" value="PDF"/>
</button>
<h3 id="file-preview"><i class="fa fa-arrow-left"></i>Upload je bestand</h3>
<button id="send-button" type="submit" name="search-button">
</button>
</div>
</div>
</div>
</div>
CSS:
#mi-wrap {
width:100%;
margin:0 auto 0;
height:200px;
}
#main-wrap {
background-color:blue;
width:90%;
margin:0 auto 0;
height:100%;
}
#inner-wrap {
width:100%;
height:100%;
display:table;
}
#wide-bar {
height:60px;
}
#wide-bar button, #wide-bar h3 {
background-color: green;
height:60px;
display:inline-block;
}
#wide-bar button {
width:25px;
}
#wide-bar button input {
display:none;
}
#wide-bar h3 {
width:50%;
}
The code is not finished (i.e. it is not exactly the same as my own), but it does illustrate the problem. Also in this jsFiddle
You need to put another display, as inline-block combined with vertical-align
#wide-bar h3 {
width:50%;
display: inline-block;
vertical-align:top;
}
See it working:
https://jsfiddle.net/89u30vhx/1/
try this way
#wide-bar button, #wide-bar h3 {
background-color: green;
border: 0 none;
/*display: table-cell;*/ /*Remove this property*/
float: left;/*Add this property*/
height: 60px;
margin: 0;
padding: 0;
}
This will do:
#wide-bar {
vertical-align: middle;
max-height:60px;
display:table;
}
#wide-bar button, #wide-bar h3 {
margin:0;
padding:0;
background-color: green;
display:table-cell
}
#wide-bar button {
width:25px;
height: 60px;
}
Change your css as follows:
#wide-bar {
height: 60px;
}
#wide-bar button, #wide-bar h3 {
margin: 0;
padding: 0;
background-color: green;
height: 60px;
display: inline-block;
float: left;
}
JSfiddle demo
html
<div id="container">
<div>
<span>Visit website</span>
<span>View project</span>
</div>
</div>
css
#container {
width: 100%;
padding:0;
background-color: green;
}
div { padding: 0 20px; width: 0px; background:red;overflow:visible; text-align: center;}
span {
background:#222;
color:#fff;
display:inline-block;
margin:10px 10px 0 0;
padding:5px 10px
}
Demo: http://jsfiddle.net/cePe3/445/
How to make the 2 span to be inline with each other in the middle of the container DIV!
Note: code structure must be as its.
thank you
You can use a more modern solution: flexbox
Add display: flex; justify-content: center; to #container and to #container div. It's magic.
Working fiddle: http://jsfiddle.net/cePe3/448/
You have to set your div width to auto
div { padding: 0 20px; width: auto; background:red;overflow:visible; text-align: center;}
https://jsfiddle.net/cePe3/446/
you have to set div width for inline span
div
{ padding: 0 20px;
width: 350px;
background:red;
overflow:visible;
text-align: center;
}
DEMO
make the position absolute for the spans, then add jquery to center the spans, even on resizing of the window:
$( window ).resize(function() {
shuffle();
});
function shuffle() {
$('span').each(function(){
$(this).css('left',($('#container').width()-$(this).width()) / 2);
});
$('#container').find('div').css('height',$('span:first').height()*6);
}
shuffle();
#container {
width: 100%;
padding:0;
background-color: green;
}
div { padding: 0 20px; width: 0px; background:red;overflow:visible; text-align: center;}
span {
position: absolute;
background:#222;
color:#fff;
display:inline-block;
margin:10px 10px 0 0;
padding:5px 10px
}
span:nth-child(2) {
top: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div>
<span>Visit website</span>
<span>View project</span>
</div>
</div>
I have the following HTML:
<div class="col span_1_of_3 setCenter">
<div id="divEachImageExt">
<div id="divEachImage">
<div id="slides">
<div class="inta"><img src="theImages/imcpsite.png" width="140" height="140" alt="side" /></div>
</div>
<div id="menu">
<ul class="ulText">
<li class="menuItem act">PS: BASICS</li>
</ul>
</div>
</div>
</div>
</div>
CSS:
.col {
/*display: block;*/
/*float:left;*/
display: inline-block;
margin: 1% 0 1% 0;
}
.col:first-child {
margin-left: 0;
}
.span_1_of_3 {
width: 32.2%;
}
.setCenter {
text-align: center;
}
#divEachImageExt {
float: left;
width: 30%;
margin: 0 auto;
}
#divEachImage {
/* CSS3 Box Shadow */
-moz-box-shadow:0 0 3px #AAAAAA;
-webkit-box-shadow:0 0 3px #AAAAAA;
box-shadow:0 0 3px #AAAAAA;
/* CSS3 Rounded Corners */
-moz-border-radius-bottomleft:4px;
-webkit-border-bottom-left-radius:4px;
border-bottom-left-radius:4px;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
border:1px solid white;
background:url('../theImages/panel.jpg') repeat-x bottom center #FFFFFF;
/* The width of the divEachImage */
width:175px;
overflow:hidden;
margin: 0 auto;
}
#slides {
/* This is the slide area */
height:155px;
/* jQuery changes the width later on to the sum of the widths of all the slides. */
width:175px;
overflow:hidden;
margin: 0 auto;
}
.inta {
float:left;
width: 175px;
margin: 0 auto;
height: 140px;
padding-top: 8px;
}
#menu {
/* This is the container for the thumbnails */
height:45px;
}
ul.ulText {
margin:0px;
padding:0px;
}
ul.ulText li {
/* Every thumbnail is a li element */
width:125px;
display:inline-block;
list-style:none;
height:45px;
overflow:hidden;
line-height: 45px;
vertical-align: middle;
}
li.inact:hover {
/* The inactive state, highlighted on mouse over */
background:url('../theImages/pic_bg.png') repeat;
}
li.act a {
cursor:default;
}
ul.ulText li a {
display:block;
background:url('../theImages/divider.png') no-repeat right;
height:35px;
padding-top:10px;
}
What happens is, the inner DIV is left aligned instead of being centered.
Here is a F12 Dev Tool screenshot:
Add display: inline-block to an element you want to be centered.
Heres the fiddle for you: http://jsfiddle.net/u26wqssb/
And heres the code:
Sample HTML:
<div class="setCenter">
<div class="centerMe"></div>
</div>
and CSS:
.setCenter {
width:100%;
text-align:center;
background: #eee;
}
.centerMe {
width:100px;
height:100px;
background:red;
display:inline-block;
}
If you add a fiddle for your case we can fix it there.
Hey You can Try using the margin to center it like so
.yourstyle {
margin:0 auto; /* shorthand or margin-left:auto; margin-right:auto; for long way */
}
or you could attempt to use CSS3 2D transforms to center it or just Flex box good luck
Is there any reason for the float in #divEachImageExt? If no the either
/* .setCenter part not needed */
#divEachImageExt {
width: 30%;
margin: 0 auto;
}
or
.setCenter {
text-align: center;
}
#divEachImageExt {
display: inline-block;
width: 30%;
}
will do.
change #divEachImageExt to below code
#divEachImageExt {
width: 30%;
margin: 0 auto;
}
remove float:left
It will solve your problem.
I have tried the normal techniques for horizontally centering a div within a div. I must still be doing something wrong. Check out the following jsFiddle and help me center the depiction of a tank under the "Inner Level" heading. For convenience I have added a border to all the div tags.
jsFiddle Source
HTML:
<body>
<a href="#">
<div class="div-inline-block" style="text-align:left;width:150px;">
<h2>TEST</h2>
<p>A description</p>
</div>
<div class="div-inline-block"><p><b>Last Update:</b><br />???</p></div>
<div class="div-inline-block"><p><b>Flow Rate:</b><br />??? gpm</p></div>
<div class="div-inline-block"><p><b>Inner Level:</b><br />???</p><div class="tank-level-outer"><div class="tank-level-inner"></div></div></div>
<div class="div-inline-block"><p><b>Outer Level:</b><br />???</p></div>
<div class="div-inline-block"><p><b>Battery Voltage:</b><br />???</p></div>
<div class="div-inline-block"><p><b>Rainfall:</b><br />???</p></div>
<div class="div-inline-block" style="text-align:left;width:100%;"><p><b>Notifications:</b><br />???<br />???</p></div>
</a>
</body>
CSS:
a{
text-decoration:none;
}
div{
border:1px solid red;
}
.div-inline-block {
text-align: center;
height: 100%;
display: inline-block;
vertical-align: top;
margin-left:15px;
width: 100px;
}
.tank-level-outer {
border:1px solid black;
width:25px;
height:32px;
display:table-cell;
vertical-align:bottom;
margin:0 auto;
}
.tank-level-inner {
background-color:dodgerblue;
width:25px;
height:25px;
}
add this
.div-inline-block {
text-align: center;
height: 100%;
display: inline-block;
vertical-align: top;
margin-left:15px;
width: 100px;
margin:0 auto;
}
.tank-level-outer {
border: 1px solid black;
width: 25px;
height: 32px;
margin: 0 auto;
padding: 0;
}
.tank-level-inner {
background-color:dodgerblue;
width:25px;
height:25px;
margin-top:7px;
display: table;
vertical-align: bottom;
}
Updated Fiddle
http://jsfiddle.net/czgoxafr/22/
Add this:
.tank-level-outer {
display: table;
margin: 0 auto;
}
change the css of div .tank-level-outer and add margin zero auto , remove display table-cell
.tank-level-outer {
border: 1px solid #000;
width: 25px;
height: 32px;
margin: 0px auto;
vertical-align: bottom;}
This works:
.tank-level-outer {
width:25px;
height:32px;
display:block; // not necessary since this class is applied to a div
vertical-align:bottom;
margin:0 auto;
}
try this:
//css
.firstDiv{
padding:25% 25% 25% 25%
height:400px;
width:400px;
background-color:red;
}
.secondDiv{
height:200px;
width:200px;
background-color:pink;
}
//html
<div class="firstDiv">
<div class="secondDiv">
</div>
</div>
Sorry but having difficulty in creating a group of div as attached pic..please help
http://imgur.com/J8psv
my biggest problem is having to get the divs arranged next to each other inside of parent divs. Infact to go to a next level, if there is a 5th div of 200px then I want it to automatically come to the second line.
I understand I need something to do with CSS, just that am not so well versed with it.
.div_main_left {
width: 800px;
border: 1px solid;
height: 600px;
float: left;
display: table-cell;
}
.div_sec_left {
width: 200px;
border: 1px solid;
height: 75px;
display: inline;
float: left;
}
.div_right {
width: 250px;
border: 1px solid;
height: 500px;
float: right;
display: table-cell;
}
You can do it like this:
HTML
<div id="mainwrapper">
<div id="leftwrapper">
<div class="topbox"></div>
<div class="topbox"></div>
<div class="topbox"></div>
<div class="topbox"></div>
<div id="maincontent"></div>
</div>
<div id="rightwrapper">
<div id="topsidebar"></div>
<div id="bottomsidebar"></div>
</div>
</div>
CSS
#mainwrapper{
width:1050px;
}
#rightwrapper{
width:250px;
float:left;
}
#leftwrapper{
width:800px;
float:left;
}
.topbox{
float: left;
width:196px;
margin-right:4px;
height:75px;
background-color:orange;
}
#maincontent{
width:100%;
height:675px;
background-color:blue;
clear:both;
}
#topsidebar
{
width:100%;
height:600px;
background-color:green;
}
#bottomsidebar{
width:100%;
height:150px;
background-color:red;
}
Here is the jsfiddle
Do it in a list then style the list itself. From: http://www.alistapart.com/articles/taminglists/
#tabs ul {
margin-left: 0;
padding-left: 0;
display: inline;
}
#tabs ul li {
margin-left: 0;
margin-bottom: 0;
padding: 2px 15px 5px;
border: 1px solid #000;
list-style: none;
display: inline;
}
#tabs ul li.here {
border-bottom: 1px solid #ffc;
list-style: none;
display: inline;
}
You can start with this:
Fiddle Example
First the html:
<div id="container">
<div class="big_left">
<div class="float_parent">
<div class="small">200x75</div>
<div class="small">200x75</div>
<div class="small">200x75</div>
<div class="small">200x75</div>
</div>
<div class="content">
The Content;
</div>
</div><!-- Big left End -->
<div class="big_right">
<div class="right_long">
250x750
</div>
</div><!-- Big Right End -->
</div>
Then the css:
#container {
width:1065px;
}
.big_left {
width:810px;
float:left;
}
.big_right {
width:255px;
float:left;
}
.big_left .float_parent {
width:800px;
}
.big_left .float_parent .small{
width:200px;
height:75px;
float:left;
}
.big_left .content {
clear:both;
}
.big_right .right_long {
width:250px;
height:750px;
}