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 to build native C++ apps with HTML/CSS UI?

    How do I make effect like this on image hover?

    How to align div elements while using css tables

    How to add spacing to text start in css

    Span tag is shown as text in Drupal Bootstrap subtheme

    How to get a css stylesheet value that is not interpreted by the browswer?

    HTML/CSS - How do I make divs to size according to their contents?

    How to scale an entire webpage down to ipad or phone size

    How to FadeIn a parent element and then it's child elements with a slight Delay (CSS Only)

    How to replicate this css media jquery using javascript to support IE

    How to make my two sections vertically align, even when scaled, with different amounts of content?

    CSS - How to remove comments and make CSS one line

    How to make an item to appear for a short time (Either Javascript or CSS) [closed]

    How can display table-row behave like colspan=3

    How to edit ol tags in rich text editor

    How to select all fields from a single box?

    How to make my popup not transparent and sideways draggable?

    how to keep my slider horizontally centered?

    How to conditionally apply CSS classes in Ember?

    how to change attribute of table cell based on contents when table rows created by while loop with PHP

    How to find the place where font-size for input is set?

    How to use 100% CSS background-image with scrolling content?

    How to show local html file into webview?

    how to change radio buttons style in h:selectOneRadio

    How to set a max-width only to text nodes not in a tag?

    How to reuse CSS selector?

    How can I style XML with CSS for viewing in a browser without first transforming to (X)HTML?

    How to set a td floating left in chrome?

    How do I hide the div if the Var is empty?

    How can I create a fluid and responsive horizontal toolbar with affix in Bootstrap 3?