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
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 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;}
There are three div, d1, d2 and d3, I want the d1 can wrap the content for vertical, but visible for horizontal.
If d2 and d3 have no float properity, d1 will give me the result I want.
but d2 and d2 have float properity, I need add overflow-y:auto to make it wrap vertical.
and I added overflow-x:visible, but it still have a scroll bar.
so how to keep the horizontal visible?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#d1
{
background-color:red;
padding:10px;
width:100px;
overflow-x:visible;
overflow-y:auto;
}
#d2
{
background-color:blue;
float:left;
width:150px;
height:30px;
}
#d3
{
background-color:green;
float:left;
width:50px;
height:230px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">in</div>
<div id="d3">
out
</div>
</div>
</body>
</html>
If i understood your question, you can solve this using a "clear" DIV. Edited code:
CSS
<style>
#d1
{
background-color:red;
padding:10px;
width:100px;
overflow-x:visible;
}
#d2
{
background-color:blue;
float:left;
width:150px;
height:30px;
}
#d3
{
background-color:green;
float:left;
width:50px;
height:230px;
}
.clear{
clear:both;
}
</style>
HTML
<div id="d1">
<div id="d2">in</div>
<div id="d3">out</div>
<div class="clear"></div>
</div>
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