I have used Animate.css for creating a left and right slide in effect. I can't figure out why the slides are adding up to the invisible width. Could any of you help me?
http://jsfiddle.net/itsnamitashetty/CKgX8/1/
<style>
body{
margin:0;
padding:0;
}
#animationentry{
width:100%;
height:700px;
margin:0;
padding:0;
background:green;
display:block;
}
#cww_bg{
display:block;
float:left;
width:50%;
background:red;
}
#crw_bg{
display:block;
float:left;
width:50%;
background:yellow;
}
</style>
<link type="text/css" rel="stylesheet" href="css/animate.css">
</head>
<body>
<div id="animationentry">
<div id="crw_bg" class="animated slideInLeft">
<img src="images/crw.jpg">
</div>
<div id="cww_bg" class="animated slideInRight">
<img src="images/cww.jpg">
</div>
</div>
</body>
</html>
Fiddle: http://jsfiddle.net/CKgX8/2/
Add overflow: hidden; to #animationentry
#animationentry{ overflow: hidden;}
Related
first div float:left second div overflow:hidden and margin-top:3000px invalid.
div2 set margin-top:3000px no margin-top!?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
body{
margin:0;padding:0;
}
.box{
width:300px;
height:300px;
margin-top:20px;
background:blue;
}
.sub{
width:100px;
height:100px;
margin-top:30px;
margin-bottom:20px;
background-color: yellow;
}
.fl {
float:left;
margin-right: 100%;
}
.clear{
clear:both;
}
.absolute{
position:absolute;
}
.inline-block{
display: inline-block;
}
</style>
</head>
<body>
test
<div class="box" style="margin-left:20px;">
<div class=" box sub fl" style="">ccc</div>
<div
class="box sub"
style="
overflow:hidden;
background:red;
margin-top:3000px;">
div2
</div>
<div class="box sub" style="overflow:hidden;">
</div>
</div>
</body>
</html>
div2 margin-top eaten by float:left div ?
I want my footer inner div wrappers to mov from right to underneath left and center when I use responsive media queries. However, when moving last element "Contact us" from right to left, it goes below but it does not center, and the previous div "follow us" is not position in the same line as "copyright".
Codepen here
HTML
<!doctype html>
<html>
<head>
<title>Agency</title>
<meta charset="utf-8">
<link href="footer.css" rel="stylesheet" merdia="handheld">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>Header</h1>
</div>
<div class="footer">
<h1>Footer</h1>
<div class="copyright">
<h3>Copyright</h3>
</div>
<div class="social">
<h3>Follow us:</h3>
<p> Twitter, Facebook, Youtube</p>
</div>
<div id="contactfooter">
<h2> Contact </h2>
<p>Contact Form would go here</p>
</div>
</div>
</body>
CSS
/*footer.css*/
*{
margin:0;
padding:0;
font-family: 'Open Sans', sans-serif;
}
body
{
background-color:#DCDCDC;
}
.wrapper{
max-width:1200px;
width:100%;
margin:auto;
}
.header{
width:100%;
background-color:green;
height:20vh;
}
.footer{
width:100%;
background-color:orange;
font-size:1em;
overflow:hidden;
padding-bottom:3%;
clear:both;
padding-top:5%;
border-top:3px solid #0099FF;
color:black;
}
.copyright{
width:25%;
background-color:red;
float:left;
margin-left:10%;
}
.copyright p{
font-size:0.938em;
line-height: 2em;
}
.social{
width:20%;
background-color:yellow;
float:left;
margin-left:8%;
}
#contactfooter{
width:20%;
background-color:blue;
float:right;
margin-right:10%;
display:block;
}
#contactfooter h2, #contactfooter{
font-size:1.250em;
text-align: center;
}
/*---------MEDIA QUERIES----------*/
#media (max-width:1020px){
.copyright{
margin-left:25%;
float:left;
}
.social{
float:right;
margin-right:25%;
}
#contactfooter{
float:left;
width:30%;
margin:auto; /*does not margin to the center of the footer wrapper.. why?*/
/*margin-right:0%;
margin-left:45%;*/
}
}
You do not need to change their margins for smaller screens, just fix their width.
html
<body>
<div class="left"></div>
<div class="right"></div>
</body>
css
body{
height:100%
}
.left{
float:left;
background-color:#ccffcc;
height:100%;
width:50%;
}
.right{
height:100%;
width:50%;
float:right;
background-color:#ffcc99
}
I've set the parent element's height
What do I have to do to see my two divs ?
It seems to only work when I use pixels but I dislike using pixels...
Add height:100% to html as well
body, html{
height:100%
}
DEMO
body,html{
height:100%
}
I just edited this part alone, i.e added html
Fiddle Demo
fiddle
add :
body, html {
height:100%
}
ALSO...you have incorrect tag for html, use <html>
<html>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
<style>
body{
`height:100%
}
.left
{
float:left;
background-color:#ccffcc;
height:100%;
width:50%;
}
.right
{
height:100%;
width:50%;
float:right;
background-color:#ffcc99
}
</style>
</html>
<html>
<head>
<title>Test HTML</title>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
<html>
<style>
body,html{
height:100%
}
.left
{
float:left;
background-color:#ccffcc;
height:100%;
width:50%;
}
.right
{
height:100%;
width:50%;
float:right;
background-color:#ffcc99
}
</style>
Hope This Helps :)
if you have any issue in this css. you can also use inline css <body style="height:100%">
Because may be its a css conflict issue.
<body style="height:100%">
<div class="left"></div>
<div class="right"></div>
</body>
<style>
html{
height:100%;
}
.left
{
float:left;
background-color:#ccffcc;
height:100%;
width:50%;
}
.right
{
height:100%;
width:50%;
float:right;
background-color:#ffcc99
}
</style>
Updated Fiddle
Yellow bar is width:100% header
I would like to achieve MAIN TEXT to be always CENTERED no matter the side text's length.
Margins between text are 100px
Image:
Thanks in advance
EDIT : HTML and CSS so far:
HTML:
<html>
<head>
</head>
<body>
<center>
<div id="top"></div>
Text Logo
<span id="mainText"> Menu Links </span>
Username: <?php echo $uname; ?>
</center>
</body>
</html>
CSS:
#mainText {
margin-right:100px;
margin-left:100px;
}
If i understand may be that's you want.
CSS
.left{
float:left;
background:yellow;
}
.right{
float:right;
background:green;
}
.middle{
display:inline-block;
*display:inline/*For IE7*/
*zoom:1;
vertical-align:top;
background:red;
margin:0 100px;
}
.parent{
text-align:center;
}
.parent div{
text-align:left;
}
HTML
<div class="parent">
<p class="left">L side Text</p>
<p class="middle">Center side Text</p>
<p class="right">R side Text</p>
</div>
Check this http://jsfiddle.net/XhMtK/3/
UPDATED
May that's you want
Check this http://jsfiddle.net/XhMtK/4/
Hi you can used float as like this
CSS
.one{
width:90%;
margin:0 auto;
overflow:hidden;
background:green;
text-align:center;
}
.left{
float:left;
background:yellow;
width:20%;
}
.center{
margin:0 auto;
background:pink;
width:50%;
}
.right{
float:right;
background:red;
width:20%;
}
HTML
<div class="one">
<div class="left">Left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>
Live demo http://jsfiddle.net/rohitazad/JNxsZ/2/
<style>
body{
background:#FF9900;
color:#FFFFFF;
}
.wrapper{
width:900px;
height:auto;
padding:0px;
margin:auto;
background:#000000;
}
.header{
width:900px;
height:50px;
float:left;
padding:0px;
margin:0px;
}
.body_content{
width:900px;
height:200px;
float:left;
padding:0px;
margin:0px;
}
.fotter{
width:900px;
height:50px;
float:left;
padding:0px;
margin:0px 0px 25px 0px;
}
</style>
<div class="wrapper">
<div class="header">Header</div>
<div class="body_content">Body Content</div>
<div class="fotter">Footer</div>
</div>
If i give a wrapper div height:"500px" i can see the background color black. But if i change the to height="auto" i cant see the color.
Can some one please help me with this ?
Please see here..link text
Add overflow: hidden or overflow: auto to your #wrapper styles.
You have to do this, because containers with floated elements inside them don't have any height by default, so you have to use the above hack (or some other) to force the browser to give the container some height.
You can also add a <div style="clear: both;"></div> as the last element in your #wrapper and that should work also.
Is it because you have zero content? Add 'lorem ipsum' and see what you get.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
body{
background:#FF9900;
color:#FFFFFF;
}
#wrapper{
width:900px;
height:auto;
padding:0px;
margin:auto;
background-color:#990000;
clear:both;
}
.header{
width:900px;
height:50px;
float:left;
padding:0px;
margin:0px;
}
.body_content{
width:900px;
height:200px;
float:left;
padding:0px;
margin:0px;
}
.footer{
width:900px;
height:50px;
float:left;
padding:0px;
margin:0px 0px 25px 0px;
}
</style>
<body>
<div id="wrapper">
<div class="header">Header</div>
<div class="body_content">
<p>Body Content</p>
</div>
<div class="footer">Footer</div>
<hr/>
</div>
</body>
</html>
hope this will solve the problem