I want the the smaller div to be right below the bigger red div, but I can't figure it out. I thought that display block css would place the smaller div below the bigger div, but that does not seem to work.
I can't post an image. Here is a link http://s1.postimg.org/pzgvqi8y7/Capture1.jpg
Here is the html
<!DOCTYPE html>
<html>
<head>
<title>Select Ye Favorite</title>
<link rel='stylesheet' type='text/css' href='css/list.css'/>
<link rel="stylesheet" type="text/css" href="jquery.imgareaselect-0.9.10/css/imgareaselect-default.css" />
<!--jquery and jquery UI scripts here -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<!--js pdf stuff -->
<!-- <script type="text/javascript" src="jspdf.js"></script> -->
<script type="text/javascript" src="dist/jspdf.debug.js"></script>
<script type="text/javascript" src="libs/FileSaver.js/FileSaver.js"></script>
<script type="text/javascript" src="jjspdf.plugin.standard_fonts_metrics.js"></script>
<script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="jspdf.plugin.from_html.js"></script>
<!-- photo selection scripts-->
<script type="text/javascript" src="jquery.imgareaselect-0.9.10/scripts/jquery.imgareaselect.pack.js"></script>
<!--my scripts-->
<script type='text/javascript' src='js/list.js'></script>
</head>
<body>
<div id='header'><h1 id='titleSite'>List Life</h1></div>
<div id='list'></div>
</body>
</html>
Here is the css
![html, body
{
height: 100%;
}
/*
* {
border: 2px solid black;
}*/
#header{
/* z-index:1;
border-radius:5px;
background-color:#ECF7C6;
height:60px;
position:fixed;
margin-top:-20px;*/
z-index: 0;
position: fixed;
width: 98.75%;
margin-top: -2%;
margin-bottom:0.5%;
margin-left:0.25%;
margin-right:0.25%;
height: 100px;
border: 2px dashed black;
background-color:#FC3F4D;
border-radius:5px;
}
div{height: 50px;
width: 100px;
border: 2px solid black;
border-radius: 5px;
margin:auto;
display:block;
position:relative;
}
div #titleSite{
position:relative;
top:10%;
color:white;
text-align:center;
font-family:Arial,sans-serif;
font-weight:bold;
border: 2px dashed white;
}][2]
its happens because of position:fixed of your #header If you do not want to change this just add the following css
#header{
top:0px;
}
#list{
margin-top:100px;(height of your header + gap between both divs)
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments