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.
Related
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>
On the following [website][1] I have a banner section which I have told to display as display table with table cells. I used this because I needed to align the image to the middle of the banner.
HTML:
<div class="banner banner-large">
<div class="banner-inner">
<div class="banner-col col-page-intro">
<h1>Collect. <br>Transport. <br>Recycle.</h1>
</div>
<div class="banner-col col-banner-image">
<img src="/files/1813/9705/0946/gd-hero.png" alt="">
</div>
</div>
</div>
SCSS:
.banner {
background:$red;
color:$white;
position:relative;
overflow: hidden;
}
.banner-inner {
display:table;
width:100%;
height:100%;
#include bp(XS) {
display:block;
}
}
.banner-col {
display:table-cell;
width:50%;
#include bp(XS) {
display:block;
width:100%;
}
}
.col-page-intro {
padding:40px 0 40px 60px;
vertical-align: top;
#include bp(L) {
padding:20px 0 20px 30px;
}
#include bp(XS) {
width:100%;
padding:20px 15px;
}
}
.col-banner-image {
text-align:center;
padding: 0 30px;
vertical-align: middle;
#include bp(XS) {
text-align:left;
margin-bottom:20px;
padding:0 10px;
}
}
If you [compare the website][2] in both chrome and firefox you'll notice chrome honours the width and resizing of the image (max-width 100%) whereas firefox does not.
What can I do to make both browsers behave as Chrome is currently?
edit: this only works in chrome.
Just add width: 100%; and probably display: block; to your img:
.col-banner-image img {
display: block;
width: 100%;
}
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
I set my div to be fixed position and when I scroll page to very bottom or if I use smaller screen like smartphone or tablet my fixed div float over my footer. How can I fix this?
This is my fixed div:
.infoItem{
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1px #e4e4e4 solid;
width: 227px;
background:#f8f6f7;
position: fixed;
}
and this is my wrapper:
.wrapper {
min-width:954px;
}
I also try to wrap my infoteam div in another div and set new div to be position: absolute but that also didn't work.
Fixed div html
<div class="box-collateral box-up-sell">
<div class="infoItem">
<p class="heading">Add to your </p>
<p class="content">
<div class='upsellContainer'>
<div>
</div>
</div>
</p>
</div>
</div>
footer css
.footer { background:url(../images/footer-top-border.png) repeat-x;}
/* .footer-container { border-top:15px solid #b6d1e2; }*/
.footer { width:904px; margin:0 auto; padding:30px 10px 50px; }
.footer .store-switcher { display:inline; margin:0 5px 0 0; color:#fff; }
.footer .store-switcher label { font-weight:bold; vertical-align:middle; }
.footer .store-switcher select { padding:0; vertical-align:middle; }
.footer a {text-decoration:none; }
.footer a:hover { text-decoration:underline; }
.footer .bugs { margin:13px 0 0; }
.footer .bugs a { text-decoration:underline; }
.footer .bugs a:hover { text-decoration:none; }
.footer address { margin:0 0 20px; }
.footer address a {text-decoration:underline; }
.footer address a:hover { text-decoration:none; }
.footer ul { display:inline; }
.footer ul.links { display:block; }
.footer li { background:url(../images/bkg_pipe2.gif) 100% 60% no-repeat; padding:0 7px 0 4px; }
.footer li.last { background:none !important; padding-right:0 !important; }
.footer-container .bottom-container { margin:0 0 5px; }
Use clear:both inside the footer div or apply clear:both in css like:
#footer{
clear: both;
}
Add another div right after your div and before your footer like this:
<div style="clear:both"></div>
This will force any element below it down. You also want to make sure that the footer has clear:both as well (this should always be true of footers)