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)

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.

please no downvote to the answers as they gave me idea. Thank you — Azlina T, May 11 '16 at 06:40

score 2 · Answer 1 · edited May 23 '17 at 11:52

2

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;
}

edited May 23 '17 at 11:52

Community

1
1

answered May 11 '16 at 07:15

Dejan.S

17,513
22
66
109

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... – PhillipXT 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

score 0 · Answer 2 · answered May 11 '16 at 06:28

0

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

flexbox (if you dont' care about IE9)

answered May 11 '16 at 06:28

Ilya Novojilov

861
7
12

Is it means that IE9 will not support? – Azlina T May 11 '16 at 06:39
inline-block will work everywhere flexbox in modern browsers only two column layout with clearfix will work almost everywhere. – Ilya Novojilov May 11 '16 at 08:35

PhillipXT · Accepted Answer · 2016-05-11T07:15:09.260

-1

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.

edited May 11 '16 at 07:15

answered May 11 '16 at 06:30

PhillipXT

1,364
1
20
21

Sorry brother, it's not working. Still outside the content – Azlina T May 11 '16 at 06:38
Where did you add the div? It should be after `
...
` in the home1.php file. – PhillipXT May 11 '16 at 06:51
It locate inside nicely but the structure was not what I expected. See my update – Azlina T May 11 '16 at 06:58
Try the `clear:both` I just added to the style element. That worked for me in your fiddle code. – PhillipXT May 11 '16 at 07:06
forgive me for asking this question, is it I have to put inside `#isi` or `#middle` or both? – Azlina T May 11 '16 at 07:12
Thanks @PhillipXT for help me out. It works perfectly! – Azlina T May 11 '16 at 07:18
I'm sorry to say but in no way is this a acceptable solution to a clearfix problem. Sorry that you have to learn faulty. @AJ93 – Dejan.S May 11 '16 at 07:27
What's wrong with this method? It's not as neat as clearfix, but it's worked for me for years. It uses a very basic styling trick that should work on almost any browser. – PhillipXT May 11 '16 at 07:31
It's a way of the past (minimum 8 years ago clearfix was introduced). It adds a extra element to something that isn't necessary. Also by just adding a class to an element the problem is fixed. Also `clearfix` is an web developer standard, used in all frameworks ect. – Dejan.S May 11 '16 at 07:41

CSS layout problems

3 Answers3