CSS layout problems

Question

I am facing the problem where my page content suppose to be inside of <div id="content"> which is the grey box, all other pages is located inside the content except this.

This is the code named home1.php that I have tried so far. JSFiddle

This is snippet code from my index.php

<div id="content">

    <?php include_once("home1.php"); ?>

</div>  

I have suspected that code from CSS giving me this problem and can you guys give me solution to overcome this. Many thanks (Sorry for my bad English)

After add float:none suggested by PhillipXT , it works but the arrangement should be "pengumuman" on the left side and "2nd Content Area" on left side.

Answer 1

I haven't used your code because it contains broken html and elements that shouldent be inside other elements.

But this is the basic structure of a layout you could use for "two column layout".

You float the container divs and clearfix the container. Clearfix will fix your floating problems. Read about clearfix

jsfiddle

<div class="container clearfix">
  <div class="left_container">

  </div>
  <div class="right_container">

  </div>
</div>

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.container {}

.left_container {
  background-color: aqua;
  float: left;
  height: 400px;
  width: 200px;
}

.right_container {
  background-color: aquamarine;
  float: left;
  height: 400px;
  width: 300px;
}

Answer 2

It seems you use too many floats. You may consider using inline-block or

flexbox (if you dont' care about IE9)

Answer 3

That looks like an issue with floating div tags. I usually fix it by adding another empty div after the floating columns, with float set to none :

This is how the structure should look:

<div id="content">
    <div id="isi">...</div>
    <div id="middle">...</div>
    <div style="float:none; clear:both;"></div>
</div>

Not sure if that's the best way, but it works.