Liam Emery Liam Emery - 3 months ago 7
CSS Question

How do I organise divs that are nested inside eachother?

enter image description here

This is the layout I'm trying to achieve, but I'm having trouble with

Main Body
and
Side Box
. The issue I'm having is the
Main Body
is completely under the
Side Box
, instead of being how it should be in the image above(kind of wrapping around
Side Box
).

Is someone able to lead me in the right direction in terms of using CSS layout techniques?

So far this is what I've done

HTML

<div class="main">
<div class="header">
<h2>Header</h2>
</div>
<div class="sidebox">
<h2>Side box</h2>
</div>
<div class="body">
<p>Body</p>


CSS

div.main {
width: 40%;
}

div.header {
width: 100%;
position: absolute;
}

div.sidebox {
float: right;
width: 30%;
height: 50%;
}

div.body {
float: left;
}

Answer

You can try floating the side box element to the right.

The key here is that the .sidebox element appears before the .main element in the source code.

.title {
  background-color: yellow;
}
.sidebox {
  width: 25%;
  background-color: gray;
  float: right;
}
<h1 class="title">The title goes here</h1>
<div class="sidebox">The side box text. Donec adipiscing, lorem non euismod venenatis, diam orci tincidunt magna, ut interdum magna arcu vel elit. </div>
<div class="main">  
<p>Donec adipiscing, lorem non euismod venenatis, diam orci tincidunt magna, ut interdum magna arcu vel elit. Nunc molestie lacus non urna eleifend mattis. Praesent ipsum nulla, tempor malesuada lacinia quis, elementum et tellus.</p>
<p>Donec adipiscing, lorem non euismod venenatis, diam orci tincidunt magna, ut interdum magna arcu vel elit. Nunc molestie lacus non urna eleifend mattis. Praesent ipsum nulla, tempor malesuada lacinia quis, elementum et tellus.</p>  
<p>Donec adipiscing, lorem non euismod venenatis, diam orci tincidunt magna, ut interdum magna arcu vel elit. Nunc molestie lacus non urna eleifend mattis. Praesent ipsum nulla, tempor malesuada lacinia quis, elementum et tellus.</p>
</div>

Comments