user1009073 user1009073 - 1 year ago 57
HTML Question

Aligning Nested DIVs

I am trying to have a group of DIVs within a webpage, and I cannot seem to get the layout like I want. What I want is this... (no borders needed)

enter image description here

Here is my code...

<div id='participation_All' style="height:100%">
<div id='participation_Left' style="width: 100%; min-height: 600px">

<div id='part_bargauge' style='float: left; width: 70%'></div>
<div id='part_listbox'></div>

<div id='participation_Right' style="width: 100%; min-height: 600px">


The problem is the part_Listbox is NOT showing up where I need it. Instead, it is showing up on the left of the screen, below part_All. Any idea what I am doing wrong?

Answer Source

I would suggest to use a framework like bootstrap, as already suggested. If you want to do it without you can edit the code below for your needs:

<div class='main' style='display:block; width:100%; height:100%; background-color:green;'>
    <div class='left' style='margin:10px;width:50%; height:90%; background-color:yellow; float:left;'>
        <div class='inner_left' style='margin:10px;width:40%; height:90%; background-color:purple; float: left;'></div>
        <div class='inner_right>' style='margin:10px;width:40%; height:90%; background-color:grey; float: right;'></div>
        <div class='clear' style='clear: both;'></div>
    <div class='right' style='margin:10px;width:30%; height:90%; background-color:blue; float:right;'>
    <div class='clear' style='clear: both;'></div>

I would at least skip the inline css and move it to a css file which will be included in your finale page cause this kind of code is very very poor for maintenance. (but your choise in the end ;-) )