-1

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.

enter image description here

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)

UPDATE

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. enter image description here

Azlina T
  • 176
  • 2
  • 17

2 Answers2

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;
}
Community
  • 1
  • 1
Dejan.S
  • 18,571
  • 22
  • 69
  • 112
  • This uses the same styling to fix the problem as my answer, but it's a little neater since you don't need the extra empty div tag. I'll have to remember that... –  May 11 '16 at 07:20
  • It's a bit different, but check the clearfix link and read about it ;) @PhillipXT – Dejan.S May 11 '16 at 07:26
0

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

flexbox (if you dont' care about IE9)

Ilya Novojilov
  • 871
  • 8
  • 12