How do I organise divs that are nested inside each other?


Tags: html,css

Problem :

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>
    </div>
</div>

CSS

div.main {
   width: 40%;
}

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

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

div.body {
   float: left;
}


Solution :

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>


    CSS Howto..

    How do I divide all margins but last to even out space?

    How do I provide navigation options on the sides of a centered logo?

    How to specify an element to re-appear after a page break?

    How to change hover background on links in css?

    Overflow-x and overflow-y properties, how should they work? [duplicate]

    How can I load css file in Meteor for just one page?

    How to Triger a css animation for a y element from a a trigger x

    Django Allauth - How to add custom css class to fields?

    How to make the click logo appear without a href in css/html?

    How to draw random lines with CSS to replicate effect [closed]

    Awkward gap between menu items. How to fix?

    How can I take advantage of Sass, for example, in rendering FizzBuzz?

    How to move the jQueryUI close button on the dialog over the top of top right corner?

    How to arrange divs by css floats?

    How to find out an element with id partially matched, and change its css style?

    css how to get rounded corners on button.

    How can I vertically centre bullets that bracket headers

    How to make text-overflow with ellipsis work with long strings that have no breaks

    How can I centralize this jquery styling colors into css?

    How to add a border around a canvas?

    How to fit inner div inside an outer div

    How can I include conversion from LESS to CSS in my ANT build file without including an extra Rhino .jar?

    How to make a sliding menu similar to the Facebook Mobile side menu with html,css,jquery?

    How to do mutiple css class in one line javascript code

    How to set Safari print margins via CSS to print borderless

    Basic CSS: When applying effects to images in CSS, how do you exclude the banner image?

    How do I keep floated child divs from wrapping?

    How to change the behavior of the following css button?

    If I have 3 elements, how do I only allow one to be highlighted when clicked at any one time? - CSS, jQuery

    How to use css in asp.net for web server control?