Сделать мой div обернуть вокруг другого div?

Question

div.sidebar { 
 
    float: left; 
 
    margin-left: 35px; 
 
    margin-top: 20px; 
 
    margin-bottom: 5px; 
 
    width: 350px; 
 
    padding: 20px; 
 
    background-color: #667A56; 
 
    border-style: solid; 
 
    border-radius: 3px; 
 
    border-color: #47553C; 
 
    border-width: 5px; 
 
    clear: left; 
 
} 
 
img.side { 
 
    border-style: solid; 
 
    border-color: black; 
 
    border-width: 1px; 
 
    width: 350px; 
 
    margin-top: 5px; 
 
} 
 
div.content { 
 
    margin-top: 30px; 
 
    margin-left: 465px; 
 
    margin-right: 35px; 
 
    background-color: #667A56; 
 
    border-style: solid; 
 
    border-radius: 3px; 
 
    border-color: #47553C; 
 
    border-width: 5px; 
 
    padding: 20px; 
 
    padding-bottom: 10px; 
 
}

<!---Sidebar---> 
 
<div class=sidebar> 
 

 
    <h2> 
 
Header 
 
</h2> 
 

 

 
    <ul> 
 

 
    links 
 

 
    </ul> 
 

 
</div> 
 

 

 

 
<div class=sidebar> 
 

 
    <h2> 
 
Header 
 
</h2> 
 
    <img class=side>an image 
 

 
</div> 
 

 
<!--- Main Content ---> 
 

 
<div class=content> 
 

 
    <h2 class=contentheader> 
 
header 
 
</h2> 
 

 
    <p class=content> 
 
    contenttext 
 
    </p> 
 

 
    <p class=content> 
 
    contenttext 
 
    </p> 
 
</div> 
 

 
<div class=content> 
 

 
    <h2 class=contentheader> 
 
header 
 
</h2> 
 

 
    <p class=content> 
 
    content text 
 
    </p> 
 

 
    <p class=content> 
 
    content text 
 
    </p> 
 

 

 
</div>

Итак, это мой сайт.

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

Если кодировка сайта необходима, я могу это предоставить. Благодаря!

Answer 1

Было бы хорошо, если бы вы сделали это так:?

Обратите внимание, что невозможно получить элемент с такими границами, как в эскизе, вам нужно будет использовать умножённые элементы, делающие трюк.

.sidebar { 
 
    padding: 50px 100px; 
 
    border: 1px solid black; 
 
}

<div style="float: left; width: 40%"> 
 
    <div class="sidebar">sidebar</div> 
 
    <div class="sidebar">sidebar</div> 
 
</div> 
 
<div style="float: left; width: 59%; border: 1px solid black; height: 200px;">Main Content Bar Thing</div> 
 

 
<div style="display: inline;">asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd </div>

Answer 2

Трудно дать конкретные советы без кода, но вы можете вкладывать дивы внутри друг друга, как:

<div id="content"> 
    <div id="sidebar"> 
     <p>Whatever you want inside your div goes here...<\p> 
    <\div> 
<\div> 

Вам нужно будет добавить укладка с помощью CSS, чтобы получить точный макет, который вы хотите