Два DIVs рядом друг с другом без обертки

Question

В настоящее время я схожу с ума, пока я пытаюсь заставить что-то работать.

Я создал небольшой веб-сайт из забавы и поиграл с ним, но я столкнулся с одной вещью, которая меня очень беспокоила.

Это HTML, который я придумал:

<div id="container"> 
<div id="header"> 
    <div id="cover-cloud"> 
    <div id="cloud" class="cloud stage"></div> 
    <div id="cloud2" class="cloud2 stage"></div> 
    <div id="cloud3" class="cloud3 stage"></div> 
    <div id="cloud4" class="cloud4 stage"></div> 
    <div id="heading"><h1>Website</h1></div> 
    </div> 
</div> 
<div id="nav"> 
    <ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About Me</a></li> 
    <li><a href="#">Links</a></li> 
    <li><a href="#">Imprint</a></li> 
    <li><a href="#">Contac</a></li> 
    </ul> 
</div> 
<div id="lang"> 
    <ul> 
    <li><a href="?lang=de"><img src="images/lang/de.gif" alt="DE"></a></li> 
    <li><a href="?lang=en"><img src="images/lang/en.gif" alt="EN"></a></li> 
    </ul> 
</div> 
<div id="content" class="clearfix"> 
    <div id="maincontent"> 
    <div class="contentblock"> 
    <h3>Home</h3> 
    <p>Some welcome text or maybe news, who knows :)</p> 
    </div> 
    </div> 
</div> 
<div id="footer">Some footer content</div> 
<div id="valid"> 
    <ul> 
    <li>Here comes the HTML validation thingy</li> 
    <li>Here comes the CSS validation thingy</li> 
    </ul> 
</div> 
</div> 
<div id="social"> 
<div id="facebook"><img src="images/icons/facebook.png" alt="Facebook"></div> 
<div id="twitter"><img src="images/icons/twitter.png" alt="Twitter"></div> 
<div id="youtube"><img src="images/icons/youtube.png" alt="YouTube"></div> 
</div> 

Теперь я хотел бы иметь социальный DIV на правой стороне контейнера DIV. Я понял, что социальная DIV теперь берет на себя измерения из контейнера DIV, а не с левой стороны экрана? Но кажется, что мое понимание было абсолютно неверным :(

Это CSS обоих контейнеров DIV: (которые работают только на главной странице, но когда я нажимаю ссылку, социальный DIV снова переходит в нижнее левое)

#container { width: 800px; margin: 25px auto 5px; background-color: #FFFFFF; border: 1px solid #000; border-radius: 5px; position: relative; } 

#social { margin: -154px 0 0; overflow: hidden; width: 45px; } 

Я также попытался несколько примеров некоторых ответов на здесь, но они не показывают правильный результат. Что я делаю неправильно?

Answer 1

блочные элементы (например, дивы) взять с их родителей элемент и всегда начинаем с разрыва строки. Недостаточно указать ширину элемента block, вы должны сказать, чтобы он оставался на одной строке. Вы можете сделать это с помощью floa тин:

#social { 
    float: left; 
} 

Или вы можете сделать оба дивы встроенный блок-элементы:

#container { 
    display: inline-block; 
} 

#social { 
    display: inline-block; 
} 

Эти два подхода имеют различные недостатки, но это другая история.