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>
Related
Having trouble centering some logos. I tried to used margin: auto as well as text-align: center but can't seem to get it working.
JSfiddle
would you like something like this?
I add this class
#footer-container {
width: 100%;
display: inline-block;
text-align: center;
}
and made some changes in this class ( ex: remove the float )
.button-circle {
display: inline-block;
width: 66px;
height: 50px;
padding: 0px;
margin-top: 20px;
margin-right: 50px;
}
It will looks like this .I think that it is your desire result!
Try:
#footer-container{
text-align:center;
}
.button-circle:last-of-type{ /*remove right margin from last div*/
margin-right:0;
}
.button-circle {
display: inline-block;
}
NOTE:
inline-block adds white-space between elements. Write elements on same line to remove white-space.
Write:
<div class="button-circle">.........</div><div class="button-circle">...
Instead of:
<div class="button-circle">
.......
</div>
<div class="button-circle">
.......
</div>
DEMO here.
I have given both the code html and css check it
<div id="footer-container">
<div id="followicon">
<div class="button-circle">
<div class="bild"><img src="http://i.imgur.com/1faoLxr.jpg" style="width: 66px"></div>
<div class="block">facebook</div>
</div>
<div class="button-circle">
<div class="bild"><img src="http://i.imgur.com/hVdiFAx.jpg" style="width: 66px"></div>
<div class="block">twitter</div>
</div>
<div class="button-circle">
<div class="bild"><img src="http://i.imgur.com/WJGtp0A.jpg" style="width: 66px"></div>
<div class="block">vimeo</div>
</div>
</div><!--end of the followicon -->
</div>
<div>
//css code
#footer-container {
width:100%;
height:200px;
border:1px solid #000;
}
#followicon {
position:relative;
width:350px;
height:200px;
margin:0px auto;
}
.block{
position:relative;
width: 66px;
height: 25px;
top:0px;
z-index:100;
opacity: 0;
margin-top: -5px;
text-align: center;
text-transform:uppercase;
}
.button-circle {
display: inline;
float: left;
width: 66px;
height: 50px;
padding: 13px;
margin-top: 20px;
margin-right: 10px;
margin-left:13px;
}
.bild {
position:relative;
height: 100%;
top: 0px;
}
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;
}
I'm trying to make 2 divs appear on separate lines within an outside div. Right now I have display:inline-block set for both of them, but I'm not sure how to change this to make them appear on separate lines.
Here is what my code looks right now, I would like John Doe and 100 to appear on separate lines within the leader div:
http://jsfiddle.net/ZnuPR/
HTML
<ul>
<li class="leader">
<div class="ranking">1</div>
<div class="name">John Doe</div>
<div class="score">100</div>
</li>
</ul>
CSS
.leader {
border: 1px solid;
background-color: #E6E6E6;
display: inline-block;
width: 400px;
margin: 2px;
padding: 2px;
background-repeat: no-repeat;
height: 75px;
}
.ranking {
display: inline-block;
margin:2px;
padding:2px;
width:50px;
height:65px;
background-color:green;
color:white;
}
.name {
display: inline-block;
}
.score {
display: inline-block;
}
You could simply float .ranking and then leave .name and .score as display: block.
http://jsfiddle.net/ZnuPR/7/
.ranking {
/* ... */
float: left;
}
The fastest solution is to set the ranking to "float:left;" and the name and score to "display:block;". Block level elements span 100% by default which will make sure the 2 elements are on seperate lines.
.leader {
border: 1px solid;
background-color: #E6E6E6;
display: inline-block;
width: 400px;
margin: 2px;
padding: 2px;
background-repeat: no-repeat;
height: 75px;
}
.ranking {
float:left;
margin:2px;
padding:2px;
width:50px;
height:65px;
background-color:green;
color:white;
}
.name {
display: block;
}
.score {
display: block;
}
http://jsfiddle.net/ZnuPR/2/
I think this is what you mean:
http://jsfiddle.net/ZnuPR/6/
Don't use inline-block and remove the height from the container, it will automatically adjust to the height it needs to be.
http://jsfiddle.net/ZnuPR/8/
Added a .details wrapper and some floats.
.ranking {
float:left; /* Floating */
margin:2px;
padding:2px;
width:50px;
height:65px;
background-color:green;
color:white;
}
.details {
float:left; /* floating */
}
.name {
display: block; /* Changed to block */
}
.score {
display: inline-block;
}
<ul>
<li class="leader">
<div class="ranking">1</div>
<div class="details">
<div class="name">John Doe</div>
<div class="score">100</div>
</div><!-- end details wrapper-->
</li>
</ul>
I think this could be useful:
http://jsfiddle.net/ZnuPR/10/
.leader {
border: 1px solid;
background-color: #E6E6E6;
display: inline-block;
width: 400px;
margin: 2px;
padding: 2px;
background-repeat: no-repeat;
}
.ranking {
width: 100%;
margin:2px;
padding:2px;
width:50px;
height:65px;
background-color:green;
color:white;
}
.name {
width: 100%;
}
.score {
width: 100%;
}
This is what I did:
CSS
.leader {
border: 1px solid;
background-color: #E6E6E6;
display: inline-block;
width: 400px;
margin: 2px;
padding: 2px;
background-repeat: no-repeat;
}
.ranking {
display: inline-block;
margin:2px;
padding:2px;
width:50px;
height:65px;
background-color:green;
color:white;
}
I got rid of display: inline-block and height
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;
}
I have a div element in my page, and an arrow, that I am trying to get to the right middle of the div. Here's the code:
HTML:
<div id="popup">
<p>
This is the inside of a div element.
</p>
</div>
<div id="image"></div>
CSS:
#popup {
background-color: whiteSmoke;
width:500px;
margin:0px auto;
margin-top:100px;
}
#image {
background-image:url('/images/jquerys penis.png');
border:1px solid black;
width:30px;
height:30px;
float:right;
}
Website that I'm working on: site.brycemckenney.com/jquery.html
I had to modify your markup a little: http://jsfiddle.net/Wexcode/y7jTb/
HTML:
<div id="popup">
<p>This is the inside of a div element.</p>
<div id="image"></div>
</div>
CSS:
#popup {
width: 500px;
white-space: nowrap;
margin: 0 auto; }
#popup * { white-space: normal; }
#popup p {
background-color: whiteSmoke;
vertical-align: middle;
display: inline-block; }
#image {
background: url('http://site.brycemckenney.com/images/jquerys%20penis.png') 0 0 no-repeat;
border: 1px solid black;
width: 30px;
height: 30px;
vertical-align: middle;
display: inline-block; }
This solution depends on display: inline-block;, white-space: nowrap, and vertical-align: middle;. If you need help understanding any of what I've just posted, please feel free to ask.
On #image style add:
width: 30px;
margin: auto;