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 ?
Related
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.
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;}
This is really simple, yet I don't know how to solve this
<html>
<body>
<div style="width:500px; background:black;">
<div style="display:inline-block; width:200px; height:300px; background:yellow;"></div>
<div style="display:inline-block; vertical-align: top; width:100px; height:100%; background:pink;"></div>
</div>
</body>
</html>
Here's my fiddle : Fiddle
I want the pink div's height matches the black div's which is set auto.
Edit: actually I want to match the pink height to the yellow one so that the black's height matches the yellow's also.
position:absolute could be an answer.
<html style="height:100%;">
<body style="height:auto;position:relative;">
<div style="width:500px; height:100%; background:black;">
<div style="display:inline-block; width:200px; height:300px; background:yellow;"></div>
<div style="display:inline-block; vertical-align: top; width:100px; height:100%; background:pink;position:absolute;
left:100px;
margin-left:0.25em;
top:0;
bottom:0;"></div>
</div>
</body>
</html>
http://jsfiddle.net/QG572/2/
Or use display:table to keep everything in the flow:
<html style="height:100%;">
<body style="">
<div style="width:500px; height:100%;display:table; background:black;">
<div style="display:table-cell; width:200px; height:300px; background:yellow;"></div>
<div style="display:table-cell; vertical-align: top; width:100px; height:100%; background:pink;"></div>
<div style="display:table-cell;"><!-- to fill 100px left--></div>
</div>
</body>
</html>
http://jsfiddle.net/QG572/3/
Setting the height in the wrapper div and letting the children containers inherit the height is could work for you.
html:
<html>
<body>
<div class="black">
<div class="yellow"></div>
<div class="pink"></div>
</div>
</body>
</html>
CSS:
.black{
width: 500px;
height: 300px;
background: black;
}
.black div {
display: inline-block;
width: 200px;
height: inherit;
}
.yellow{
background: yellow;
}
.pink {
background: pink;
}
I have a parent div and a child div.I would like to center to know if i could express the width and the height of the child as a percent of the parent,for instance
<!doctype html>
<head>
<meta charset='utf-8' />
<title>Horizontal center a div</title>
<style type='text/css'>
.one{
width:800px;
height:100px;
background-color:grey;
}
.two{
margin-top:30px;
margin-bottom:30px;
min-height:40px;
margin-left:30px;
width:90px;
background-color:pink;
display:inline-block;
}
</style>
</head>
<body>
<div class="one">
<div class="two">lorem ipsum</p>
</div>
</body>
</html>
To see it in action http://jsfiddle.net/thiswolf/3qRgH/
The outer div(parent) has a height of 100px and my child div has a height of 40px.I would like to center my child inside the parent theme,so,100px - 40px = 60px and i divide the 60px twice and assign the child div margin-top:30px and margin-bottom:30px;.I however would like to express the margins in percentage form.How would i express the margins in %.
You can center the divs this way (edited) :
<!doctype html>
<head>
<meta charset='utf-8' />
<title>Horizontal center a div</title>
<style type='text/css'>
.one{
width: 800px;
background-color: grey;
}
.two{
min-height: 40px;
margin: 30% 355px;
width: 90px;
background-color: pink;
display: inline-block;
}
</style>
</head>
<body>
<div class="one">
<div class="two">lorem ipsum</div>
</div>
</body>
</html>
See http://jsfiddle.net/3qRgH/2/
Is this what you 're asking?
http://jsfiddle.net/thiswolf/5AZJD/
That seems to work but i haven't proved it
<!doctype html>
<head>
<meta charset='utf-8' />
<title>Horizontal center a div</title>
<style type='text/css'>
.one{
position:relative;
width:800px;
height:100px;
background-color:grey;
}
.two{
position:absolute;
top:30%;
bottom:30%;
min-height:40px;
margin-left:30px;
width:90px;
background-color:pink;
display:inline-block;
}
</style>
</head>
<body>
<div class="one">
<div class="two">lorem ipsum</p>
</div>
</body>
</html>
Can anybody help, I`m starter in web? Here is code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
.window {
margin:0;
padding:0;
border: solid 1px #666666;
}
.image {
height:50px;
widows:50px;
float:left;
}
.text {
font-size:12px;
color:#666666;
float:left;
}
-->
</style>
</head>
<body>
<div class="window">
<div class="image">image</div>
<div class="text"></div>
</div>
</body>
First, for width, u use window, use width:50px; for appear div image and div text on div window, use clear div, see code below...
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
.window {
margin:0;
padding:0;
border: solid 1px #666666;
}
.image {
height:50px;
width:50px;
float:left;
}
.text {
font-size:12px;
color:#666666;
float:left;
}
.clear {
clear:both;
}
-->
</style>
</head>
<body>
<div class="window">
<div class="image">image</div>
<div class="text"></div>
<div class="clear"></div>
</div>
</body>
Is ok?
Misspelt width?
widows:50px;
because you have float:left for the two child elements you have to clear them. Add overflow:auto for the .window.
Demo: http://jsfiddle.net/CVcjf/1
you should assign a width and height to the divs in order to make its visible.