Как поместить два div друг в друга?

Я пытаюсь поставить два div друг рядом друг с другом, но я не могу найти эффективный способ сделать это. Я хочу установить боковое меню рядом со статьей. Я пробовал плавать влево, но все, что он делает, создает огромный разрыв между ними. Это мой код:Как поместить два div друг в друга?

CSS

div#divone { 
    float:left; 
    margin-left: 10%; 
    border: 2px outset white; 
    padding; 10px 10px 10px 10px; 
    font-family; Times New Roman; 
} 
div#divtwo { 
    float:right; 
    margin-left: .1%; 
    border: 2px outset white; 
    padding; 10px 10px 10px 10px; 
    font-family; Times New Roman; 
}

HTML

<div id="divone"> 
    <p>word</p> 
</div> 
<div id="divtwo"> 
    <p>word</p> 
</div>

источник

2015-02-04 Scott Rose

Float обе дивы слева? http://jsfiddle.net/emturano/uju6pqL7/ – eclipsis

Вы можете использовать float:left на дивы, чтобы привести их обоих вместе, и в то время как вы делаете это, почему бы не поставить общие стили в одном месте, чтобы сделать ваш CSS немного «чище»?

div.floated { 
 
    float: left; 
 
    border: 2px outset white; 
 
    padding: 10px 10px 10px 10px; 
 
    font-family: Times New Roman; 
 
} 
 

 
div#divone { 
 
    margin-left: 10%; 
 
} 
 

 
div#divtwo { 
 
    margin-left: .1%; 
 
}

<body> 
 
    <div class="floated" id="divone"> 
 
    <p>word</p> 
 
    </div> 
 
    <div class="floated" id="divtwo"> 
 
    <p>word</p> 
 
    </div> 
 
</body>

вот jsfiddle представлять его, если вы хотите играть с кодом: http://jsfiddle.net/ya3L75xd/

источник

2015-02-04 22:34:59 msturdy