0
Вот код. Этот синий div с тестовым «новым кодом идет здесь?» это тот, который я пытаюсь правильно подобрать.Не могу разместить div, где я хочу?
http://codepen.io/mlynn/pen/MYZEoM
Я пытаюсь поместить это Див так, чтобы верхняя часть его идеально выровнено с верхней частью DIV слева от неё, например, так: http://i.imgur.com/3gDhrqs.png
оценила любую помощь. Не знаю, почему это так сложно.
HTML:
<!DOCTYPE html>
<!--
-->
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="css/styletime.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/init.js"></script>
</head>
<body>
<section id="heady">
<div style="text-align: left;padding:25px 70px;display:inline-block;float:left;"><b><a href="index.html">Site</b></a></p></div>
<div style="text-align: right;padding:25px 70px;display:inline-block;float:right;">
<a href="index.html">Home</a> |
<a href="index.html">Generic</a> |
<a href="index.html">Elements</a> |
<a href="index.html">Sign Up</a>
</div>
</section>
<section id="wrapper">
<br><br>
<img src="images/blacksquare.png" width="525" height="197"></img>
<br><br><br>
<div>
<div style="vertical-align:top;display:inline-block;float:left;">
<ul class="navbar cf">
<!-- <li><a href="#">item 2</a></li> -->
<li style="width:200px;">
<a href="#" class="ActiveListItem">Category</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
</ul>
</li>
</ul>
</div>
<div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
<form action="">
<input type="text" id="todo" placeholder="Enter a To-do and hit enter" autocomplete="off">
</form>
<!-- <ul class="active">
<li>Work <a href="">X</a></li>
<li>Sleep <a href="">X</a></li>
<li>Repeat <a href="">X</a></li>
</ul> -->
</div>
<div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
<ul class="active">
<!--
<li>Work <a href="">X</a></li>
<li>Sleep <a href="">X</a></li>
<li>Repeat <a href="">X</a></li>
-->
</ul>
</div>
</div>
<div style="float:right;vertical-align:top;width:450px;height:800px;background:blue;margin:0 0 0 0;">
New div goes here??
</div>
</section>
<section id="feety">
I believe I exist
</section>
</body>
</html>
CSS
/*adder*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 600);
* {
padding:0;
margin:0;
}
html {
background:teal;
}
body {
/*background:url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/
}
a {
color: #D9D9D9;
text-decoration: none;
}
a:active, a:hover {
text-decoration: underline;
}
#heady {
text-align: center;
width:100%;
height:75px;
background-color:#222222; /*Back Colors*/
font-family: Tahoma;
font-size: 16px;
color:white;
position:relative;
}
#wrapper {
text-align: center;
width:1000px;
height:1000px;
margin-left:auto;
margin-right:auto;
background-color:teal; /*Back Colors*/
font-family: Tahoma;
font-size: 16px;
position:relative;
}
#feety {
text-align: center;
width:100%;
height:100px;
background-color:darkslateblue; /*Back Colors*/
font-family: Tahoma;
font-size: 16px;
color:white;
position:relative;
}
/* clearfix */
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
.cf {
* zoom: 1;
}
ul.navbar {
background:white;
border-style:solid;
border-color:#ccc;
border-width:1px;
width: 132px;
border-radius: 4px;
margin-left:10px;
margin-right:5px;
font-size:14px;
height:33px;
}
.ActiveListItem:after {
content: "\25BC\00a0\00a0"; /*carat and spaces*/
float:right;
font-weight:900;
padding: 0px 0px;
font-size:100%;
line-height:17px; /*keeps carat in center of text*/
}
ul.navbar li a.ActiveListItem {
background:white !important;
color:black;
padding:3px 5px !important;
font-weight:normal !important;
margin-left:14px;/* got the activeitem centered with the list text this way*/
margin-right:0px;
margin-top:5px;
margin-bottom:6px;
width:100px;
}
ul.navbar li {
position: relative;
width:130px;
}
ul.navbar li a {
display: block;
color: white;
padding:10px 5px;
text-decoration:none;
transition: all .2s ease-in;
}
ul.navbar li a:hover,
ul.navbar li:hover > a {
background:#a6d0e1; /*Leaving for now, but keep in mind things bold slowly when you change this to gradient*/
color: #333;
font-weight:900;
}
ul.navbar li ul {
margin-top: 1px;
position: absolute;
background: #222;
font-size: 14px;
/* min-width: 200px; */
display: none;
z-index: 99;
box-shadow: inset 0 2px 3px rgba(0,0,0,.6),
0 5px 10px rgba(0,0,0,.6);
}
ol, ul { list-style: outside none none; }
.hidden { display: none; }
/*Lister*/
.container {
width: 60%;
margin: 0px auto;
}
form { }
.lister input, ul {
background: #eee;
border-radius: 5px;
/* width: 100%; */
box-sizing: border-box;
font-family:"Tahoma";
}
.lister input {
width:300px; /*width of todo input box*/
height:33px;
padding: 10px 10px 10px 20px;
border: 1px solid #ccc;
float:left;
margin-bottom:20px;
font-size:14px;
}
.lister ul {
/*list-style: square inside;*/
padding: 10px; /* padding for outside area of list*/
width:447px;
}
.active { border: 1px solid #ccc; }
.inactive { display: none; }
.lister li {
padding: 10px; /*controls height of list items*/
font-size:16px; /*font size of list items*/
font-weight: 600;
color: #34495e;
text-align:left;
}
.lister li:nth-child(odd) {
background: #dadfe1;
border-radius: 5px;
}
.lister li > a {
float: right;
text-decoration: none;
color: #22313f;
font-weight: bold;
transition: all .2s ease-in-out;
}
.lister li > a:hover {
font-size: 110%;
color: #c0392b;
}
/*.lister li:before {
content: "";
float:right;
font-weight:900;
padding: 0px 0px;
font-size:100%;
line-height:20px;
}
.CategoryIcon {
float:right;
color:red;
padding:40px 40px;
} */