Проблема с выравниванием divs

Question

Я пытаюсь создать простую страницу CSS на моей ASP.NET веб-странице. Тем не менее, у меня возникают трудности с выравниванием Divs так, как я хочу.

Это то, что я пытаюсь выполнить:

Пожалуйста, обратите внимание, что на правой стороне, где .container текст и .wrap текст должен пройти весь путь к правой стороне. На правой стороне не должно быть зазора.

Вот мой html:

<div id="container"> 
    <div class="header"> 
     <img src="http://wiki.myexperiment.org/images/MyExperiment_logo_5016x960_trans.png" id="logo" /><div id="name">Welcome, John Smith</div> 
     <div id="logout"><a href="logout.aspx"><img src="http://s3.postimg.org/kpgjd1wi7/logout.png"/></a> 
     </div> 
    </div> 
</div> 
<div class="container"> 
    <div id="left">Left Wrap</div> 
    <div id="wrap"> 
     <div id ="topWrap"> Top Wrap 
     </div> 
     <div id="leftWrap"> Left Wrap 
     </div> 
     <div id="rightWrap"> Right Wrap 
     </div> 
    </div> 
</div> 

А вот мой CSS:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300); 

html { 
    width: 100%; 
    height: 100px; 
    font-family: 'Open Sans', sans-serif; 
    color: white; 
} 

body { 
    background-image:  url('http://s27.postimg.org/48jitw07n/Background_3_Darker.jpg'); 
background-repeat: no-repeat; 
} 

.header { 
    left: 0px; 
    top: 0px; 
    position: fixed; 
    height: 76px; 
    background-color: black; 
    margin-bottom: 25px; 
    width: 100%; 
    opacity: 0.5; 
    } 

#logo { 
float: left; 
margin-left: 5px; 
padding-top: 9px; 
width: 300px; 
height: 50px; 
} 

#name { 
float: right; 
margin-right: 100px; 
display: inline-block; 

} 

#logout { 
float: right; 
padding-top: 19px; 
display: inline; 
margin-right: 35px; 
} 

.container { 
margin-top: 50px; 
width: 100%; 
height: 100%; 
} 

.left { 
position: relative; 
float: left; 
margin-top: 50px; 
width: 10%; 
height: 400px; 
background-color: #B9D7D9; 
margin-bottom: 10px; 
} 

#wrap { 
margin-left: 12%; 
width: 100%; 
height: 400px; 
position: relative; 
} 

#topWrap { 
width: 100%; 
height: 50%; 
} 

#leftWrap { 
width: 50%; 
height: 50%; 
margin-left: 5px; 
display: inline-block; 
} 
#rightWrap { 
float: right; 
margin-right: 5px; 
display: inline-block; 
} 

К сожалению, выход не выходит, как я ожидал, что это будет.

Вот в output

Любые предложения о том, как я могу выровнять divs правильно?

+0

Здравствуйте @Sam Я обновил свой ответ более подробно, не стесняйтесь проверить его. – Stickers

+0

@sdcr, спасибо! – smr5

Answer 1

Есть что-то должны быть исправлены, главным образом незамкнутую <div>, и некоторые несогласованные идентификаторы и класс селекторов между HTML и CSS.

Я вижу, что вы приложили такие усилия, поэтому я написал основу для того, что вам нужно на основе вашего CSS, возможно, это поможет вам понять и начать работу там.

UPDATED JSFIDDLE И FULL DEMO

Одна вещь, которую я хочу сказать, я добавил #user вокруг #NAME и #logout, что делает его легче сделать плавающий.

И clear fix technique, где я использую код class="cf".

<div id="header" class="cf"> 
    <img id="logo" src="path/to/logo.png" /> 
    <div id="user"> 
     <div id="name"> 
      Welcome, John Smith 
     </div> 
     <div id="logout"> 
      <a href="#"><img src="path/to/logout.png" /></a> 
     </div> 
    </div> 
</div> 

Оставьте свои комментарии для любых вопросов.

Answer 2

Теперь, когда ваши дивы закрыты, вот вопросы, которые я вижу сразу:

• Вы ссылаетесь .left в вашем CSS, но ничего в HTML не имеет class="left". У вас есть id="left", что означает, что ваш CSS должен быть обновлен до #left.
• Вы не можете использовать inline-block и float на одном и том же элементе. Это два совершенно разных типа отображения, так как «float» неявно устанавливает display: block. Попробуйте вместо этого:

http://jsfiddle.net/ryanwheale/e60c3zt0/4/

#leftWrap { 
     float: left; 
     width: 50%; 
     height: 50%; 
    } 
    #rightWrap { 
     float: right; 
     width: 50%; 
    }