I can't make two blocks in the same position level. - html

Question

In this snippet, you can see the code.
I want to put mid_left and mid_right in the same div tag mid. but I can' position mid_right right, either out of the mid tag or not in the same level as mid_left. I tried float:left and display:inline-block, but none of them are working, how could I fix it?
/* CSS Document */
body {
margin:0 auto;
padding: 0;
background: url(../img/7_092641_2_meitu_1.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: 100% 100%;
font-size: 15px;
color: #E2E2E2;
line-height: 24px;
font-family: '微软雅黑';
}
.logo {
width: 400px;
hight: 380px;
margin: -610px auto 0 -40px;
position:fixed;
}
.wrapper {
width: 1100px;
height: auto !important;
margin: 0 auto;
background-color:#F7F7F7;
}
.header {
width: 1050px;
height: 100px;
margin: 0 auto;
border: 1px;
/*background-image: url(../../../Stockholm-Sweden.jpg);*/
}
.header h1 {
font-size: 40px;
font-weight: 900;
font-family: '仿宋_GB2312';
margin: 0 auto;
padding-top: 18px;
}
/*------------------ NAV ------------------------*/
.container {
width: 1090px;
height:50x;
background : #464646;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
margin: 0 auto;
}
ul {
margin: 0;
padding: 0;
}
ul.menu {
height: 50px;
border-left: 1px solid rgba(0,0,0,0.3);
border-right: 1px solid rgba(255,255,255,0.3);
}
ul.menu li {
list-style: none;
float:left;
height: 49px;
text-align: center;
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
ul li a {
display: block;
padding: 0 20px;
border-left: 1px solid rgba(255,255,255,0.1);
border-right: 1px solid rgba(0,0,0,0.1);
text-align: center;
line-height: 49px;
font-size: medium;
font-weight: bold;
color: #FFF;
font-family: '微软雅黑';
text-decoration:none;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
-webkit-transition-property: background;
-webkit-transition-duration: 700ms;
-moz-transition-property: background;
-moz-transition-duration: 700ms;
}
ul li a:hover {
background: transparent none;
}
ul li.active a{
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
/*------------ slider ---------------*/
.slider_1 {
height: 400px;
width: 1090px;
margin: 20px auto 0 auto;
overflow: hidden;
}
/*----------- mid ------------------*/
.mid {
height:auto;
width:1000px;
margin:0 auto;
font-family:'仿宋_GB2312';
border: solid 1px #CCCCCC;
}
.mid a {
text-decoration: none;
}
.mid_span {
height:45px;
line-height:45px;
color:#004276;
font-size:18px;
font-weight:bold;
margin-right:6px;
}
.mid_left {
height: auto;
width: 490px;
margin: 0 auto 0 5px;
border-right: dashed #F2F2F2;
diaplay: inline-block;
}
.mid_right {
height: auto;
width: 480px;
margin: 0 10px 0 auto;
}
.mid_left_1 {
width: 100%;
height: auto;
margin: 0 auto;
}
.date {
color: #CECECE;
line-height:22px;
font-size: 12px;
}
.detail {
color:#BA2636;
}
.brif {
color:#454545;
line-height:22px;
margin-top: -5px;
}
.tittle {
height:80px;
width:1050px;
margin: 20px auto 10px auto;
text-align: center;
}
.tittle h2 {
font-family:'微软雅黑';
font-size: 24px;
font-weight: bold;
color: #292c2f;
display: inline-block;
}
.tittle_line{
background: url(../img/title_line.png) no-repeat;
width: 350px;
height: 8px;
margin: 0 10px 5px 10px;
display: inline-block;
}
footer {
width:1050px;
height:auto;
margin: 0 auto;
posion: absolute;
}
.footer-distributed{
background-color: #292c2f;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
text-align: left;
font: bold 16px sans-serif;
padding: 10px 25px 5px 25px;
margin-top: 80px;
}
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
display: inline-block;
vertical-align: top;
}
/* Footer left */
.footer-distributed .footer-left{
width: 40%;
margin-left: 40px;
}
/* The company logo */
.footer-distributed h3{
color: #ffffff;
font: normal 36px 'Cookie', cursive;
margin: 0;
}
.footer-distributed h3 span{
color: #5383d3;
}
/* Footer links */
.footer-distributed .footer-links{
color: #ffffff;
margin: 20px 0 12px;
padding: 0;
}
.footer-distributed .footer-links a{
display:inline-block;
line-height: 1.8;
text-decoration: none;
color: inherit;
}
.footer-distributed .footer-company-name{
color: #8f9296;
font-size: 14px;
font-weight: normal;
margin: 0;
}
/* Footer Center */
.footer-distributed .footer-center{
width: 35%;
}
.footer-distributed .footer-center i{
background-color: #33383b;
color: #ffffff;
font-size: 25px;
width: 38px;
height: 38px;
border-radius: 50%;
text-align: center;
line-height: 42px;
margin: 10px 15px;
vertical-align: middle;
}
.footer-distributed .footer-center i.fa-envelope{
font-size: 17px;
line-height: 38px;
}
.footer-distributed .footer-center p{
display: inline-block;
color: #ffffff;
vertical-align: middle;
margin:0;
}
.footer-distributed .footer-center p span{
display:block;
font-weight: normal;
font-size:14px;
line-height:2;
}
.footer-distributed .footer-center p a{
color: #5383d3;
text-decoration: none;;
}
/* Footer Right */
.footer-distributed .footer-right{
width: 20%;
}
.footer-distributed .footer-icons{
margin-top: 25px;
}
.footer-distributed .footer-icons a{
display: inline-block;
width: 35px;
height: 35px;
cursor: pointer;
background-color: #33383b;
border-radius: 2px;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 35px;
margin-right: 12px;
margin-bottom: 5px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>旅游导航</title>
<meta name="description" content="北欧旅游" />
<meta name="keywords" content="各种索引条目" />
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/pgwslider.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>Header</h1>
</div><!-- header -->
<div class="container">
<ul class="menu">
<li>HOME</li>
<li>ABOUT</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</div><!--navigation -->
<div class="tittle">
<div class="tittle_line"></div>
<h2>EXAMPLE</h2><div class="tittle_line"></div>
</div><!-- tittle -->
<div class="mid">
<div class="mid_left">
<div class="mid_left_1">
<a target="_blank" href="#" title="投资移民瑞典能享受欧盟待遇吗？" class="mid_span">投资移民瑞典能享受欧盟待遇吗？</a>
<span class="date">(02/11 14:50)</span> <br>
<p class="brif">投资移民瑞典能享受欧盟待遇吗？获得欧盟成员国的国籍，也意味着被整个欧盟接纳，直接成为欧盟公民，享受整个欧盟范围内的各种优待，包括经商，接受教育，找工作，都能够享受欧盟优先的原则。...<span class="detail">[</span>详细<span class="detail">]</span></p>
</div><!--med left 1 -->
<div class="mid_left_1">
<a target="_blank" href="#" title="一步到位获得瑞典移民身份享福利" class="mid_span">一步到位获得瑞典移民身份享福利</a>
<span class="date">(02/11 14:50)</span> <br>
<p class="brif">一步到位获得瑞典移民身份享福利。瑞典移民者在获得身份的同时，就能即刻享受福利，而一些国家规定则没有这么宽松，比如澳洲商业移民，在获得4年期的临时商务签证的期间，必须成功经营企业才能进一步申请转为移民，而...<span class="detail">[</span>详细<span class="detail">]</span></p>
</div><!--med left 1 -->
<div class="mid_left_1">
<a target="_blank" href="#" title="瑞典移民福利“一辈子都很幸福”" class="mid_span">瑞典移民福利“一辈子都很幸福”</a>
<span class="date">(02/11 14:50)</span> <br>
<p class="brif">瑞典移民申请材料有哪些，如果您计划到瑞典与您的丈夫、妻子、同居伴侣或者您的孩子或者其他近亲属长期居住，那么就应当了解申请居留许可之前要准备哪些申请材料。...<span class="detail">[</span>详细<span class="detail">]</span></p>
</div><!--med left 1 -->
<div class="mid_left_1">
<a target="_blank" href="#" title="欧洲各国移民福利大比拼 " class="mid_span">欧洲各国移民福利大比拼 </a>
<span class="date">(02/11 14:50)</span> <br>
<p class="brif">欧洲各国移民福利大比拼。2015年，欧洲移民政策将更加成熟稳定，也将受到市场更广泛的认可。下面就随小编来看看欧洲各国移民福利吧！看看有没有适合您的那一款。...<span class="detail">[</span>详细<span class="detail">]</span></p>
</div><!--med left 1 -->
</div><!--mid left -->
<div class="mid_right">
23t2erse452
</div>
</div><!--mid-->
<footer class="footer-distributed"><!--footer-->
<div class="footer-left">
<h3>Feito<span>AB</span></h3>
<p class="footer-company-name">Feito AB © 2015</p>
</div>
<div class="footer-center">
<div>
<i class="fa fa-map-marker"></i>
<p><span>Mejerigatan 29</span> Göteborg</p>
</div>
<div>
<i class="fa fa-phone"></i>
<p>[phone]</p>
</div>
</div>
<!--
<div class="footer-right">
<div>
<i class="fa fa-envelope"></i>
<p>support#company.com</p>
</div>
</div>
-->
<div class="footer-right">
<div class="footer-icons">
<a href="#">
<img src="img/footer/1.jpg" alt="facebook">
</a>
<img src="img/footer/2.jpg" alt="facebook">
<img src="img/footer/3.jpg" alt="linkedin">
<img src="img/footer/4.jpg" alt="mewo">
</div>
</div>
</footer><!--footer-->
</div><!--wrapper-->
</body>
</html>

Answer 1

set .mid position to relative, and mid_left and mid_right position to absolute. Then mid_left and mid_right will stack on top of each other, with mid_right being on top since it appears later in the HTML.

Answer 2

Make sure you understand how the box model works.
http://www.w3schools.com/css/css_boxmodel.asp
When you add attributes like border and padding, it effectively adds to the width of your box.
So, having a container div with 1000px, you need to make sure of 2 things:
If you want to have 2 divs inside that container with 500px width (one left, one right) ensure that your width + border + padding does not exceed the 500px limit.
When using inline-blocks, there might be the scenario where a white space renders between your two blocks, effectively pushing the 2nd one right by a few pixels. If you have control over the HTML, make sure no white spaces exist between your left and right div. If you cannot control this, you can give the containing element font-size: 0px; and then just reset your font size inside the left and right elements (for instance 16px).

Answer 3

adding display: inline-block; for both .mid_left and .mid_right classes works perfectly for me. Also check, if you didn't have space between these two divs.

Answer 4

To use your current code, make these adjustments:
Correct the spelling of display from diaplay:
.mid_left {
display: inline-block;
}
And then add display: inline-block; to .mid_right.
Here is an example: JSFiddle.
Hope this solves your issue.

Answer 5

you have a couple of options
flexbox . depending on browser support . if you have IE10+ then this is the way to go
display: table on parent and display: table-cell on left/right container
keep the container with the biggest height in the page flow and position: absolute the second container . then add height: 100% on the positioned container